すべての JavaScript フレームワークを Cloud Run にデプロイする方法

1. はじめに

概要

この Codelab では、8 つの JavaScript アプリケーションを Cloud Run にデプロイします。

  • Angular SSR - Angular ベース
  • Nuxt.js - Vue.js ベース
  • Next.js - React ベース
  • リミックス - React がベース
  • SvelteKit - Svelte ベース
  • SolidStart - Solid.js ベース
  • 天体写真
  • Qwik

Angular アプリケーションのスクリーンショットNuxt.js アプリケーションのスクリーンショットNext.js アプリケーションのスクリーンショットリミックス アプリのスクリーンショットSvelteKit アプリケーションのスクリーンショットSolidStart アプリケーションのスクリーンショット天体写真アプリのスクリーンショットQwik アプリケーションのスクリーンショット

学習内容

  • Cloud Build が自動的にサポートする JavaScript フレームワークをデプロイする方法
  • 構成が必要な JavaScript フレームワークをデプロイする方法

前提条件

2. Cloud Shell をアクティブにする

  1. Cloud Shell ターミナルに移動します（https://shell.cloud.google.com/?show=terminal）。Cloud Shell を初めて起動する場合は、Cloud Shell について説明する中間画面が表示されます。中間画面が表示されたら、[続行] をクリックします。ほんの数分で Cloud Shell のプロビジョニングと接続が完了します。
  2. Cloud Shell で次のコマンドを実行して、gcloud プロジェクトを設定します。
    gcloud config set project <PROJECT_ID>
    &lt;PROJECT_ID&gt; は実際のプロジェクト ID に置き換えます。例:
    gcloud config set project js-frameworks
    承認するよう求められたら、[Authorize] をクリックします。

3. API を有効にする

この Codelab を使用する前に、いくつかの API を有効にする必要があります。この Codelab では、次の API を使用する必要があります。これらの API を有効にするには、次のコマンドを実行します。

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

その後、この Codelab 全体で使用する環境変数を設定します。

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（Angular）

  1. Angular アプリケーションを作成するディレクトリに移動します。
    cd ~
  2. サーバーサイド レンダリング（SSR）を使用する Angular アプリケーションを作成する
    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. リミックス（リアクション）

  1. Angular アプリケーションを作成するディレクトリに移動します。
    cd ~
  2. リミックス アプリケーションを作成する
    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. リミックス プロジェクトをローカルで削除する
    cd ..
rm -rf remix-app
  2. Remix Cloud Run サービスを削除する
    gcloud run services delete remix-app
    続行を確認するメッセージが表示されたら、Enter キーを押して続行します。

10. Cloud Shell のクリーンアップ

Cloud Shell を使用していない場合、または 1 つのアプリケーションのみをデプロイする場合、この手順は省略可能です。

Cloud Shell は 5 GB の永続的なホーム ディレクトリを備えており、Google Cloud で動作します。

Cloud Shell で 8 つのフレームワークをすべてデプロイするには、残りのアプリケーション用のスペースを作成する必要があります。

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（ソリッド）

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

  1. Angular アプリケーションを作成するディレクトリに移動します。
    cd ~
  2. Astro アプリケーションを作成する
    npx create-astro astro-app
    設定の入力を求められたら、Enter キーを押してデフォルト値を受け入れます。
  3. 作成した新しいプロジェクト フォルダに移動します。
    cd astro-app
  4. Node.js 用 Astro アダプターを追加する
    npx astro add node
  5. package.json の start スクリプトを更新します。
    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 を新しいブラウザタブで開いて、デプロイしたアプリケーションを表示します。

天体写真アプリのスクリーンショット

クリーンアップ（省略可）

  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. Cloud Run 用の Qwik アダプタを追加する
    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. 完了

これでこの Codelab は完了です。

クイックスタート: Git リポジトリから Cloud Run にデプロイするのドキュメントを確認して、バージョン管理に push するたびに今後のビルドを自動的にデプロイできるようにすることをおすすめします。

振り返り

  • Cloud Build が自動的にサポートする JavaScript フレームワークをデプロイする方法
    • Angular SSR - Angular ベース
    • Nuxt.js - Vue.js ベース
    • Next.js - React ベース
    • リミックス - React がベース
    • SvelteKit - Svelte ベース
    • SolidStart - Solid.js ベース
  • 構成が必要な JavaScript フレームワークをデプロイする方法
    • 天体写真
    • Qwik

16. クリーンアップ

不注意による料金の発生（たとえば、この Cloud Run サービスが誤って無料枠の毎月の Cloud Run 呼び出し割り当てよりも多く呼び出された場合）を回避するには、Cloud Run ジョブを削除するか、手順 1 で作成したプロジェクトを削除します。

Cloud Run サービスを削除するには、Cloud Run Cloud コンソール（https://console.cloud.google.com/run/）に移動して Cloud Run サービスを削除します。

プロジェクト全体を削除する場合は、https://console.cloud.google.com/cloud-resource-manager に移動し、手順 2 で作成したプロジェクトを選択して [削除] を選択します。プロジェクトを削除する場合は、Cloud SDK でプロジェクトを変更する必要があります。使用可能なすべてのプロジェクトのリストを表示するには、gcloud projects list を実行します。