arrow_back

Google Cloud でのウェブサイトの構築: チャレンジラボ

ログイン 参加
知識をテストして、コミュニティで共有しましょう

Google Cloud でのウェブサイトの構築: チャレンジラボ

ラボ 1時間 30分 universal_currency_alt クレジット: 5 show_chart 中級
info このラボでは、学習をサポートする AI ツールが組み込まれている場合があります。
知識をテストして、コミュニティで共有しましょう

GSP319

はじめに

チャレンジラボでは、シナリオと一連のタスクが提供されます。手順ガイドに沿って進める形式ではなく、コース内のラボで習得したスキルを駆使して、ご自身でタスクを完了していただきます。タスクが適切に完了したかどうかは、このページに表示される自動スコアリング システムで確認できます。

チャレンジラボは、Google Cloud の新しいコンセプトについて学習するためのものではありません。デフォルト値を変更する、エラー メッセージを読み調査を行ってミスを修正するなど、習得したスキルを応用する能力が求められます。

100% のスコアを達成するには、制限時間内に全タスクを完了する必要があります。

このラボは、「Build a Website on Google Cloud」クエストに登録している受講者を対象としています。準備が整ったらチャレンジを開始しましょう。

設定

[ラボを開始] ボタンをクリックする前に

こちらの説明をお読みください。ラボには時間制限があり、一時停止することはできません。タイマーは、Google Cloud のリソースを利用できる時間を示しており、[ラボを開始] をクリックするとスタートします。

このハンズオンラボでは、シミュレーションやデモ環境ではなく実際のクラウド環境を使って、ラボのアクティビティを行います。そのため、ラボの受講中に Google Cloud にログインおよびアクセスするための、新しい一時的な認証情報が提供されます。

このラボを完了するためには、下記が必要です。

  • 標準的なインターネット ブラウザ(Chrome を推奨)
注: このラボの実行には、シークレット モード(推奨)またはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウント間の競合を防ぎ、個人アカウントに追加料金が発生しないようにすることができます。
  • ラボを完了するための時間(開始後は一時停止できません)
注: このラボでは、受講者アカウントのみを使用してください。別の Google Cloud アカウントを使用すると、そのアカウントに料金が発生する可能性があります。

チャレンジ シナリオ

あなたは、FancyStore, Inc. で新たな仕事を任されることになりました。

新しい業務内容は、既存のモノリシック e コマース ウェブサイトを、論理的に分離された一連のマイクロサービスに切り分けることです。既存のモノリスコードは GitHub リポジトリに格納されています。このアプリをコンテナ化してリファクタリングすることが求められています。

これらのタスクを行うためのスキルや知識があるという前提であるため、手順ガイドは提供されません。

あなたは、チームリーダーに任命されました。前任チームはモノリス関連の業務によるストレスから離職し、現在ではまったく無関係な分野にいるそうです。あなたの業務は、ソースコードを引き出して、そのソースコードを使ってコンテナを構築し(前任者の 1 人が Dockerfile を残してくれました)、これを GKE に push することです。

まずはモノリスを構築、デプロイ、テストする必要があります。ソースコードが有効であることを確認しておいてください。次に、構成サービスを独自のマイクロサービス デプロイに分類する必要があります。

作業時には、以下の FancyStore, Inc. の規則に従う必要があります。

  • にクラスタを作成する。

  • 通常は team-resource の形式で命名する(たとえば、インスタンスには fancystore-orderservice1 のような名前を指定する)。

  • 費用対効果の高いリソースサイズを割り当てる。プロジェクトはモニタリングされており、リソースが過剰に使用された場合、そのリソースを含むプロジェクトは終了します。

  • 特に指示がない限り、マシンタイプは e2-medium を使用する。

チャレンジ

席に着いてノートパソコンを開くと、これらの作業を完了するための、次のようなリクエストが届いていました。それでは始めましょう。

タスク 1. モノリスコードをダウンロードしてコンテナを構築する

  1. 新しいプロジェクトにログインして、Cloud Shell を開きます。

  2. まずは、チームの git リポジトリのクローンを作成する必要があります。プロジェクトのルート ディレクトリに setup.sh というスクリプトがあります。このスクリプトを実行して、モノリス コンテナを構築します。

  3. setup.sh スクリプトを実行した後、Cloud Shell で最新バージョンの NodeJS が実行されていることを確認します。

nvm install --lts

構築して push できるプロジェクトがいくつか表示されます。

  1. monolith ディレクトリに格納されている)モノリスビルドを Google Container Registry(GCR)に push します。~/monolith-to-microservices/monolith フォルダに格納されている Dockerfile を使用して、アプリケーション コンテナを構築できます。

  2. アプリケーション コンテナを構築するには(同じモノリス フォルダにある)Cloud Build を実行して、これを GCR に push します。

  3. 次のようにアーティファクトに名前を付けます。

  • GCR Repo: gcr.io/${GOOGLE_CLOUD_PROJECT}
  • Image name:
  • Image version: 1.0.0

ヒント:

バージョンが「1.0.0」で名前が「」のビルドを送信してください。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 モノリスコードをダウンロードしてコンテナを構築する

タスク 2. Kubernetes クラスタを作成してアプリケーションをデプロイする

画像を作成して Container Registry に格納したので、次はクラスタを作成してデプロイします。

すべてのリソースを ゾーンにデプロイするように指示を受けているので、まずはそのための GKE クラスタを作成する必要があります。3 ノードクラスタから始めます。

  1. 次のようにクラスタを作成します。
  • Cluster name:

  • Region:

  • Node count: 3

ヒント:

クラスタの名前が「」で、このクラスタが で実行状態にあることを確認します。

イメージを作成し、作成したクラスタが稼働していることを確認できたので、次はアプリケーションをデプロイします。

作成したイメージをクラスタにデプロイする必要があります。これによってアプリケーションが稼働しますが、一般公開するまでこのアプリケーションにはアクセスできません。アプリケーションはポート 8080 で稼働していますが、よりユーザー フレンドリーなポート 80 に公開する必要があります。

  1. 以下のようにデプロイを作成して公開します。
  • Cluster name:
  • Container name:
  • Container version: 1.0.0
  • Application port: 8080
  • Externally accessible port: 80
注: このラボでは、便宜上サービスの公開を簡素化していますが、通常は、API ゲートウェイを使用してパブリック エンドポイントを保護します。ベスト プラクティスについて詳しくは、マイクロサービスのベスト プラクティス ガイドをご確認ください。
  1. デプロイの公開作業で割り当てる IP アドレスをメモに残しておきます。この時点で、ご利用のブラウザからこの IP アドレスにアクセスできるようになっているはずです。

次の結果が表示されます。

ヒント:

デプロイの名前が「」であること、サービスをポート 80 で公開していること、これをポート 8080 にマッピングしていることを確認してください。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 Kubernetes クラスタを作成してアプリケーションをデプロイする

Fancy Store モノリシック アプリケーションを構築してデプロイできるようになったので、次はこれをマイクロサービスに分割していきましょう。

モノリスをマイクロサービスに移行する

既存のモノリス ウェブサイトを GKE で稼働させることができたので、各サービスのマイクロサービスへの分割を開始する準備が整いました。通常、プランニング業務では小さなまとまりに分割するサービスの選定を行います。ビジネス ドメインなどのアプリケーションの特定の部分が対象となります。

このチャレンジの目的を達成するために、ここでは少し話を先に進めて、モノリスを「注文」、「プロダクト」、「フロントエンド」という一連のマイクロサービスに無事に分割できたと仮定します。コードが完成したので、次はサービスをデプロイする必要があります。

タスク 3. 新しいマイクロサービスを作成する

独自のコンテナに分割する必要があるサービスが 3 つあります。すべてのサービスをコンテナに移動しているため、各サービスについて次の情報を追跡する必要があります。

  • サービスのルートフォルダ(コンテナを構築する場所)
  • コンテナをアップロードするリポジトリ
  • コンテナ アーティファクトの名前とバージョン

コンテナ化されたバージョンのマイクロサービスを作成する

コンテナ化する必要のあるサービスは以下のとおりです。

  1. 以下のソースルートに移動して、作成したアーティファクトを、指定されたメタデータと一緒に Google Container Registry にアップロードします。

注文マイクロサービス

Service root folder: ~/monolith-to-microservices/microservices/src/orders

GCR Repo: gcr.io/${GOOGLE_CLOUD_PROJECT}

Image name:

Image version: 1.0.0

プロダクト マイクロサービス

Service root folder: ~/monolith-to-microservices/microservices/src/products

GCR Repo: gcr.io/${GOOGLE_CLOUD_PROJECT}

Image name:

Image version: 1.0.0

  1. これらのマイクロサービスがコンテナ化され、各サービスのイメージが GCR にアップロードされたら、これらのサービスをデプロイして公開する必要があります。

ヒント: バージョンが「1.0.0」で名前が「」のビルドと、バージョンが「1.0.0」で名前が「」のビルドを送信してください。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 コンテナ化されたバージョンの注文とプロダクトのマイクロサービスを作成する

タスク 4. 新しいマイクロサービスをデプロイする

」モノリスに対して行った手順に沿って、これらの新しいコンテナをデプロイします。これらのサービスが複数のポートでリッスンするため、以下のテーブルのポート マッピングをメモに残しておくようにしてください。

  1. 以下のようにデプロイを作成して公開します。

注文マイクロサービス

Cluster name:

Container name:

Container version: 1.0.0

Application port: 8081

Externally accessible port: 80

プロダクト マイクロサービス

Cluster name:

Container name:

Container version: 1.0.0

Application port: 8082

Externally accessible port: 80

注: 注文とプロダクトの両方のサービスを公開したら、それぞれの IP アドレスをメモに残しておいてください。この IP アドレスは後で必要になります。

  1. ブラウザで以下の URL にアクセスして、デプロイが正常に行われたことと、サービスが公開されたことを確認できます。

http://ORDERS_EXTERNAL_IP/api/orders

http://PRODUCTS_EXTERNAL_IP/api/products

デプロイが正常に行われた場合は、各サービスで JSON 文字列が返されていることを確認できます。

ヒント: デプロイの名前が「」と「」であることと、これらのサービスがポート 80 で公開されていることを確認してください。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 新しいマイクロサービスをデプロイする

タスク 5. フロントエンド マイクロサービスを構成、デプロイする

注文とプロダクトの両方のマイクロサービスを抽出したので、次はこれらをつなげるようにフロントエンド サービスを構成して、デプロイする必要があります。

フロントエンドを再構成する

  1. nano エディタを使用して、ローカル URL を新しいプロダクト マイクロサービスの IP アドレスに置き換えます。
cd ~/monolith-to-microservices/react-app nano .env

エディタを開くと、ファイルは以下のようになっています。

REACT_APP_ORDERS_URL=http://localhost:8081/api/orders REACT_APP_PRODUCTS_URL=http://localhost:8082/api/products
  1. REACT_APP_PRODUCTS_URL を新しい形式に置き換え、その際に IP アドレスを注文およびプロダクトのマイクロサービスのものにします。つまり、下記のようになります。
REACT_APP_ORDERS_URL=http://<ORDERS_IP_ADDRESS>/api/orders REACT_APP_PRODUCTS_URL=http://<PRODUCTS_IP_ADDRESS>/api/products
  1. Ctrl+O キー、Enter キーを押して nano エディタでファイルを保存し、Ctrl+X キーを押してエディタを閉じます。

  2. フロントエンド アプリをコンテナ化する前に再構築します。

npm run build

タスク 6. コンテナ化されたバージョンのフロントエンド マイクロサービスを作成する

注文およびプロダクトのマイクロサービスをコンテナ化してデプロイし、これらをつなげるようにフロントエンドを構成しました。最終ステップでは、フロントエンドをコンテナ化してデプロイします。

Cloud Build を使用してフロントエンド サービスのコンテンツをパッケージ化し、これを Google Container Registry に push します。

  • Service root folder: ~/monolith-to-microservices/microservices/src/frontend
  • GCR Repo: gcr.io/${GOOGLE_CLOUD_PROJECT}
  • Image name:
  • Image version: 1.0.0

この処理には数分かかることがありますので、少々お待ちください。

ヒント: バージョンが「1.0.0」で名前が「」のビルドを送信してください。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 コンテナ化されたバージョンのフロントエンド マイクロサービスを作成する

タスク 7. フロントエンド マイクロサービスをデプロイする

「注文」と「プロダクト」のマイクロサービスに対して行った手順と同様に、このコンテナをデプロイします。

  1. 以下のようにデプロイを作成して公開します。
  • Cluster name:
  • Container name:
  • Container version: 1.0.0
  • Application port: 8080
  • Externally accessible port: 80
  1. ブラウザでフロントエンド サービスの IP アドレスにアクセスして、デプロイが正常に行われたことと、マイクロサービスが正しく公開されたことを確認できます。

Fancy Store のホームページには、新しいマイクロサービスを利用したプロダクトと注文のページへのリンクが表示されています。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 フロントエンド マイクロサービスをデプロイする

お疲れさまでした

次のスキルバッジを獲得する

このセルフペース ラボは、「Build a Website on Google Cloud」スキルバッジ クエストの一部です。完了すると成果が認められて上のようなバッジが贈られます。獲得したバッジを履歴書やソーシャル プラットフォームに記載し、#GoogleCloudBadge を使用して成果を公表しましょう。

このスキルバッジは、Google Cloud の「インフラストラクチャのモダナイゼーション」ポートフォリオの一部です。20 件を超える他のスキルバッジ クエストをカタログで検索して登録し、学習を続けてください。

Google Cloud トレーニングと認定資格

Google Cloud トレーニングと認定資格を通して、Google Cloud 技術を最大限に活用できるようになります。必要な技術スキルとベスト プラクティスについて取り扱うクラスでは、学習を継続的に進めることができます。トレーニングは基礎レベルから上級レベルまであり、オンデマンド、ライブ、バーチャル参加など、多忙なスケジュールにも対応できるオプションが用意されています。認定資格を取得することで、Google Cloud テクノロジーに関するスキルと知識を証明できます。

マニュアルの最終更新日: 2023 年 12 月 5 日

ラボの最終テスト日: 2023 年 12 月 5 日

Copyright 2025 Google LLC. All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。

Before you begin

  1. Labs create a Google Cloud project and resources for a fixed time
  2. Labs have a time limit and no pause feature. If you end the lab, you'll have to restart from the beginning.
  3. On the top left of your screen, click Start lab to begin

このコンテンツは現在ご利用いただけません

利用可能になりましたら、メールでお知らせいたします

ありがとうございます。

利用可能になりましたら、メールでご連絡いたします

One lab at a time

Confirm to end all existing labs and start this one

Use private browsing to run the lab

Use an Incognito or private browser window to run this lab. This prevents any conflicts between your personal account and the Student account, which may cause extra charges incurred to your personal account.