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

1. はじめに

概要

この Codelab では、8 つの 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 アプリケーションのスクリーンショット

学習内容

  • Cloud Build がサポートする JavaScript フレームワークを自動的にデプロイする方法
  • 構成が必要な 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> は実際のプロジェクト ID に置き換えます。例:
    gcloud config set project js-frameworks
    承認するよう求められたら、[承認] をクリックします。

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. 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 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（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. 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 を新しいブラウザタブで開いて、デプロイされたアプリケーションを表示します。

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. 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 は完了です。

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

本日扱った内容

  • Cloud Build がサポートする JavaScript フレームワークを自動的にデプロイする方法
    • 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 Cloud Console（https://console.cloud.google.com/run/）に移動して、Cloud Run サービスを削除します。

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