すべての 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 ベース
Astro
Qwik

Angular アプリケーションのスクリーンショット Nuxt.js アプリケーションのスクリーンショット Next.js アプリケーションのスクリーンショット Remix アプリケーションのスクリーンショット SvelteKit アプリケーションのスクリーンショット SolidStart アプリケーションのスクリーンショット Astro アプリケーションのスクリーンショット Qwik アプリケーションのスクリーンショット

学習内容

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

前提条件

Cloud Shell ターミナルにログインしていること。
課金が有効になっており、Cloud Run にデプロイする権限がある Google Cloud プロジェクトがあること。
- 以前に Cloud Run サービスをデプロイしたことがある場合は、これを確認できます。たとえば、ソースコードから Node.js ウェブサービスをデプロイするクイックスタートに沿って作業を開始できます。

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

Cloud Shell ターミナル（https://shell.cloud.google.com/?show=terminal）に移動します。Cloud Shell を初めて起動した場合は、その内容を説明する中間画面が表示されます。中間画面が表示された場合は、[続行]をクリックします。Cloud Shell のプロビジョニングと接続には数分かかります。
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）

Angular アプリケーションを作成するディレクトリに移動します。
```
cd ~
```
サーバーサイドレンダリング（SSR）を使用する Angular アプリケーションを作成します。
```
npx @angular/cli new angular-app --ssr
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。
作成した新しいプロジェクトフォルダに移動します。
```
cd angular-app
```
アプリケーションをデプロイします。
```
gcloud run deploy --allow-unauthenticated
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。

アプリケーションの確認

デプロイには数分かかります。完了すると、Cloud Run は次のような URL を返します。

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

Angular アプリケーションのスクリーンショット

提供された URL を新しいブラウザタブで開いて、デプロイされたアプリケーションを表示します。

省略可: クリーンアップ

Angular プロジェクトをローカルで削除します。
```
cd ..
rm -rf angular-app
```
Angular Cloud Run サービスを削除します。
```
gcloud run services delete angular-app
```
続行するかどうかを確認するメッセージが表示されたら、Enter キーを押して続行します。

7. Nuxt.js（Vue.js）

Angular アプリケーションを作成するディレクトリに移動します。
```
cd ~
```
Nuxt.js アプリケーションを作成します。
```
npx nuxi init nuxt-app
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。
作成した新しいプロジェクトフォルダに移動します。
```
cd nuxt-app
```
アプリケーションをデプロイします。
```
gcloud run deploy --allow-unauthenticated
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。

アプリケーションの確認

デプロイには数分かかります。完了すると、Cloud Run は次のような URL を返します。

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

提供された URL を新しいブラウザタブで開いて、デプロイされたアプリケーションを表示します。

Nuxt.js アプリケーションのスクリーンショット

省略可: クリーンアップ

Nuxt.js プロジェクトをローカルで削除します。
```
cd ..
rm -rf nuxt-app
```
Nuxt.js Cloud Run サービスを削除します。
```
gcloud run services delete nuxt-app
```
続行するかどうかを確認するメッセージが表示されたら、Enter キーを押して続行します。

8. Next.js（React）

Angular アプリケーションを作成するディレクトリに移動します。
```
cd ~
```
Next.js アプリケーションを作成します。
```
npx create-next-app next-app
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。
作成した新しいプロジェクトフォルダに移動します。
```
cd next-app
```
アプリケーションをデプロイします。
```
gcloud run deploy --allow-unauthenticated
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。

アプリケーションの確認

デプロイには数分かかります。完了すると、Cloud Run は次のような URL を返します。

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

提供された URL を新しいブラウザタブで開いて、デプロイされたアプリケーションを表示します。

Next.js アプリケーションのスクリーンショット

省略可: クリーンアップ

Next.js プロジェクトをローカルで削除します。
```
cd ..
rm -rf next-app
```
Next.js Cloud Run サービスを削除します。
```
gcloud run services delete next-app
```
続行するかどうかを確認するメッセージが表示されたら、Enter キーを押して続行します。

9. リミックス（React）

Angular アプリケーションを作成するディレクトリに移動します。
```
cd ~
```
Remix アプリケーションを作成します。
```
npx create-remix remix-app
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。
作成した新しいプロジェクトフォルダに移動します。
```
cd remix-app
```
アプリケーションをデプロイします。
```
gcloud run deploy --allow-unauthenticated
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。

アプリケーションの確認

デプロイには数分かかります。完了すると、Cloud Run は次のような URL を返します。

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

提供された URL を新しいブラウザタブで開いて、デプロイされたアプリケーションを表示します。

Remix アプリケーションのスクリーンショット

省略可: クリーンアップ

Remix プロジェクトをローカルで削除します。
```
cd ..
rm -rf remix-app
```
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）

Angular アプリケーションを作成するディレクトリに移動します。
```
cd ~
```
SvelteKit アプリケーションを作成します。
```
npx create-svelte svelte-app
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。
作成した新しいプロジェクトフォルダに移動します。
```
cd svelte-app
```
アプリケーションをデプロイします。
```
gcloud run deploy --allow-unauthenticated
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。

アプリケーションの確認

デプロイには数分かかります。完了すると、Cloud Run は次のような URL を返します。

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

提供された URL を新しいブラウザタブで開いて、デプロイされたアプリケーションを表示します。

SvelteKit アプリケーションのスクリーンショット

省略可: クリーンアップ

SvelteKit プロジェクトをローカルで削除します。
```
cd ..
rm -rf svelte-app
```
SvelteKit Cloud Run サービスを削除します。
```
gcloud run services delete svelte-app
```
続行するかどうかを確認するメッセージが表示されたら、Enter キーを押して続行します。

12. SolidStart（Solid）

Angular アプリケーションを作成するディレクトリに移動します。
```
cd ~
```
SolidStart アプリケーションを作成します。
```
npx create-solid solid-app
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。
作成した新しいプロジェクトフォルダに移動します。
```
cd solid-app
```
アプリケーションをデプロイします。
```
gcloud run deploy --allow-unauthenticated
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。

アプリケーションの確認

デプロイには数分かかります。完了すると、Cloud Run は次のような URL を返します。

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

提供された URL を新しいブラウザタブで開いて、デプロイされたアプリケーションを表示します。

SolidStart アプリケーションのスクリーンショット

省略可: クリーンアップ

SolidStart プロジェクトをローカルで削除します。
```
cd ..
rm -rf solid-app
```
SolidStart Cloud Run サービスを削除します。
```
gcloud run services delete solid-app
```
続行するかどうかを確認するメッセージが表示されたら、Enter キーを押して続行します。

13. 天体写真

Angular アプリケーションを作成するディレクトリに移動します。
```
cd ~
```
Astro アプリケーションを作成します。
```
npx create-astro astro-app
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。
作成した新しいプロジェクトフォルダに移動します。
```
cd astro-app
```
Node.js 用の Astro アダプターを追加します。
```
npx astro add node
```

package.json の start スクリプトを更新します。

npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"

アプリケーションをデプロイします。
```
gcloud run deploy --allow-unauthenticated
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。

アプリケーションの確認

デプロイには数分かかります。完了すると、Cloud Run は次のような URL を返します。

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

提供された URL を新しいブラウザタブで開いて、デプロイされたアプリケーションを表示します。

Astro アプリケーションのスクリーンショット

省略可: クリーンアップ

Astro プロジェクトをローカルで削除します。
```
cd ..
rm -rf astro-app
```
Astro Cloud Run サービスを削除します。
```
gcloud run services delete astro-app
```
続行するかどうかを確認するメッセージが表示されたら、Enter キーを押して続行します。

14. Qwik

Angular アプリケーションを作成するディレクトリに移動します。
```
cd ~
```
Qwik アプリケーションを作成します。
```
npx create-qwik
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。
作成した新しいプロジェクトフォルダに移動します。
```
cd qwik-app
```
Cloud Run 用の Qwik アダプターを追加します。
```
npm run qwik add cloud-run
```
アプリケーションをデプロイします。
```
gcloud run deploy --allow-unauthenticated
```
設定の入力を求められたら、Enter キーを押してデフォルトを受け入れます。

アプリケーションの確認

デプロイには数分かかります。完了すると、Cloud Run は次のような URL を返します。

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

提供された URL を新しいブラウザタブで開いて、デプロイされたアプリケーションを表示します。

Qwik アプリケーションのスクリーンショット

省略可: クリーンアップ

Qwik プロジェクトをローカルで削除します。
```
cd ..
rm -rf qwik-app
```
Qwik Cloud Run サービスを削除します。
```
gcloud run services delete qwik-app
```
続行するかどうかを確認するメッセージが表示されたら、Enter キーを押して続行します。

15. 完了

以上で、この Codelab は完了です。

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

本日扱った内容

Cloud Build が自動的にサポートする JavaScript フレームワークをデプロイする方法
- Angular SSR - Angular ベース
- Nuxt.js - Vue.js ベース
- Next.js - React ベース
- Remix - React ベース
- SvelteKit - Svelte ベース
- SolidStart - Solid.js ベース
構成が必要な JavaScript フレームワークをデプロイする方法
- Astro
- 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 を実行すると、使用可能なすべてのプロジェクトのリストが表示されます。

すべての JavaScript フレームワークを Cloud Run にデプロイする方法 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

1. はじめに

概要

学習内容

前提条件

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

3. API の有効化

4. デフォルト リージョンを構成する

5. Git を構成する

6. Angular SSR（Angular）

アプリケーションの確認

省略可: クリーンアップ

7. Nuxt.js（Vue.js）

アプリケーションの確認

省略可: クリーンアップ

8. Next.js（React）

アプリケーションの確認

省略可: クリーンアップ

9. リミックス（React）

アプリケーションの確認

省略可: クリーンアップ

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

11. SvelteKit（Svelte）

アプリケーションの確認

省略可: クリーンアップ

12. SolidStart（Solid）

アプリケーションの確認

省略可: クリーンアップ

13. 天体写真

アプリケーションの確認

省略可: クリーンアップ

14. Qwik

アプリケーションの確認

省略可: クリーンアップ

15. 完了

本日扱った内容

16. クリーンアップ

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

4. デフォルトリージョンを構成する