クイックスタート: Cloud Run に Angular SSR サービスをデプロイする

シンプルな Hello World アプリケーションを作成してコンテナ イメージにパッケージ化し、Artifact Registry にアップロードして Cloud Run にデプロイする方法を学習します。

始める前に

  1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

  2. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Go to project selector

  3. Make sure that billing is enabled for your Google Cloud project.

  4. Install the Google Cloud CLI.

  5. To initialize the gcloud CLI, run the following command: 

    gcloud init

  6. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Go to project selector

  7. Make sure that billing is enabled for your Google Cloud project.

  8. Install the Google Cloud CLI.

  9. To initialize the gcloud CLI, run the following command: 

    gcloud init

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

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

  12. ドメイン制限の組織のポリシーでプロジェクトの未認証呼び出しが制限されている場合は、限定公開サービスのテストの説明に従って、デプロイされたサービスにアクセスする必要があります。

  13. Cloud Run Admin API を有効にします。

    gcloud services enable run.googleapis.com

    Cloud Run Admin API を有効にすると、Compute Engine のデフォルトのサービス アカウントが自動的に作成されます。

  14. Cloud Build がソースを構築できるようにするには、次のコマンドを実行して、Compute Engine のデフォルト サービス アカウントに Cloud Build サービス アカウントのロールを付与します。

    gcloud projects add-iam-policy-binding PROJECT_ID \
    --member=serviceAccount:PROJECT_NUMBER-compute@developer.gserviceaccount.com \
    --role=roles/cloudbuild.builds.builder

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

    プロジェクト番号とプロジェクト ID は、Google Cloud コンソールの [ようこそ] ページで確認できます。

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

Angular SSR サービスを作成してデプロイする手順は次のとおりです。

  1. helloworld という名前の新しい Angular SSR プロジェクトを作成するには、次のコマンドを使用します。

    npx @angular/cli@17.3.6 new helloworld --ssr

    プロンプトが表示されたら、Enter キーを押してデフォルトを受け入れます。

  2. ディレクトリを helloworld に変更します。

    cd helloworld

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

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

重要: 以下の説明では、このクイックスタートで使用するプロジェクトのオーナーロールまたは編集者ロールが付与されていることを前提としています。ロールが付与されていない場合は、Cloud Run ソース デベロッパー ロールで、ソースから Cloud Run リソースをデプロイするために必要な権限を確認してください。

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

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

  1. ソースコード ディレクトリで、次のコマンドを使用してソースからデプロイします。

    gcloud run deploy

    API を有効にするように求められたら、「y」と入力して有効にします。

    1. ソースコードの場所を求められたら、Enter キーを押して現在のフォルダにデプロイします。

    2. サービス名の入力を求められたら、Enter キーを押して、デフォルトの名前（helloworld など）を受け入れます。

    3. プロジェクトで API（Artifact Registry API など）を有効にするよう求められたら、y を押して応答します。

    4. リージョンの入力を求められたら、任意のリージョン（us-central1 など）を選択します。

    5. 指定したリージョンにリポジトリを作成するように求められたら、y を押して応答します。

    6. 未認証の呼び出しを許可するように求められた場合は、「y」と入力します。ドメイン制限の組織のポリシーが原因でこのメッセージが表示されない場合があります。詳細については、始める前にのセクションをご覧ください。

    デプロイが完了するまで少しお待ちください。正常に完了すると、コマンドラインにサービス URL が表示されます。

  2. このサービス 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（大阪）
  • europe-north1（フィンランド） リーフアイコン 低 CO2
  • europe-southwest1（マドリッド） リーフアイコン 低 CO2
  • europe-west1（ベルギー） リーフアイコン 低 CO2
  • europe-west4（オランダ） リーフアイコン 低 CO2
  • europe-west8（ミラノ）
  • europe-west9（パリ） リーフアイコン 低 CO2
  • me-west1（テルアビブ）
  • us-central1（アイオワ） リーフアイコン 低 CO2
  • us-east1（サウスカロライナ）
  • us-east4（北バージニア）
  • us-east5（コロンバス）
  • us-south1（ダラス） リーフアイコン 低 CO2
  • us-west1（オレゴン） リーフアイコン 低 CO2

ティア 2 料金を適用

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

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

これで完了です。ソースコードから Cloud Run にコンテナ イメージをデプロイしました。Cloud Run は、受信したリクエストを処理するためにコンテナ イメージを自動的に水平方向にスケールアウトし、リクエスト数が減少するとスケールインします。料金は、リクエストの処理中に使用した CPU、メモリ、ネットワークに対してのみ発生します。

クリーンアップ

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

サービスが使用されていない場合、Cloud Run の料金は発生しませんが、コンテナ イメージを Artifact Registry に保存すると課金される場合があります。コンテナ イメージを削除するか、Google Cloud プロジェクトを削除してこのような料金が発生しないようにできます。Google Cloud プロジェクトを削除すると、そのプロジェクト内で使用されているすべてのリソースに対する課金が停止します。

  1. In the Google Cloud console, go to the Manage resources page.

    Go to Manage resources

  2. In the project list, select the project that you want to delete, and then click Delete.
  3. In the dialog, type the project ID, and then click Shut down to delete the project.

次のステップ

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

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