Как развернуть все платформы JavaScript в Cloud Run

1. Введение

Обзор

В этой лаборатории кода разверните восемь приложений JavaScript в Cloud Run:

  • Angular SSR — на основе Angular
  • Nuxt.js — на основе Vue.js
  • Next.js — на основе React
  • Ремикс - на основе React
  • SvelteKit — на основе Svelte.
  • SolidStart — на основе Solid.js
  • Астро
  • Квик

Скриншот приложения AngularСкриншот приложения Nuxt.jsСкриншот приложения Next.jsСкриншот приложения RemixСкриншот приложения SvelteKitСкриншот приложения SolidStartСкриншот приложения AstroСкриншот приложения Qwik

Что вы узнаете

  • Как автоматически развернуть платформы JavaScript, которые Cloud Build поддерживает
  • Как развернуть фреймворки JavaScript, требующие настройки

Предварительные условия

2. Активируйте Cloud Shell

  1. Перейдите к терминалу Cloud Shell: https://shell.cloud.google.com/?show=terminal. Если вы впервые запускаете Cloud Shell, вам будет представлен промежуточный экран с описанием того, что это такое. Если появился промежуточный экран, нажмите « Продолжить» . Подготовка и подключение к Cloud Shell займет всего несколько минут.
  2. Выполните следующую команду в Cloud Shell, чтобы настроить проект gcloud :
    gcloud config set project <PROJECT_ID>
    Замените <PROJECT_ID> идентификатором вашего проекта. Пример:
    gcloud config set project js-frameworks
    Если будет предложено авторизоваться, нажмите «Авторизовать» .

3. Включите API

Прежде чем вы сможете начать использовать эту кодовую лабораторию, вам необходимо включить несколько API. Для этой лаборатории кода требуется использование следующих API. Вы можете включить эти API, выполнив следующую команду:

gcloud services enable \
    cloudbuild.googleapis.com \
    artifactregistry.googleapis.com \
    run.googleapis.com

Затем вы можете установить переменные среды, которые будут использоваться в этой лаборатории кода.

4. Настройте регион по умолчанию.

Вы можете установить регион индивидуально для каждого развертывания. Эта команда установит регион по умолчанию us-central1 так что вам не нужно будет устанавливать его для каждого из них.

gcloud config set run/region us-central1

5. Настройте git

Некоторые библиотеки ожидают, что для контроля версий по умолчанию будет использоваться git . Если на вашем компьютере уже настроен git (пример: вы запускаете эту лабораторную работу локально), вам не нужно выполнять эти шаги.

git config --global user.email "you@example.com"
git config --global user.name "Your Name"
git config --global init.defaultBranch main

6. Angular SSR (Угловой)

  1. Перейдите в каталог, в котором вы хотите создать приложение Angular. 
    cd ~
  2. Создайте приложение Angular, использующее рендеринг на стороне сервера (SSR).
    npx @angular/cli new angular-app --ssr
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.
  3. Перейдите в созданную вами папку нового проекта. 
    cd angular-app
  4. Развертывание приложения
    gcloud run deploy --allow-unauthenticated
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.

Посетите ваше приложение

Развертывание займет несколько минут. По завершении Cloud Run вернет URL-адрес следующего вида: 

https://angular-app-xxxxxxxxxx-uc.a.run.app

Скриншот приложения Angular

Откройте предоставленный URL-адрес в новой вкладке браузера, чтобы просмотреть развернутое приложение.

Дополнительная очистка

  1. Удалить проект Angular локально 
    cd ..
rm -rf angular-app
  2. Удалить службу Angular Cloud Run
    gcloud run services delete angular-app
    Когда вас спросят, хотите ли вы продолжить, нажмите клавишу Enter , чтобы продолжить.

7. Nuxt.js (Vue.js)

  1. Перейдите в каталог, в котором вы хотите создать приложение Angular. 
    cd ~
  2. Создайте приложение Nuxt.js
    npx nuxi init nuxt-app
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.
  3. Перейдите в созданную вами папку нового проекта. 
    cd nuxt-app
  4. Развертывание приложения
    gcloud run deploy --allow-unauthenticated
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.

Посетите ваше приложение

Развертывание займет несколько минут. По завершении Cloud Run вернет URL-адрес следующего вида: 

https://nuxt-app-xxxxxxxxxx-uc.a.run.app

Откройте предоставленный URL-адрес в новой вкладке браузера, чтобы просмотреть развернутое приложение.

Скриншот приложения Nuxt.js

Дополнительная очистка

  1. Удалите проект Nuxt.js локально. 
    cd ..
rm -rf nuxt-app
  2. Удалите службу Nuxt.js Cloud Run.
    gcloud run services delete nuxt-app
    Когда вас спросят, хотите ли вы продолжить, нажмите клавишу Enter , чтобы продолжить.

8. Next.js (React)

  1. Перейдите в каталог, в котором вы хотите создать приложение Angular. 
    cd ~
  2. Создайте приложение Next.js
    npx create-next-app next-app
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.
  3. Перейдите в созданную вами папку нового проекта. 
    cd next-app
  4. Развертывание приложения
    gcloud run deploy --allow-unauthenticated
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.

Посетите ваше приложение

Развертывание займет несколько минут. По завершении Cloud Run вернет URL-адрес следующего вида: 

https://next-app-xxxxxxxxxx-uc.a.run.app

Откройте предоставленный URL-адрес в новой вкладке браузера, чтобы просмотреть развернутое приложение.

Скриншот приложения Next.js

Дополнительная очистка

  1. Удалите проект Next.js локально. 
    cd ..
rm -rf next-app
  2. Удалите службу Cloud Run Next.js.
    gcloud run services delete next-app
    Когда вас спросят, хотите ли вы продолжить, нажмите клавишу Enter , чтобы продолжить.

9. Ремикс (Реакция)

  1. Перейдите в каталог, в котором вы хотите создать приложение Angular. 
    cd ~
  2. Создайте приложение Remix
    npx create-remix remix-app
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.
  3. Перейдите в созданную вами папку нового проекта. 
    cd remix-app
  4. Развертывание приложения
    gcloud run deploy --allow-unauthenticated
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.

Посетите ваше приложение

Развертывание займет несколько минут. По завершении Cloud Run вернет URL-адрес следующего вида: 

https://remix-app-xxxxxxxxxx-uc.a.run.app

Откройте предоставленный URL-адрес в новой вкладке браузера, чтобы просмотреть развернутое приложение.

Скриншот приложения Remix

Дополнительная очистка

  1. Удалить проект Remix локально 
    cd ..
rm -rf remix-app
  2. Удалить сервис Remix Cloud Run
    gcloud run services delete remix-app
    Когда вас спросят, хотите ли вы продолжить, нажмите клавишу Enter , чтобы продолжить.

10. Очистка Cloud Shell

Если вы не используете Cloud Shell или развертываете только одно приложение, этот шаг не является обязательным.

Cloud Shell предлагает постоянный домашний каталог объемом 5 ГБ и работает в Google Cloud.

Чтобы развернуть все восемь платформ с помощью Cloud Shell, вам потребуется освободить место для остальных приложений.

Удаление проектов в Cloud Shell не приведет к удалению развернутых вами сервисов Cloud Run.

Чтобы очистить уже созданные приложения, выполните следующие команды: 

cd ~
rm -rf angular-app/
rm -rf nuxt-app/
rm -rf next-app/
rm -rf remix-app/

11. SvelteKit (Свелте)

  1. Перейдите в каталог, в котором вы хотите создать приложение Angular. 
    cd ~
  2. Создайте приложение SvelteKit.
    npx create-svelte svelte-app
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.
  3. Перейдите в созданную вами папку нового проекта. 
    cd svelte-app
  4. Развертывание приложения
    gcloud run deploy --allow-unauthenticated
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.

Посетите ваше приложение

Развертывание займет несколько минут. По завершении Cloud Run вернет URL-адрес следующего вида: 

https://svelte-app-xxxxxxxxxx-uc.a.run.app

Откройте предоставленный URL-адрес в новой вкладке браузера, чтобы просмотреть развернутое приложение.

Скриншот приложения SvelteKit

Дополнительная очистка

  1. Удалите проект SvelteKit локально. 
    cd ..
rm -rf svelte-app
  2. Удалите службу SvelteKit Cloud Run.
    gcloud run services delete svelte-app
    Когда вас спросят, хотите ли вы продолжить, нажмите клавишу Enter , чтобы продолжить.

12. SolidStart (сплошной)

  1. Перейдите в каталог, в котором вы хотите создать приложение Angular. 
    cd ~
  2. Создайте приложение SolidStart.
    npx create-solid solid-app
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.
  3. Перейдите в созданную вами папку нового проекта. 
    cd solid-app
  4. Развертывание приложения
    gcloud run deploy --allow-unauthenticated
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.

Посетите ваше приложение

Развертывание займет несколько минут. По завершении Cloud Run вернет URL-адрес следующего вида: 

https://solid-app-xxxxxxxxxx-uc.a.run.app

Откройте предоставленный URL-адрес в новой вкладке браузера, чтобы просмотреть развернутое приложение.

Скриншот приложения SolidStart

Дополнительная очистка

  1. Удалите проект SolidStart локально 
    cd ..
rm -rf solid-app
  2. Удаление службы SolidStart Cloud Run
    gcloud run services delete solid-app
    Когда вас спросят, хотите ли вы продолжить, нажмите клавишу Enter , чтобы продолжить.

13. Астро

  1. Перейдите в каталог, в котором вы хотите создать приложение Angular. 
    cd ~
  2. Создайте приложение Astro
    npx create-astro astro-app
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.
  3. Перейдите в созданную вами папку нового проекта. 
    cd astro-app
  4. Добавьте адаптер Astro для Node.js. 
    npx astro add node
  5. Обновите start скрипт в package.json 
    npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
  6. Развертывание приложения
    gcloud run deploy --allow-unauthenticated
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.

Посетите ваше приложение

Развертывание займет несколько минут. По завершении Cloud Run вернет URL-адрес следующего вида: 

https://astro-app-xxxxxxxxxx-uc.a.run.app

Откройте предоставленный URL-адрес в новой вкладке браузера, чтобы просмотреть развернутое приложение.

Скриншот приложения Astro

Дополнительная очистка

  1. Удалить проект Astro локально 
    cd ..
rm -rf astro-app
  2. Удалить сервис Astro Cloud Run
    gcloud run services delete astro-app
    Когда вас спросят, хотите ли вы продолжить, нажмите клавишу Enter , чтобы продолжить.

14. Квик

  1. Перейдите в каталог, в котором вы хотите создать приложение Angular. 
    cd ~
  2. Создать приложение Qwik
    npx create-qwik
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.
  3. Перейдите в созданную вами папку нового проекта. 
    cd qwik-app
  4. Добавьте адаптер Qwik для Cloud Run 
    npm run qwik add cloud-run
  5. Развертывание приложения
    gcloud run deploy --allow-unauthenticated
    Когда будет предложено указать ваши предпочтения, нажмите клавишу Enter , чтобы принять значения по умолчанию.

Посетите ваше приложение

Развертывание займет несколько минут. По завершении Cloud Run вернет URL-адрес следующего вида: 

https://qwik-app-xxxxxxxxxx-uc.a.run.app

Откройте предоставленный URL-адрес в новой вкладке браузера, чтобы просмотреть развернутое приложение.

Скриншот приложения Qwik

Дополнительная очистка

  1. Удалить проект Qwik локально 
    cd ..
rm -rf qwik-app
  2. Удаление службы Qwik Cloud Run
    gcloud run services delete qwik-app
    Когда вас спросят, хотите ли вы продолжить, нажмите клавишу Enter , чтобы продолжить.

15. Поздравляем!

Поздравляем с завершением работы над кодом!

Мы рекомендуем просмотреть документацию Quickstart: Deploy to Cloud Run из репозитория git, чтобы ваши будущие сборки могли автоматически развертываться при каждом нажатии на систему контроля версий.

Что мы рассмотрели

  • Как автоматически развернуть платформы JavaScript, которые Cloud Build поддерживает
    • Angular SSR — на основе Angular
    • Nuxt.js — на основе Vue.js
    • Next.js — на основе React
    • Ремикс - на основе React
    • SvelteKit — на основе Svelte.
    • SolidStart — на основе Solid.js
  • Как развернуть фреймворки JavaScript, требующие настройки
    • Астро
    • Квик

16. Очистка

Чтобы избежать непреднамеренных расходов (например, если эта служба Cloud Run случайно вызывается больше раз, чем ежемесячно выделено количество вызовов Cloud Run на уровне бесплатного пользования ), вы можете либо удалить задание Cloud Run, либо удалить проект, созданный на шаге 1.

Чтобы удалить службы Cloud Run, перейдите в облачную консоль Cloud Run по адресу https://console.cloud.google.com/run/ и удалите службы Cloud Run.

Если вы решите удалить весь проект, вы можете перейти на https://console.cloud.google.com/cloud-resource-manager , выбрать проект, созданный на шаге 2, и нажать «Удалить». Если вы удалите проект, вам придется изменить проекты в Cloud SDK. Вы можете просмотреть список всех доступных проектов, запустив gcloud projects list .