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

1. Введение

Обзор

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

  • Angular SSR — на основе Angular
  • Nuxt.js — на основе Vue.js
  • Next.js — на основе React
  • Remix — на основе React
  • SvelteKit — на основе Svelte
  • SolidStart — на основе Solid.js
  • Астро
  • Qwik

Скриншот приложения 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. Угловой 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. Удалите службу Next.js Cloud Run.
    gcloud run services delete next-app
    Когда появится запрос о продолжении, нажмите клавишу Enter .

9. Remix (React)

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

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

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

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

11. SvelteKit (Svelte)

  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 (Solid)

  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. Qwik

  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. Поздравляем!

Поздравляем с завершением практического занятия!

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

Что мы обсудили

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

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 .