Compute Engine を使用して Google Cloud でウェブアプリをホストしてスケーリングする

1. はじめに

Google Cloud にウェブサイトをデプロイする方法は多数あり、各ソリューションで提供される機能や制御レベルはそれぞれ異なります。Compute Engine では、ウェブサイトの実行に使用するインフラストラクチャを細かく制御できますが、Google Kubernetes Engine や App Engine などのソリューションより運用管理に手間がかかります。Compute Engine を使用すると、仮想マシン、ロードバランサといったインフラストラクチャの側面を細かく制御できます。このラボでは、サンプルのアプリケーションとして「Fancy Store」という名前の e コマースウェブサイトをデプロイし、Compute Engine でウェブサイトのデプロイとスケーリングを簡単に実行できることを確認していきます。

学習内容

Compute Engine インスタンスを作成する方法
ソースインスタンスからインスタンステンプレートを作成する方法
マネージドインスタンスグループを作成する方法
ヘルスチェックと自動修復を設定する方法
HTTP(S) ロードバランシングを作成する方法
ロードバランサのヘルスチェックを作成する方法
キャッシュにコンテンツ配信ネットワークを使用する方法

この Codelab が完了するまでに、マネージドインスタンスグループ内に複数のインスタンスを作成し、ウェブサイトのための自動修復、ロードバランシング、自動スケーリング、ローリングアップデートを行えるようになります。

前提条件

このラボで使用するコンセプトの概要については、以下の資料をご覧ください。
Google Cloud Platform へようこそ - GCP の基本
Google Cloud Compute Engine の概要
Google Cloud Storage の概要
スタートガイド: Cloud Shell

2. 環境のセットアップ

セルフペース型の環境設定

Cloud コンソールにログインして、新しいプロジェクトを作成するか、既存のプロジェクトを再利用しますGmail アカウントも Google Workspace アカウントもまだお持ちでない場合は、アカウントを作成してください。

プロジェクト ID を忘れないようにしてください。プロジェクト ID はすべての Google Cloud プロジェクトを通じて一意の名前にする必要があります（上記の名前はすでに使用されているので使用できません）。以降、このコードラボでは PROJECT_ID と呼びます。

次に、Google Cloud リソースを使用するために、Cloud Console で課金を有効にする必要があります。

このコードラボを実行しても、費用はほとんどかからないはずです。このチュートリアル以外で請求が発生しないように、リソースのシャットダウン方法を説明する「クリーンアップ」セクションの手順に従うようにしてください。Google Cloud の新規ユーザーは、300 米ドル分の無料トライアルプログラムをご利用いただけます。

Compute Engine API を有効にする

次に、Compute Engine API を有効にする必要があります。API を有効にするには、API の利用規約と請求の責任に同意する必要があります。

Cloud Shell で次のコマンドを実行して、Compute Engine API を有効にします。

gcloud services enable compute.googleapis.com

Cloud Shell

Google Cloud はノートパソコンからリモートで操作できますが、この Codelab では、Cloud Shell（Cloud 上で動作するコマンドライン環境）を使用します。

この Debian ベースの仮想マシンには、必要な開発ツールがすべて用意されています。仮想マシンは Google Cloud で稼働し、永続的なホームディレクトリが 5 GB 用意されているため、ネットワークのパフォーマンスと認証が大幅に向上しています。つまり、この Codelab に必要なのはブラウザだけです（Chromebook でも動作します）。

Cloud Console から Cloud Shell を有効にするには、[Cloud Shell をアクティブにする] をクリックします（環境のプロビジョニングと接続に若干時間を要します）。

Screen Shot 2017-06-14 at 10.13.43 PM.png

Cloud Shell に接続すると、すでに認証は完了しており、プロジェクトに各自の PROJECT_ID が設定されていることがわかります。

gcloud auth list

コマンド出力

Credentialed accounts:
 - <myaccount>@<mydomain>.com (active)

gcloud config list project

コマンド出力

[core]
project = <PROJECT_ID>

なんらかの理由でプロジェクトが設定されていない場合は、次のコマンドを実行します。

gcloud config set project <PROJECT_ID>

PROJECT_ID が見つからない場合は、設定手順で使用した ID を確認するか、Cloud Console ダッシュボードで検索します。

Cloud Shell では、デフォルトで環境変数もいくつか設定されます。これらの変数は、以降のコマンドを実行する際に有用なものです。

echo $GOOGLE_CLOUD_PROJECT

コマンド出力

<PROJECT_ID>

最後に、デフォルトのゾーンとプロジェクト構成を設定します。

gcloud config set compute/zone us-central1-f

さまざまなゾーンを選択できます。詳細については、リージョンとゾーンをご覧ください。

Cloud Storage バケットを作成する

Cloud Storage バケットを使用して、ビルド済みのコードと起動スクリプトを格納します。Cloud Shell で、次のコマンドを実行して新しい Cloud Storage バケットを作成します。

gsutil mb gs://fancy-store-$DEVSHELL_PROJECT_ID

3. ソースリポジトリのクローンを作成する

ウェブサイトのベースとして、monolith-to-microservices リポジトリに基づく既存の「Fancy Store」e コマースウェブサイトを使用します。ここでは Compute Engine へのデプロイに集中するために、リポジトリからソースコードのクローンを作成します。このラボで後ほどコードを少し更新して、Compute Engine での更新が簡単であることを確認します。

次のリンク Cloud Shell で開くを使用すると、コードリポジトリをプロジェクトに自動的に複製し、Cloud Shell と組み込みのコードエディタを開くことができます。

または、Cloud Shell 内で次のコマンドを使用して、リポジトリを手動でクローンすることもできます。

cd ~
git clone https://github.com/googlecodelabs/monolith-to-microservices.git
cd ~/monolith-to-microservices

Cloud Shell のコマンドプロンプトで、コードの初回ビルドを実行して、アプリをローカルで実行できるようにします。スクリプトの実行には数分かかることがあります。

./setup.sh

デューデリジェンスを実施し、アプリをテストします。次のコマンドを実行して、ウェブサーバーを起動します。

cd microservices
npm start

出力:

Products microservice listening on port 8082!
Frontend microservice listening on port 8080!
Orders microservice listening on port 8081!

「ウェブでプレビュー」アイコンをクリックし、[ポート 8080 でプレビュー] を選択してアプリをプレビューします。

新しいウィンドウが開き、Fancy Store のフロントエンドの動作を確認することができます。

ウェブサイトの確認後にこのウィンドウを閉じることができます。ウェブサーバープロセスを停止するには、ターミナルウィンドウで Control+C（Macintosh の場合は Command+C）を押します。

4. Compute Engine インスタンスを作成する

作業用の開発環境が整ったので、Compute Engine インスタンスをデプロイできます。次の手順では、次の操作を行います。

起動スクリプトを作成してインスタンスを構成する。
ソースコードのクローンを作成して、Cloud Storage にアップロードする。
Compute Engine インスタンスをデプロイしてバックエンドのマイクロサービスをホストする。
バックエンドのマイクロサービスインスタンスを使用するようにフロントエンドのコードを再構成する。
Compute Engine インスタンスをデプロイして、フロントエンドのマイクロサービスをホストする。
通信を許可するようにネットワークを構成する。

起動スクリプトを作成する

起動スクリプトを使用して、インスタンスが起動するたびに実行する処理をインスタンスに指示します。このようにしてインスタンスを自動的に構成します。

Cloud Shell のリボンで鉛筆アイコンをクリックし、コードエディタを開きます。

monolith-to-microservices フォルダに移動します。[File] > [New File] をクリックし、startup-script.sh という名前のファイルを作成します。

新しいファイルに次のコードを貼り付けます。貼り付けた後で一部を編集します。

#!/bin/bash

# Install logging monitor. The monitor will automatically pick up logs sent to
# syslog.
curl -s "https://storage.googleapis.com/signals-agents/logging/google-fluentd-install.sh" | bash
service google-fluentd restart &

# Install dependencies from apt
apt-get update
apt-get install -yq ca-certificates git build-essential supervisor psmisc

# Install nodejs
mkdir /opt/nodejs
curl https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.gz | tar xvzf - -C /opt/nodejs --strip-components=1
ln -s /opt/nodejs/bin/node /usr/bin/node
ln -s /opt/nodejs/bin/npm /usr/bin/npm

# Get the application source code from the Google Cloud Storage bucket.
mkdir /fancy-store
gsutil -m cp -r gs://fancy-store-[DEVSHELL_PROJECT_ID]/monolith-to-microservices/microservices/* /fancy-store/

# Install app dependencies.
cd /fancy-store/
npm install

# Create a nodeapp user. The application will run as this user.
useradd -m -d /home/nodeapp nodeapp
chown -R nodeapp:nodeapp /opt/app

# Configure supervisor to run the node app.
cat >/etc/supervisor/conf.d/node-app.conf << EOF
[program:nodeapp]
directory=/fancy-store
command=npm start
autostart=true
autorestart=true
user=nodeapp
environment=HOME="/home/nodeapp",USER="nodeapp",NODE_ENV="production"
stdout_logfile=syslog
stderr_logfile=syslog
EOF

supervisorctl reread
supervisorctl update

コードエディタで、[DEVSHELL_PROJECT_ID] というテキストを探し、次のコマンドの出力と置き換えます。

echo $DEVSHELL_PROJECT_ID

出力例:

my-gce-codelab-253520

startup-script.sh 内のコードの行は、次のようになります。

gs://fancy-store-my-gce-codelab-253520/monolith-to-microservices/microservices/* /fancy-store/

起動スクリプトは次のタスクを実行します。

syslog からログを自動的に収集する Logging エージェントのインストール
Node.js と Supervisor のインストール（アプリをデーモンとして実行）
Cloud Storage バケットからのアプリのソースコードのクローン作成と依存関係のインストール
アプリを実行する Supervisor の構成。アプリが予期せずに終了した場合や、管理者や他のプロセスにより強制終了された場合、アプリが確実に再起動されるようにします。また、Logging エージェントが収集できるように、アプリの stdout と stderr を syslog に送信します。

作成した startup-script.sh ファイルを、前に作成した Cloud Storage バケットにコピーします。

gsutil cp ~/monolith-to-microservices/startup-script.sh gs://fancy-store-$DEVSHELL_PROJECT_ID

これで、https://storage.googleapis.com/[BUCKET_NAME]/startup-script.sh から起動スクリプトにアクセスできるようになります。[BUCKET_NAME] は Cloud Storage バケットの名前に置き換えます。デフォルトでは、起動スクリプトには承認されたユーザーとサービスアカウントのみが閲覧できるもので、ウェブブラウザからはアクセスできません。Compute Engine インスタンスは、サービスアカウントを使用して自動的に起動スクリプトにアクセスできるようになります。

Cloud Storage バケットにコードをコピーする

インスタンスを起動すると、インスタンスは Cloud Storage バケットからコードを pull するため、ユーザーはコードの「.env」ファイルに構成変数を保存できます。

クローン作成したコードを Cloud Storage バケットにコピーします。

cd ~
rm -rf monolith-to-microservices/*/node_modules
gsutil -m cp -r monolith-to-microservices gs://fancy-store-$DEVSHELL_PROJECT_ID/

バックエンドインスタンスをデプロイする

デプロイする最初のインスタンスはバックエンドインスタンスです。バックエンドインスタンスには、注文と商品のマイクロサービスを配置します。

Cloud Shell で次のコマンドを実行して、以前に作成した起動スクリプトを使用するように構成され、バックエンドインスタンスとしてタグ付けされた f1-micro インスタンスを作成します。これにより、後で特定のファイアウォールルールを適用できます。

gcloud compute instances create backend \
    --machine-type=f1-micro \
    --image=debian-9-stretch-v20190905 \
    --image-project=debian-cloud \
    --tags=backend \
    --metadata=startup-script-url=https://storage.googleapis.com/fancy-store-$DEVSHELL_PROJECT_ID/startup-script.sh

バックエンドへの接続を設定する

アプリのフロントエンドをデプロイする前に、デプロイしたバックエンドを参照するように構成を更新する必要があります。

バックエンドの外部 IP アドレスを取得します。これは、次のコマンドでバックエンドインスタンスの EXTERNAL_IP タブに表示されます。

gcloud compute instances list

出力例:

NAME     ZONE           MACHINE_TYPE  PREEMPTIBLE  INTERNAL_IP  EXTERNAL_IP   STATUS
backend  us-central1-a  f1-micro                   10.128.0.2   34.68.223.88  RUNNING

Cloud Shell のコードエディタで、フォルダ monolith-to-microservices > react-app に移動します。コードエディタのメニューから [View] > [Toggle Hidden Files] を選択して、.env ファイルを表示します。

.env ファイルを編集して、バックエンドの外部 IP アドレスを参照するようにします。次の [BACKEND_ADDRESS] は、gcloud ツールの前のコマンドで確認したバックエンドインスタンスの外部 IP アドレスです。

REACT_APP_ORDERS_URL=http://[BACKEND_ADDRESS]:8081/api/orders
REACT_APP_PRODUCTS_URL=http://[BACKEND_ADDRESS]:8082/api/products

ファイルを保存します。

次のコマンドを使用して react-app を再ビルドします。再ビルドすると、フロントエンドのコードが更新されます。

cd ~/monolith-to-microservices/react-app
npm install && npm run-script build

アプリコードを Cloud Storage バケットにコピーします。

cd ~
rm -rf monolith-to-microservices/*/node_modules
gsutil -m cp -r monolith-to-microservices gs://fancy-store-$DEVSHELL_PROJECT_ID/

フロントエンドインスタンスをデプロイする

コードの構成が完了したので、フロントエンドインスタンスをデプロイできます。前回と同じような以下のコマンドを実行してフロントエンドインスタンスをデプロイします。ただし、このインスタンスにはファイアウォールで使用するために「frontend」のタグを付けます。

gcloud compute instances create frontend \
    --machine-type=f1-micro \
    --image=debian-9-stretch-v20190905 \
    --image-project=debian-cloud \
    --tags=frontend \
    --metadata=startup-script-url=https://storage.googleapis.com/fancy-store-$DEVSHELL_PROJECT_ID/startup-script.sh

ネットワークの構成

フロントエンドではポート 8080 へのアクセス、バックエンドではポート 8081 と 8082 へのアクセスを許可するように、ファイアウォールルールを作成します。次のファイアウォールコマンドでは、アプリのインスタンス作成時に割り当てたタグを使用します。

gcloud compute firewall-rules create fw-fe \
    --allow tcp:8080 \
    --target-tags=frontend

gcloud compute firewall-rules create fw-be \
    --allow tcp:8081-8082 \
    --target-tags=backend

これでウェブサイトが機能するようになりました。フロントエンドの外部 IP アドレスを特定します。アドレスは、フロントエンドインスタンスの EXTERNAL_IP を確認することで特定できます。

gcloud compute instances list

出力例:

NAME      ZONE           MACHINE_TYPE  PREEMPTIBLE  INTERNAL_IP  EXTERNAL_IP      STATUS
backend   us-central1-a  f1-micro                   10.128.0.2   104.198.235.171  RUNNING
frontend  us-central1-a  f1-micro                   10.128.0.3   34.69.141.9      RUNNING

インスタンスが起動して構成されるまでに数分かかることがあります。次のコマンドを実行して、アプリの準備状況をモニタリングします。

watch -n 5 curl http://[EXTERNAL_IP]:8080

次のような出力が表示されたら、ウェブサイトの準備ができています。コマンドプロンプトで Control+C（Macintosh の場合は Command+C）を押して、watch コマンドをキャンセルします。

新しいウェブブラウザのタブで http://[FRONTEND_ADDRESS]:8080 に移動してウェブサイトにアクセスします。[FRONTEND_ADDRESS] は、先ほど確認した外部 IP に置き換えます。

[Products]（商品）と [Orders]（注文）のページにアクセスし、動作することを確認します。

5. マネージドインスタンスグループを作成する

アプリケーションのスケーリングを可能にするために、マネージドインスタンスグループを作成します。また、フロントエンドとバックエンドのインスタンスをインスタンステンプレートとして使用します。

マネージドインスタンスグループには、単一のゾーンで単一のエンティティとして管理可能な同一のインスタンスが複数含まれます。マネージドインスタンスグループは、インスタンスの可用性を積極的に維持する（ステータスを RUNNING（実行中）の状態に保つ）ことで、アプリケーションの高可用性を維持します。自動修復、ロードバランシング、自動スケーリング、ローリングアップデートを行えるように、フロントエンドとバックエンドのインスタンスでマネージドインスタンスグループを使用します。

ソースインスタンスからインスタンステンプレートを作成する

マネージドインスタンスグループを作成するには、まず最初にグループのベースとなるインスタンステンプレートを作成する必要があります。インスタンステンプレートを使用すると、新しい仮想マシン（VM）インスタンスを作成する際に使用するマシンタイプ、ブートディスクイメージまたはコンテナイメージ、ネットワーク、その他のインスタンスプロパティを定義できます。また、マネージドインスタンスグループに含めるインスタンスや、独立したインスタンスを作成することもできます。

インスタンステンプレートを作成するには、作成済みの既存のインスタンスを使用します。

まず、両方のインスタンスを停止する必要があります。

gcloud compute instances stop frontend

gcloud compute instances stop backend

次に、ソースインスタンスからインスタンステンプレートを作成します。

gcloud compute instance-templates create fancy-fe \
    --source-instance=frontend

gcloud compute instance-templates create fancy-be \
    --source-instance=backend

インスタンステンプレートが作成されたことを確認します。

gcloud compute instance-templates list

出力例:

NAME      MACHINE_TYPE  PREEMPTIBLE  CREATION_TIMESTAMP
fancy-be  f1-micro                   2019-09-12T07:52:57.544-07:00
fancy-fe  f1-micro                   2019-09-12T07:52:48.238-07:00

マネージドインスタンスグループを作成する

フロントエンド用とバックエンド用の 2 つのマネージドインスタンスグループを作成します。これらのマネージドインスタンスグループでは、前に作成したインスタンステンプレートを使用して、各グループ内で 2 つのインスタンスが起動するように構成します。インスタンスには、指定した「base-instance-name」の後にランダムな文字が複数付いた名前が自動で付けられます。

gcloud compute instance-groups managed create fancy-fe-mig \
    --base-instance-name fancy-fe \
    --size 2 \
    --template fancy-fe

gcloud compute instance-groups managed create fancy-be-mig \
    --base-instance-name fancy-be \
    --size 2 \
    --template fancy-be

このアプリケーションでは、フロントエンドマイクロサービスをポート 8080 で実行します。また、バックエンドマイクロサービスの注文をポート 8081 で実行し、商品をポート 8082 で実行します。これらは標準のポートではないため、ポートを識別するために名前付きポートを指定します。名前付きポートは Key-Value ペアのメタデータで、サービス名とサービスを実行するポートを表します。名前付きポートをインスタンスグループに割り当てることで、そのインスタンスグループに含まれるすべてのインスタンスでサービスを利用することができます。この情報は、後で構成するロードバランサで使用されます。

gcloud compute instance-groups set-named-ports fancy-fe-mig \ 
    --named-ports frontend:8080

gcloud compute instance-groups set-named-ports fancy-be-mig \
    --named-ports orders:8081,products:8082

自動修復を構成する

アプリの可用性を高め、そのレスポンスを検証するために、マネージドインスタンスグループ用の自動修復ポリシーを構成します。

自動修復ポリシーは、アプリベースのヘルスチェックを使用して、アプリが期待どおりに応答していることを確認します。デフォルトの動作ではインスタンスのステータスが RUNNING（実行中）かどうかを検証するだけですが、アプリケーションのレスポンスを確認することでより正確に状態を知ることができます。

注: ロードバランサと自動修復には、別々のヘルスチェックを使用します。ロードバランサのヘルスチェックとは、インスタンスがユーザートラフィックを受信しているかどうかの確認です。そのため、より積極的な実施が可能で、またそのように実施すべきです。必要に応じてトラフィックをリダイレクトできるように、応答のないインスタンスをすばやく把握します。対照的に、自動修復のヘルスチェックでは、障害が発生しているインスタンスが Compute Engine によってプロアクティブに置き換えられるので、このヘルスチェックはロードバランサのヘルスチェックより慎重に実施しなければなりません。

フロントエンドとバックエンドの両方にヘルスチェックを作成し、3 回連続して Unhealthy（異常）のステータスが返った場合は修復を行うようにします。

gcloud compute health-checks create http fancy-fe-hc \
    --port 8080 \
    --check-interval 30s \
    --healthy-threshold 1 \
    --timeout 10s \
    --unhealthy-threshold 3

gcloud compute health-checks create http fancy-be-hc \
    --port 8081 \
    --request-path=/api/orders \
    --check-interval 30s \
    --healthy-threshold 1 \
    --timeout 10s \
    --unhealthy-threshold 3

ヘルスチェックのプローブがポート 8080 と 8081 のマイクロサービスに接続できるようにファイアウォールルールを作成します。

gcloud compute firewall-rules create allow-health-check \
    --allow tcp:8080-8081 \
    --source-ranges 130.211.0.0/22,35.191.0.0/16 \
    --network default

ヘルスチェックを各サービスに適用します。

gcloud compute instance-groups managed update fancy-fe-mig \
    --health-check fancy-fe-hc \
    --initial-delay 300

gcloud compute instance-groups managed update fancy-be-mig \
    --health-check fancy-be-hc \
    --initial-delay 300

そのため、自動修復でグループ内のインスタンスのモニタリングが開始されるまで、しばらく待ちます。後で、障害をシミュレートして自動修復をテストします。

6. ロードバランサを作成する

マネージドインスタンスグループを補完するために、HTTP(S) ロードバランシングを使用してフロントエンドとバックエンドのマイクロサービスにトラフィックを配信し、マッピングを使用してパスルールに基づいて適切なバックエンドサービスにトラフィックを送信します。これにより、負荷分散された単一の IP アドレスがすべてのサービスに対して公開されます。

Google Cloud で使用可能なロードバランシングオプションの詳細については、Cloud Load Balancing の概要をご覧ください。

HTTP(S) ロードバランシングを作成する

Google Cloud にはさまざまな種類のロードバランシングがありますが、このトラフィックには HTTP(S) ロードバランシングを使用します。HTTP(S) ロードバランシングは次のように構成されています。

受信したリクエストを転送ルールによってターゲットの HTTP プロキシに転送します。
ターゲット HTTP プロキシは各リクエストを URL マップと照合し、各リクエストに適したバックエンドサービスを判断します。
バックエンドサービスは、バックエンドの処理能力、ゾーン、インスタンスの健全性に基づき、適切なバックエンドに各リクエストを転送します。HTTP ヘルスチェックを使用して各バックエンドインスタンスの健全性を検証します。バックエンドサービスが HTTPS または HTTP/2 のヘルスチェックを使用するように構成されている場合、リクエストは途中で暗号化されてからバックエンドインスタンスに送信されます。
ロードバランサとインスタンス間のセッションでは、HTTP、HTTPS、HTTP/2 プロトコルを使用できます。HTTPS または HTTP/2 を使用する場合、バックエンドサービスの各インスタンスには SSL 証明書が必要です。

各サービスのトラフィックに対応可能なインスタンスを判断するために使用するヘルスチェックを作成します。

gcloud compute http-health-checks create fancy-fe-frontend-hc \
  --request-path / \
  --port 8080

gcloud compute http-health-checks create fancy-be-orders-hc \
  --request-path /api/orders \
  --port 8081

gcloud compute http-health-checks create fancy-be-products-hc \
  --request-path /api/products \
  --port 8082

ロードバランスされたトラフィックの送信先となるバックエンドサービスを作成します。バックエンドサービスでは、作成したヘルスチェックと名前付きポートを使用します。

gcloud compute backend-services create fancy-fe-frontend \
  --http-health-checks fancy-fe-frontend-hc \
  --port-name frontend \
  --global

gcloud compute backend-services create fancy-be-orders \
  --http-health-checks fancy-be-orders-hc \
  --port-name orders \
  --global

gcloud compute backend-services create fancy-be-products \
  --http-health-checks fancy-be-products-hc \
  --port-name products \
  --global

バックエンドサービスを追加します。

gcloud compute backend-services add-backend fancy-fe-frontend \
  --instance-group fancy-fe-mig \
  --instance-group-zone us-central1-f \
  --global

gcloud compute backend-services add-backend fancy-be-orders \
  --instance-group fancy-be-mig \
  --instance-group-zone us-central1-f \
  --global

gcloud compute backend-services add-backend fancy-be-products \
  --instance-group fancy-be-mig \
  --instance-group-zone us-central1-f \
  --global

URL マップを作成します。URL マップは、どの URL がどのバックエンドサービスにつながるのかを定義します。

gcloud compute url-maps create fancy-map \
  --default-service fancy-fe-frontend

パスマッチャーを作成して、/api/orders と /api/products のパスをそれぞれのサービスに転送できるようにします。

gcloud compute url-maps add-path-matcher fancy-map \
   --default-service fancy-fe-frontend \
   --path-matcher-name orders \
   --path-rules "/api/orders=fancy-be-orders,/api/products=fancy-be-products"

作成した URL マップに関連付けるプロキシを作成します。

gcloud compute target-http-proxies create fancy-proxy \
  --url-map fancy-map

パブリック IP アドレスとポートをプロキシに関連付けるグローバル転送ルールを作成します。

gcloud compute forwarding-rules create fancy-http-rule \
  --global \
  --target-http-proxy fancy-proxy \
  --ports 80

構成の更新

新しい静的 IP アドレスを取得したので、フロントエンドのコードを更新します。コードではこれまで、バックエンドインスタンスを参照するエフェメラルアドレスを指定していましたが、この代わりに新しい IP アドレスを指定します。

Cloud Shell で、構成が含まれている .env ファイルの保存先である react-app フォルダに移動します。

cd ~/monolith-to-microservices/react-app/

ロードバランサの IP アドレスを確認します。

gcloud compute forwarding-rules list --global

出力例:

NAME                    REGION  IP_ADDRESS     IP_PROTOCOL  TARGET
fancy-http-rule          34.102.237.51  TCP          fancy-proxy

任意のテキストエディタ（GNU nano など）で .env ファイルを編集し、ロードバランサのパブリック IP アドレスを参照するようにします。[LB_IP] は、バックエンドインスタンスの外部 IP アドレスを表します。

REACT_APP_ORDERS_URL=http://[LB_IP]/api/orders
REACT_APP_PRODUCTS_URL=http://[LB_IP]/api/products

react-app を再ビルドします。再ビルドすると、フロントエンドのコードが更新されます。

cd ~/monolith-to-microservices/react-app
npm install && npm run-script build

アプリケーションコードを GCS バケットにコピーします。

cd ~
rm -rf monolith-to-microservices/*/node_modules
gsutil -m cp -r monolith-to-microservices gs://fancy-store-$DEVSHELL_PROJECT_ID/

フロントエンドインスタンスを更新する

マネージドインスタンスグループのフロントエンドインスタンスが新しいコードを pull するようにします。インスタンスは起動時にコードを pull するので、ローリング再起動コマンドを発行します。

gcloud compute instance-groups managed rolling-action restart fancy-fe-mig \
    --max-unavailable 100%

ウェブサイトをテストする

rolling-action restart コマンドを発行してから、インスタンスが処理されるまで約 30 秒間待ちます。その後、インスタンスがリストに表示されるまで、マネージドインスタンスグループのステータスを確認します。

watch -n 5 gcloud compute instance-groups list-instances fancy-fe-mig

リストに項目が表示されたら、Control+C（Macintosh の場合は Command+C）を押して watch コマンドを終了します。

サービスが正常と表示されていることを確認します。

watch -n 5 gcloud compute backend-services get-health fancy-fe-frontend --global

出力例:

---
backend: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instanceGroups/fancy-fe-mig
status:
  healthStatus:
  - healthState: HEALTHY
    instance: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instances/fancy-fe-x151
    ipAddress: 10.128.0.7
    port: 8080
  - healthState: HEALTHY
    instance: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instances/fancy-fe-cgrt
    ipAddress: 10.128.0.11
    port: 8080
  kind: compute#backendServiceGroupHealth

リストにインスタンスが表示されたら、Control+C（Macintosh の場合は Command+C）を押して watch コマンドを終了します。

アプリケーションには http://[LB_IP] でアクセスできます。[LB_IP] はロードバランサに指定した IP アドレスで、次のコマンドで確認できます。

gcloud compute forwarding-rules list --global

7. Compute Engine のスケーリング

ここまで、2 つのマネージドインスタンスグループを作成し、それぞれに 2 つのインスタンスを追加しました。この構成は負荷に関係のない静的な構成ですが、十分に機能します。次に、使用率に応じた自動スケーリングポリシーを作成し、各マネージドインスタンスグループを自動的にスケーリングします。

使用率に応じて自動的にサイズを変更する

自動スケーリングポリシーを作成するには、Cloud Shell で次のコマンドを実行します。このオートスケーラーは、ロードバランサの使用率が 60% を超えるとインスタンスを自動的に追加し、60% を下回るとインスタンスを削除します。

gcloud compute instance-groups managed set-autoscaling \
  fancy-fe-mig \
  --max-num-replicas 5 \
  --target-load-balancing-utilization 0.60

gcloud compute instance-groups managed set-autoscaling \
  fancy-be-mig \
  --max-num-replicas 5 \
  --target-load-balancing-utilization 0.60

コンテンツ配信ネットワークを有効にする

スケーリングに役立つもう一つの機能として、コンテンツ配信ネットワークサービスである Cloud CDN を有効にして、フロントエンドサービスにキャッシュを提供できます。これを行うには、フロントエンドサービスで次のコマンドを実行します。

gcloud compute backend-services update fancy-fe-frontend \
    --enable-cdn --global

ユーザーがロードバランサからコンテンツをリクエストすると、リクエストは Google フロントエンドに届きます。Google フロントエンドは、ユーザーのリクエストに対するレスポンスを返すために、最初に Cloud CDN キャッシュ内を探します。フロントエンドがキャッシュに保存されたレスポンスを見つけると、キャッシュに保存されたレスポンスをユーザーに送信します。これを「キャッシュヒット」と呼びます。

リクエストに対するキャッシュに保存されたレスポンスが見つからなかった場合、フロントエンドはリクエストをバックエンドに直接送信します。そのリクエストに対するレスポンスをキャッシュに保存できる場合、フロントエンドはそのレスポンスを Cloud CDN キャッシュに保存して、以降のリクエストで使用できるようにします。

8. ウェブサイトを更新する

インスタンステンプレートを更新する

既存のインスタンステンプレートは編集できません。ただし、インスタンスはステートレスであり、すべての構成は起動スクリプトで行われるため、テンプレート設定のコアイメージ自体を変更する場合にのみ、インスタンステンプレートを変更する必要があります。ここでは、サイズの大きいマシンタイプを使用するように簡単な変更を行い、それを push します。

インスタンステンプレートのベースとして機能するフロントエンドインスタンスを更新します。更新中に、インスタンステンプレートイメージの更新されたバージョンにファイルを適用します。その後、インスタンステンプレートの更新、新しいテンプレートの展開を行い、最後にマネージドインスタンスグループのインスタンスにファイルが存在することを確認します。

インスタンステンプレートのマシンタイプを f1-micro 標準マシンタイプから vCPU 4 個、3840 MiB RAM を搭載したカスタムマシンタイプに切り替えます。

Cloud Shell で次のコマンドを実行して、フロントエンド インスタンスのマシンタイプを変更します。

gcloud compute instances set-machine-type frontend --machine-type custom-4-3840

新しいインスタンステンプレートを作成します。

gcloud compute instance-templates create fancy-fe-new \
    --source-instance=frontend \
    --source-instance-zone=us-central1-a

更新したインスタンステンプレートをマネージドインスタンスグループにロールアウトします。

gcloud compute instance-groups managed rolling-action start-update fancy-fe-mig \
    --version template=fancy-fe-new

更新のステータスをモニタリングします。

watch -n 2 gcloud compute instance-groups managed list-instances fancy-fe-mig

ステータスが RUNNING で、ACTION が None に設定され、INSTANCE_TEMPLATE が新しいテンプレート名（fancy-fe-new）に設定されているインスタンスが複数ある場合は、リストにあるマシン名の一つをコピーして次のコマンドで使用します。

Control+S（Macintosh の場合は Command+S）と入力して、確認プロセスを終了します。

次のコマンドを実行して、仮想マシンが新しいマシンタイプ（custom-4-3840）を使用していることを確認します。[VM_NAME] は新しく作成されたインスタンス名に置き換えます。

gcloud compute instances describe [VM_NAME] | grep machineType

出力例:

machineType: https://www.googleapis.com/compute/v1/projects/project-name/zones/us-central1-f/machineTypes/custom-4-3840

ウェブサイトに変更を加える

マーケティングチームから、サイトのホームページを変更するよう依頼されました。マーケティングチームは、会社の概要と販売している製品のより詳しい情報を追加する必要があると考えています。このセクションでは、マーケティングチームからの依頼に応じたテキストをホームページに追加します。開発者の 1 人がすでに index.js.new というファイルで変更内容を作成したようです。このファイルを index.js にコピーするだけで、変更内容を反映できます。以下の手順に沿って適切な変更を行います。

次のコマンドを実行して、更新されたファイルを正しい名前のファイルにコピーし、その内容を出力して変更を確認します。

cd ~/monolith-to-microservices/react-app/src/pages/Home
mv index.js.new index.js
cat ~/monolith-to-microservices/react-app/src/pages/Home/index.js

変更後のコードは次のようになっています。

/*
Copyright 2019 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    width: "800px",
    margin: "0 auto",
    padding: theme.spacing(3, 2)
  }
}));
export default function Home() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Typography variant="h5">
          Fancy Fashion &amp; Style Online
        </Typography>
        <br />
        <Typography variant="body1">
          Tired of mainstream fashion ideas, popular trends and societal norms?
          This line of lifestyle products will help you catch up with the Fancy trend and express your personal style.
          Start shopping Fancy items now!
        </Typography>
      </Paper>
    </div>
  );
}

これで React コンポーネントは更新されましたが、React アプリをビルドして静的ファイルを生成する必要があります。次のコマンドを実行して React アプリをビルドし、monolith の公開ディレクトリにコピーします。

cd ~/monolith-to-microservices/react-app
npm install && npm run-script build

その後、コードを Cloud Storage バケットに再度 push します。

cd ~
rm -rf monolith-to-microservices/*/node_modules
gsutil -m cp -r monolith-to-microservices gs://fancy-store-$DEVSHELL_PROJECT_ID/

ローリングアップデートで変更を push する

すべてのインスタンスを強制的に再起動して、更新を pull できます。

gcloud compute instance-groups managed rolling-action restart fancy-fe-mig \
    --max-unavailable=100%

rolling-action restart コマンドを発行してから、インスタンスが処理されるまで約 30 秒間待ちます。その後、インスタンスがリストに表示されるまで、マネージドインスタンスグループのステータスを確認します。

watch -n 5 gcloud compute instance-groups list-instances fancy-fe-mig

リストにインスタンスが表示されたら、Control+S（Macintosh の場合は Command+S）を押して watch コマンドを終了します。

次のコマンドを実行して、サービスのステータスが healthy（正常）であることを確認します。

watch -n 5 gcloud compute backend-services get-health fancy-fe-frontend --global

出力例:

---
backend: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instanceGroups/fancy-fe-mig
status:
  healthStatus:
  - healthState: HEALTHY
    instance: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instances/fancy-fe-x151
    ipAddress: 10.128.0.7
    port: 8080
  - healthState: HEALTHY
    instance: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instances/fancy-fe-cgrt
    ipAddress: 10.128.0.11
    port: 8080
  kind: compute#backendServiceGroupHealth

リストに項目が表示されたら、Control+S（Macintosh の場合は Command+S）を押して watch コマンドを終了します。

コンテンツ配信ネットワーク内のキャッシュに保存されたコンテンツを無効にして、新しいコンテンツが表示されるようにするには、次のコマンドを実行します。

gcloud compute url-maps invalidate-cdn-cache fancy-map \
    --path "/*"

ウェブサイトには http://[LB_IP] でアクセスできます。[LB_IP] はロードバランサに指定した IP アドレスで、次のコマンドで確認できます。

gcloud compute forwarding-rules list --global

更新された新しいウェブサイトが表示されます。

障害をシミュレーションする

ヘルスチェックが機能することを確認するために、インスタンスにログインしてサービスを停止します。インスタンス名を確認するには、次のコマンドを実行します。

gcloud compute instance-groups list-instances fancy-fe-mig

そこから、次のコマンドを実行してインスタンスに SSH でアクセスします。INSTANCE_NAME はリストから取得したインスタンス名に置き換えます。

gcloud compute ssh [INSTANCE_NAME]

インスタンスで supervisorctl を使用してアプリを停止します。

sudo supervisorctl stop nodeapp; sudo killall node

インスタンスを終了します。

exit

修復オペレーションをモニタリングします。

watch -n 5 gcloud compute operations list \
--filter='operationType~compute.instances.repair.*'

出力例:

NAME                                                  TYPE                                       TARGET                                 HTTP_STATUS  STATUS  TIMESTAMP
repair-1568314034627-5925f90ee238d-fe645bf0-7becce15  compute.instances.repair.recreateInstance  us-central1-a/instances/fancy-fe-1vqq  200          DONE    2019-09-12T11:47:14.627-07:00

修復が確認されたら、Control+C（Macintosh の場合は Command+S）を押して watch コマンドを終了します。この時点で、マネージドインスタンスグループがインスタンスを再作成して修復します。

9. クリーンアップ

準備ができたら、実行したすべてのアクティビティをクリーンアップする最も簡単な方法は、プロジェクトを削除することです。プロジェクトを削除すると、Codelab で作成されたロードバランサ、インスタンス、テンプレートなどが削除され、予期しない定期的な料金が発生しないようにします。Cloud Shell で次のコマンドを実行します。PROJECT_ID はプロジェクト名だけでなく、完全なプロジェクト ID です。

gcloud projects delete [PROJECT_ID]

プロンプトが表示されたら「Y」と入力して、削除を確定します。

10. 完了

このデモでは、Compute Engine でウェブサイトをデプロイ、スケーリング、更新しました。また、Compute Engine でのマネージドインスタンスグループ、ロードバランシング、ヘルスチェックの操作についても確認しました。

Compute Engine を使用して Google Cloud でウェブアプリをホストしてスケーリングする

1. はじめに

学習内容

前提条件

2. 環境のセットアップ

セルフペース型の環境設定

Compute Engine API を有効にする

Cloud Shell

コマンド出力

コマンド出力

コマンド出力

Cloud Storage バケットを作成する

3. ソース リポジトリのクローンを作成する

4. Compute Engine インスタンスを作成する

起動スクリプトを作成する

Cloud Storage バケットにコードをコピーする

バックエンド インスタンスをデプロイする

バックエンドへの接続を設定する

フロントエンド インスタンスをデプロイする

ネットワークの構成

5. マネージド インスタンス グループを作成する

ソース インスタンスからインスタンス テンプレートを作成する

マネージド インスタンス グループを作成する

自動修復を構成する

6. ロードバランサを作成する

HTTP(S) ロード バランシングを作成する

構成の更新

フロントエンド インスタンスを更新する

ウェブサイトをテストする

7. Compute Engine のスケーリング

使用率に応じて自動的にサイズを変更する

コンテンツ配信ネットワークを有効にする

8. ウェブサイトを更新する

インスタンス テンプレートを更新する

ウェブサイトに変更を加える

ローリング アップデートで変更を push する

障害をシミュレーションする

9. クリーンアップ

10. 完了

3. ソースリポジトリのクローンを作成する

バックエンドインスタンスをデプロイする

フロントエンドインスタンスをデプロイする

5. マネージドインスタンスグループを作成する

ソースインスタンスからインスタンステンプレートを作成する

マネージドインスタンスグループを作成する

HTTP(S) ロードバランシングを作成する

フロントエンドインスタンスを更新する

インスタンステンプレートを更新する

ローリングアップデートで変更を push する