クイックスタート: Angular SSR ウェブアプリを構築して Cloud Run にデプロイする

Cloud Run を使用して、コードサンプルから Google Cloudへ 1 つのコマンドで「Hello World」ウェブアプリケーションをビルドしてデプロイする方法について学習します。

このクイックスタートの手順に沿って、ソースコードからデプロイすると、Cloud Run によって Dockerfile が自動的にビルドされます。

始める前に

アカウントにログインします Google Cloud を初めて使用する場合は、 Google Cloud アカウントを作成して、実際のシナリオで Google プロダクトのパフォーマンスを評価してください。新規のお客様には、ワークロードの実行、テスト、デプロイができる無料クレジット $300 分を差し上げます。

Google Cloud CLI をインストールします。

注: すでに gcloud CLI をインストールしている場合は、最新バージョンがインストールされていることを確認してください。 gcloud components update

外部 ID プロバイダ（IdP）を使用している場合は、まず連携 ID を使用して gcloud CLI にログインする必要があります。

gcloud CLI を初期化するには、次のコマンドを実行します:

gcloud init

プロジェクトを Google Cloud 作成または選択します。

プロジェクトを選択または作成するために必要なロール

プロジェクトを選択する: プロジェクトの選択に特定の IAM ロールは必要ありません。ロールが付与されているプロジェクトを選択できます。
プロジェクトを作成する: プロジェクトを作成するには、プロジェクト作成者ロール（roles/resourcemanager.projectCreator）が必要です。これには resourcemanager.projects.create 権限が含まれています。詳しくは、ロールを付与する方法をご覧ください。

プロジェクトを作成する Google Cloud :
```
gcloud projects create PROJECT_ID
```
PROJECT_ID は、作成する Google Cloud プロジェクトの名前に置き換えます。
作成した Google Cloud プロジェクトを選択します。
```
gcloud config set project PROJECT_ID
```
PROJECT_ID は、 Google Cloud プロジェクトの名前に置き換えます。

このガイドで既存のプロジェクトを使用する場合は、このガイドを完了するために必要な権限があることを確認します。新しいプロジェクトを作成した場合は、必要な権限がすでに付与されています。

プロジェクト Google Cloud に対して課金が有効になっていることを確認します。

Google Cloud CLI をインストールします。

注: すでに gcloud CLI をインストールしている場合は、最新バージョンがインストールされていることを確認してください。 gcloud components update

外部 ID プロバイダ（IdP）を使用している場合は、まず連携 ID を使用して gcloud CLI にログインする必要があります。

gcloud CLI を初期化するには、次のコマンドを実行します:

gcloud init

プロジェクトを Google Cloud 作成または選択します。

プロジェクトを選択または作成するために必要なロール

プロジェクトを選択する: プロジェクトの選択に特定の IAM ロールは必要ありません。ロールが付与されているプロジェクトを選択できます。
プロジェクトを作成する: プロジェクトを作成するには、プロジェクト作成者ロール（roles/resourcemanager.projectCreator）が必要です。これには resourcemanager.projects.create 権限が含まれています。詳しくは、ロールを付与する方法をご覧ください。

プロジェクトを作成する Google Cloud :
```
gcloud projects create PROJECT_ID
```
PROJECT_ID は、作成する Google Cloud プロジェクトの名前に置き換えます。
作成した Google Cloud プロジェクトを選択します。
```
gcloud config set project PROJECT_ID
```
PROJECT_ID は、 Google Cloud プロジェクトの名前に置き換えます。

プロジェクト Google Cloud に対して課金が有効になっていることを確認します。

Cloud Run サービスのデフォルトプロジェクトを設定するには:
```
 gcloud config set project PROJECT_ID
```
PROJECT_ID は、このクイックスタートで作成したプロジェクトの名前に置き換えます。

Node.js 20 以降がインストールされていない場合は、Node.js をインストールします。

ドメイン制限の組織のポリシーでプロジェクトの未認証呼び出しが制限されている場合は、限定公開サービスのテストの説明に従って、デプロイされたサービスにアクセスする必要があります。
Cloud Run Admin API と Cloud Build API を有効にします。
API を有効にするために必要なロール
API を有効にするには、権限を含む Service Usage 管理者 IAM ロール（roles/serviceusage.serviceUsageAdmin）が必要です。serviceusage.services.enable詳しくは、ロールを付与する方法をご覧ください。
```
gcloud services enable run.googleapis.com cloudbuild.googleapis.com
```
Cloud Run Admin API を有効にすると、Compute Engine のデフォルトのサービスアカウントが自動的に作成されます。

Cloud Run の料金を確認するか、料金計算ツールで費用を見積もります。

必要なロール

このクイックスタートを完了するために必要な権限を取得するには、管理者に次の IAM ロールを付与するよう依頼してください。

プロジェクトに対する Cloud Run 管理者（roles/run.admin）
プロジェクトに対する Cloud Run ソースデベロッパー（roles/run.sourceDeveloper）
サービス ID に対するサービスアカウントユーザー（roles/iam.serviceAccountUser）
プロジェクトに対するログ閲覧者（roles/logging.viewer）

ロールの付与については、プロジェクト、フォルダ、組織へのアクセス権の管理をご覧ください。

必要な権限は、カスタムロールや他の事前定義ロールから取得することもできます。

Cloud Build サービスアカウントにプロジェクトへのアクセス権を付与する

この動作をオーバーライドしない限り、Cloud Build は、ソースコードと Cloud Run リソースのビルドにデフォルトの Cloud Build サービスアカウントとして Compute Engine のデフォルトのサービスアカウントを自動的に使用します。

Cloud Build がソースをビルドできるようにするには、プロジェクトの Cloud Build サービスアカウントに Cloud Run ビルダー（roles/run.builder）のロールを付与します。

gcloud projects add-iam-policy-binding PROJECT_ID \
    --member=serviceAccount:SERVICE_ACCOUNT_EMAIL_ADDRESS \
    --role=roles/run.builder

PROJECT_ID は実際の Google Cloudプロジェクト ID に置き換え、SERVICE_ACCOUNT_EMAIL_ADDRESS は Cloud Build サービスアカウントのメールアドレスに置き換えます。Compute Engine のデフォルトサービスアカウントを Cloud Build サービスアカウントとして使用している場合は、サービスアカウントのメールアドレスに次の形式を使用します。

PROJECT_NUMBER-compute@developer.gserviceaccount.com

PROJECT_NUMBER は、使用する Google Cloudプロジェクト番号に置き換えます。

プロジェクト ID とプロジェクト番号を確認する方法については、プロジェクトの作成と管理をご覧ください。

Cloud Run ビルダーのロールを付与すると、反映されるまでに数分かかることがあります。

サンプルサービスを作成する

既存の Angular SSR アプリを Cloud Run にデプロイできます。新しい Angular SSR サービスを作成してデプロイする手順は次のとおりです。

helloworld という名前の新しい Angular SSR プロジェクトを作成するには、次のコマンドを使用します。
```
npx -y @angular/cli@21 new helloworld --ssr
```
プロンプトが表示されたら、Enter キーを押してデフォルトを受け入れます。
ディレクトリを helloworld に変更します。
```
cd helloworld
```

これでアプリが完成し、デプロイできるようになりました。

ソースから Cloud Run にデプロイする

ソースからのデプロイでは、ソースコードからコンテナイメージが自動的にビルドされて、デプロイされます。

ソースからデプロイするには:

ソースコードディレクトリで、次のコマンドを使用して現在のフォルダをデプロイします。
```
gcloud run deploy --source .
```
1. サービス名の入力を求められたら、Enter キーを押して、デフォルトの名前（helloworld など）を受け入れます。
2. プロジェクトで追加の API（Artifact Registry API など）を有効にするよう求められたら、y を押して応答します。
3. リージョンの入力を求められたら、任意のリージョン（europe-west1 など）を選択します。
4. 指定したリージョンにリポジトリを作成するように求められたら、y を押します。
5. 公開アクセスを許可するように求められたら、y を押します。ドメイン制限の組織のポリシーが原因でこのメッセージが表示されない場合があります。詳細については、始める前にのセクションをご覧ください。
デプロイが完了するまで少しお待ちください。成功すると、コマンドラインにサービス URL が表示されます。
このサービス URL をウェブブラウザで開き、デプロイしたコンテナにアクセスします。

Cloud Run のロケーション

Cloud Run はリージョナルです。つまり、Cloud Run サービスを実行するインフラストラクチャは特定のリージョンに配置され、そのリージョン内のすべてのゾーンで冗長的に利用できるように Google によって管理されます。

レイテンシ、可用性、耐久性の要件を満たしていることが、Cloud Run サービスを実行するリージョンを選択する際の主な判断材料になります。一般的には、ユーザーに最も近いリージョンを選択できますが、Cloud Run サービスで使用されている他の Google Cloudプロダクトのロケーションも考慮する必要があります。 Google Cloud プロダクトを複数のロケーションで使用すると、サービスのレイテンシだけでなく、コストにも影響を及ぼす可能性があります。

Cloud Run は、次のリージョンで利用できます。

ティア 1 料金を適用

asia-east1（台湾）
asia-northeast1（東京）
asia-northeast2（大阪）
asia-south1 （ムンバイ、インド）
asia-southeast3 （バンコク）
europe-north1（フィンランド）低 CO₂
europe-north2（ストックホルム）低 CO₂
europe-southwest1（マドリッド）低 CO₂
europe-west1（ベルギー）低 CO₂
europe-west4（オランダ）低 CO₂
europe-west8（ミラノ）
europe-west9（パリ）低 CO₂
me-west1（テルアビブ）
northamerica-south1（メキシコ）
us-central1（アイオワ）低 CO₂
us-east1 （サウスカロライナ）
us-east4（北バージニア）
us-east5（コロンバス）
us-south1（ダラス）低 CO₂
us-west1（オレゴン）低 CO₂

ティア 2 料金を適用

africa-south1（ヨハネスブルグ）
asia-east2（香港）
asia-northeast3（ソウル、韓国）
asia-southeast1（シンガポール）
asia-southeast2 （ジャカルタ）
asia-south2（デリー、インド）
australia-southeast1（シドニー）
australia-southeast2（メルボルン）
europe-central2 （ワルシャワ、ポーランド）
europe-west10 （ベルリン）
europe-west12 （トリノ）
europe-west2（ロンドン、イギリス）低 CO₂
europe-west3（フランクフルト、ドイツ）
europe-west6（チューリッヒ、スイス）低 CO₂
me-central1（ドーハ）
me-central2（ダンマーム）
northamerica-northeast1（モントリオール）低 CO₂
northamerica-northeast2（トロント）低 CO₂
southamerica-east1（サンパウロ、ブラジル）低 CO₂
southamerica-west1（サンティアゴ、チリ）低 CO₂
us-west2 （ロサンゼルス）
us-west3（ソルトレイクシティ）
us-west4（ラスベガス）

Cloud Run サービスをすでに作成している場合は、Google Cloud コンソールの Cloud Run ダッシュボードにリージョンが表示されます。

クリーンアップ

Google Cloud アカウントで追加料金が発生しないようにするには、このクイックスタートでデプロイしたすべてのリソースを削除します。

リポジトリを削除する

デプロイされたサービスが使用されていない場合、Cloud Run の料金は発生しません。ただし、コンテナイメージを Artifact Registry に保存した場合にも料金が発生する可能性があります。Artifact Registry リポジトリを削除するには、Artifact Registry ドキュメントのリポジトリを削除するの手順を行います。

サービスを削除する

Cloud Run サービスの費用は、リクエストを受け取るまでは発生しません。Cloud Run サービスを削除するには、次のいずれかの操作を行います。

コンソール

サービスを削除するには:

Google Cloud コンソールで、Cloud Run の [サービス] ページに移動します。

Cloud Run に移動
削除するサービスをサービスリストで探し、そのチェックボックスをクリックして選択します。
[削除] をクリックします。これにより、サービスのすべてのリビジョンが削除されます。これにより、サービスのすべてのリビジョンが削除されます。

gcloud

サービスを削除するには、次のコマンドを実行します。

gcloud run services delete SERVICE --region REGION

次のように置き換えます。

SERVICE: サービスの名前。
REGION: サービスの Google Cloud リージョン。

テストプロジェクトを削除する

Google Cloud プロジェクトを削除すると、そのプロジェクト内のすべてのリソースに対する課金が停止します。プロジェクト内のすべての Google Cloud リソースを解放する手順は次のとおりです。

注意 : プロジェクトを削除すると、次のような影響があります。

プロジェクト内のすべてのものが削除されます。既存のプロジェクトを使用してこのドキュメントのタスクを行った場合、そのプロジェクトを削除すると、プロジェクト内で行った他の作業もすべて削除されます。
カスタムプロジェクト ID が失われます。このプロジェクトを作成したときに、将来使用するカスタムプロジェクト ID を作成した可能性があります。そのプロジェクト ID を使用した URL（例: appspot.com URL）を保持するには、プロジェクト全体ではなく、プロジェクト内の選択したリソースだけを削除します。

プロジェクトを削除する: Google Cloud

gcloud projects delete PROJECT_ID

次のステップ

コードソースからコンテナをビルドし、リポジトリに push する方法については、以下をご覧ください。

サーバーレンダリングの Angular アプリ向けに GitHub を自動的に統合し、CDN を使用してデプロイを最適化するには、Firebase App Hosting の使用を検討してください。

クイックスタート: Angular SSR ウェブアプリを構築して Cloud Run にデプロイする

始める前に

必要なロール

Cloud Build サービス アカウントにプロジェクトへのアクセス権を付与する

サンプル サービスを作成する

ソースから Cloud Run にデプロイする

Cloud Run のロケーション

ティア 1 料金を適用

ティア 2 料金を適用

クリーンアップ

リポジトリを削除する

サービスを削除する

コンソール

gcloud

テスト プロジェクトを削除する

次のステップ

Cloud Build サービスアカウントにプロジェクトへのアクセス権を付与する

サンプルサービスを作成する

テストプロジェクトを削除する