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

1. Введение

Обзор

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

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

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

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

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

• Вы вошли в терминал Cloud Shell .
• У вас есть проект Google Cloud с включенной оплатой и разрешением на развертывание в Cloud Run.
  • Вы можете подтвердить это, если ранее развернули службу Cloud Run. Например, вы можете выполнить развертывание веб-службы Node.js из краткого руководства по исходному коду, чтобы начать работу.

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 "[e-mail]"
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

Откройте предоставленный 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-адрес в новой вкладке браузера, чтобы просмотреть развернутое приложение.

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

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-адрес в новой вкладке браузера, чтобы просмотреть развернутое приложение.

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

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-адрес в новой вкладке браузера, чтобы просмотреть развернутое приложение.

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

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-адрес в новой вкладке браузера, чтобы просмотреть развернутое приложение.

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

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-адрес в новой вкладке браузера, чтобы просмотреть развернутое приложение.

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

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 , чтобы принять значения по умолчанию.

Примечание. Astro не поддерживается автоматически Cloud Run, поскольку Astro по умолчанию не использует среду Node.js. Приведенная выше команда npm pkg set обновляет start скрипт в package.json до HOST=0.0.0.0 node ./dist/server/entry.mjs . Если вы знаете эту команду для запуска приложения, установите ее в качестве сценария start . Cloud Build попытается запустить ваше приложение с тем сценарием, который вы установили в качестве start .

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

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

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

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

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

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 , чтобы принять значения по умолчанию.

Примечание. Qwik использует Dockerfile, чтобы указать, как создавать и запускать проект. Если выбранная вами платформа не поддерживается автоматически Cloud Run, вы можете использовать Dockerfile для развертывания предпочитаемой вами платформы, как это делает Qwik. Cloud Build будет искать файл Dockerfile, прежде чем пытаться использовать пакеты сборки для автоматического развертывания приложения.

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

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

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

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

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

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 .