GSP747

概要

このラボでは、静的ウェブサイト作成ツールである Hugo で構築されたウェブサイトをデプロイするためのパイプラインを作成します。ウェブサイトのコンテンツを GitHub リポジトリに保存し、Firebase を使用してウェブサイトをデプロイします。次に、Cloud Build を使用してパイプラインを作成し、リポジトリに commit された新しいコンテンツが自動的にデプロイされるようにします。

目標

このラボでは、次のタスクを行います。

• 静的ウェブサイトの概要を読む。
• Hugo を使用してウェブサイトを設定する。
• ウェブサイトのコンテンツを GitHub リポジトリに保存する。
• Firebase を使用してウェブサイトをデプロイする
• Cloud Build を使用してビルド パイプラインを作成し、デプロイを自動化する

前提条件

このラボを完了するには、個人の GitHub アカウントが必要です。必要に応じて、GitHub.com に登録します。

使用するサービスを実際に体験しておくと、より効果的に学ぶことができます。参考となる以下のラボもご確認ください。

• Cloud Run を使用して PDF ファイルを作成するサーバーレス アプリをビルドする
• Firebase ウェブ

静的ウェブサイトのメリット

Hugo のような静的サイト作成ツールは、ウェブサーバー不要でウェブサイトを作成できるという利点から採用されることが増えてきました。静的ウェブ プラットフォームでは、サーバーのオペレーティング システムやソフトウェアを保守する必要がありません。しかし、運用面ではさまざまな点を考慮する必要があります。たとえば、投稿のバージョン管理、コンテンツ配信ネットワーク（CDN）上でのウェブサイトのホスティング、SSL 証明書のプロビジョニングなどです。

これらのニーズには、Google Cloud 上で継続的インテグレーション / 継続的デプロイのパイプラインを使用することで対応できます。デプロイ パイプラインにより、開発者はデプロイ プロセス全体を自動化して、迅速なイノベーションを実現できます。このラボでは、この自動化を実現するパイプラインの構築方法を学習します。

設定と要件

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

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

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

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

• 標準的なインターネット ブラウザ（Chrome を推奨）

注: このラボの実行には、シークレット モード（推奨）またはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウント間の競合を防ぎ、個人アカウントに追加料金が発生しないようにすることができます。

• ラボを完了するための時間（開始後は一時停止できません）

注: このラボでは、受講者アカウントのみを使用してください。別の Google Cloud アカウントを使用すると、そのアカウントに料金が発生する可能性があります。

ラボを開始して Google Cloud コンソールにログインする方法

1. [ラボを開始] ボタンをクリックします。ラボの料金をお支払いいただく必要がある場合は、表示されるダイアログでお支払い方法を選択してください。 左側の [ラボの詳細] ペインには、以下が表示されます。

   • [Google Cloud コンソールを開く] ボタン
   • 残り時間
   • このラボで使用する必要がある一時的な認証情報
   • このラボを行うために必要なその他の情報（ある場合）

2. [Google Cloud コンソールを開く] をクリックします（Chrome ブラウザを使用している場合は、右クリックして [シークレット ウィンドウで開く] を選択します）。

   ラボでリソースがスピンアップし、別のタブで [ログイン] ページが表示されます。

   ヒント: タブをそれぞれ別のウィンドウで開き、並べて表示しておきましょう。

   注: [アカウントの選択] ダイアログが表示されたら、[別のアカウントを使用] をクリックします。

3. 必要に応じて、下のユーザー名をコピーして、[ログイン] ダイアログに貼り付けます。

   {{{user_0.username | "Username"}}}

   [ラボの詳細] ペインでもユーザー名を確認できます。

4. [次へ] をクリックします。

5. 以下のパスワードをコピーして、[ようこそ] ダイアログに貼り付けます。

   {{{user_0.password | "Password"}}}

   [ラボの詳細] ペインでもパスワードを確認できます。

6. [次へ] をクリックします。

   重要: ラボで提供された認証情報を使用する必要があります。Google Cloud アカウントの認証情報は使用しないでください。 注: このラボでご自身の Google Cloud アカウントを使用すると、追加料金が発生する場合があります。

7. その後次のように進みます。

   • 利用規約に同意してください。
   • 一時的なアカウントなので、復元オプションや 2 要素認証プロセスは設定しないでください。
   • 無料トライアルには登録しないでください。

その後、このタブで Google Cloud コンソールが開きます。

注: Google Cloud のプロダクトやサービスにアクセスするには、ナビゲーション メニューをクリックするか、[検索] フィールドにサービス名またはプロダクト名を入力します。

プロセスの概要

これから、以下の図に示すものを構築していきます。

目標は、コードを commit してパイプラインをトリガーし、そのパイプラインによってウェブサイトをデプロイすることです。ラボは 2 つのパートに分かれています。まず、ウェブサイトをローカルで構築し、手動で Firebase にデプロイします。次に、Cloud Build を使用してパイプラインを構築することにより、プロセスを自動化します。

タスク 1. 手動でのデプロイ

最初に、Linux インスタンス上にウェブサイトを手動で構築し、エンドツーエンドのプロセスを学びます。また、Linux インスタンスを使用して、Firebase の起動と実行に必要ないくつかのワンタイム タスクも実行します。

Linux インスタンスに接続する

1. ナビゲーション メニュー（）から、[Compute Engine] > [VM インスタンス] を選択します。インスタンスが作成されたことを確認します。

次の図に示すように、行の最後に外部 IP アドレスと SSH ボタンが表示されます。これらが情報パネルによって隠れている場合は、パネルを閉じて、行全体が表示されるようにします。

2. 後で使用するために、外部 IP アドレスをメモしておきます。
3. [SSH] をクリックします。ウィンドウが開き、シェル プロンプトが表示されます。

Hugo をインストールする

次に、Linux インスタンスに Hugo をインストールして、Firebase でデプロイする前にウェブサイトをローカルでテストします。このラボでは、これを簡単にするためのシェル スクリプトを提供しています。

1. Linux インスタンスのシェルで、installhugo.sh ファイルを確認してください。

cat /tmp/installhugo.sh

出力は、次のサンプル出力のようになります。

出力:

#!/bin/bash # Copyright 2020 Google Inc. All rights reserved. # # 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 # # http://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. _HUGO_VERSION=0.96.0 echo Downloading Hugo version $_HUGO_VERSION... wget \ --quiet \ -O hugo.tar.gz \ https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz echo Extracting Hugo files into /tmp... mv hugo.tar.gz /tmp tar -C /tmp -xzf /tmp/hugo.tar.gz echo The Hugo binary is now at /tmp/hugo.

wget コマンドを使用して Hugo をダウンロードし、tar コマンドを使用して Hugo アーカイブを解凍します。このラボの後半でパイプラインを作成する際にも同様のコマンドを使用します。

2. 以下のコマンドを入力してスクリプトを実行し、Hugo をインストールします。

cd ~ /tmp/installhugo.sh

完了すると、以下のように、Hugo が /tmp ディレクトリにインストールされたことを示すメッセージが表示されます。

これで、ウェブサイトのインフラストラクチャを構築する準備が整いました。

リポジトリと最初のウェブサイトを作成する

ウェブサイトを保持する GitHub リポジトリを作成し、次に Linux インスタンスにそのリポジトリのクローンを作成します。

リポジトリのクローンを作成すると、シェルにリポジトリのミラーが作成されます。これにより、シェル内でウェブサイトを実装し、後でファイル システムに変更を commit できるようになります。このラボの後半で、リポジトリに対するこれらの commit に応答するパイプラインを作成します。

1. Linux VM に git と GitHub CLI をインストールし、プロジェクト ID、プロジェクト番号、リージョンを設定します。これらを変数 PROJECT_ID、PROJECT_NUMBER、REGION として保存します。

Linux インスタンスのシェルに次のコマンドを入力します。

export PROJECT_ID=$(gcloud config get-value project) export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format="value(projectNumber)") export REGION=$(gcloud compute project-info describe \ --format="value(commonInstanceMetadata.items[google-compute-default-region])") sudo apt-get update sudo apt-get install git sudo apt-get install gh

プロンプトが表示されたら、すべてのプロンプトに Yes で応じます。

2. 次のコマンドを実行して、Git と GitHub を構成します。

curl -sS https://webi.sh/gh | sh gh auth login gh api user -q ".login" GITHUB_USERNAME=$(gh api user -q ".login") git config --global user.name "${GITHUB_USERNAME}" git config --global user.email "${USER_EMAIL}" echo ${GITHUB_USERNAME} echo ${USER_EMAIL}

3. 次のコマンドを入力して、コード リポジトリとそのクローンを作成します。

cd ~ gh repo create my_hugo_site --private gh repo clone my_hugo_site

次に示すように、リポジトリの作成とリポジトリのクローン作成に関する確認メッセージが出力されます。リポジトリの料金に関してと、リポジトリが空であることに関する 2 つの警告メッセージは無視してかまいません。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 GitHub リポジトリを作成する

これで、サイトのストラクチャを作成する準備が整いました。

4. Linux のシェルに以下のコマンドを入力します。

cd ~ /tmp/hugo new site my_hugo_site --force

通常、hugo コマンドによりディレクトリが作成されます。--force オプションは、すでに存在するリポジトリ ディレクトリにサイトを作成します。これにより、先ほどクローンを作成したディレクトリに Git 関連の情報を保持できます。

完了すると、サイトが作成されたことを示すメッセージが表示されます。

4. 次に、サイトのレイアウトとして使用する hello-friend-ng テーマをインストールします。Linux インスタンスのシェルに次のコマンドを入力します。

cd ~/my_hugo_site git clone \ https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng echo 'theme = "hello-friend-ng"' >> config.toml

完了すると、テーマのクローンが作成されたことを示すメッセージが表示されます。

5. テーマのディレクトリから git ファイルを削除します。

sudo rm -r themes/hello-friend-ng/.git sudo rm themes/hello-friend-ng/.gitignore 注: git ファイルを削除するのは、GitHub リポジトリによってテーマファイルがバージョン管理に追加されるようにするためです。

6. ウェブサイトのストラクチャが設定されると、プレビュー表示できるようになります。以下のコマンドを入力し、TCP ポート 8080 でサイトを開きます。

cd ~/my_hugo_site /tmp/hugo server -D --bind 0.0.0.0 --port 8080

Hugo はサイトを構築し、TCP ポート 8080 でアクセスできるようにします。サーバーは Ctrl+C キーを押すまで実行されます。

7. ブラウザタブを開き、ポート 8080 の外部 IP アドレスに移動します。次の URL を使用します（[EXTERNAL IP] の部分をインスタンスの外部 IP アドレスに置き換えます）。

http://[EXTERNAL IP]:8080

ウェブサイトが次のように表示されます。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 TCP ポート 8080 でサイトを開く

8. Linux のシェルに戻り、Ctrl+C キーを押して Hugo サーバーを停止します。

サイトを Firebase にデプロイする

1. Linux インスタンスのシェルで Firebase CLI をインストールします。

curl -sL https://firebase.tools | bash

2. 次に、Firebase を初期化する必要があります。シェルに以下のコマンドを入力します。

cd ~/my_hugo_site firebase init

3. 矢印キーとスペースバーを使用して [Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys] を選択し、Enter キーを押します。

• プロジェクトを選択するよう求められたら、[Use an existing project] を選択し、矢印キー、スペースバー、Enter キーを使用して、プロジェクト ID を選択します。

• パブリック ディレクトリの場合、デフォルト値の [public] を選択します。

• シングルページ アプリケーションとして構成する場合、デフォルト値の [N] を選択します。

GitHub による自動ビルド / デプロイの設定に対しては、[N] を選択します。

既存のファイルを上書きするか尋ねられた場合は、[Y] を選択します。

4. アプリケーションをデプロイするための準備が整いました。以下のコマンドを Linux インスタンスのシェルに入力して、Hugo でサイトを再構築し、Firebase でデプロイします。

/tmp/hugo && firebase deploy

5. アプリケーションがデプロイされると、ホスティング URL を受け取ります。URL をクリックし、同じウェブサイトが Firebase CDN（コンテンツ配信ネットワーク）から表示されていることを確認します。

一般的なウェルカム メッセージが表示された場合は、CDN が初期化されるまで数分待ってから、ブラウザ ウィンドウを更新します。後で使用するために、このホスティング URL をメモしておきます。

これで、デプロイ全体をローカルで実行できました。次に、Cloud Build を使用して、エンドツーエンドでプロセスを自動化します。

タスク 2. デプロイの自動化

最初の commit を実行する

パイプラインを構築する目的は、リポジトリに変更が加えられたときにビルドをトリガーできるようにすることです。まず、リポジトリに最初の commit を行い、今後の変更が行えることを検証します。

1. 以下のコマンドを Linux のシェルに入力して、git コマンドのグローバル パラメータを構成します。二重引用符を忘れずに付けてください。

git config --global user.name "hugo" git config --global user.email "hugo@blogger.com"

2. Linux のシェルに以下のコマンドを入力して、リポジトリから特定のディレクトリを除外するための .gitignore ファイルを作成します。

cd ~/my_hugo_site echo "resources" >> .gitignore

3. リポジトリへの最初の commit を実行します。

git add . git commit -m "Add app to GitHub Repository" git push -u origin master

これで、ウェブサイトの最初のバージョンが Google Cloud に commit（アップロード）されました。

ビルドを構成する

Cloud Build は、リポジトリのルート ディレクトリにある cloudbuild.yaml という名前のファイルを使用して、ビルドを実行します。このファイルは YAML 形式です。スペースとインデントは重要なので、Linux インスタンスにすでに配置されています。

1. Linux シェルで、次のコマンドを入力します。cp コマンドの最後にピリオド（「.」）があることに注意してください。

cd ~/my_hugo_site cp /tmp/cloudbuild.yaml .

2. 次のコマンドを実行して、cloudbuild.yaml ファイルを確認します。

cat cloudbuild.yaml

出力に含まれる一部の長い行は折り返されています。

出力:

# Copyright 2020 Google Inc. All rights reserved. # # 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 # # http://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. steps: - name: 'gcr.io/cloud-builders/curl' args: - '--quiet' - '-O' # 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. steps: - name: 'gcr.io/cloud-builders/curl' args: - '--quiet' - '-O' - 'firebase' - 'https://firebase.tools/bin/linux/latest' - name: 'gcr.io/cloud-builders/curl' args: - '--quiet' - '-O' - 'hugo.tar.gz' - 'https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz' waitFor: ['-'] - name: 'ubuntu:20.04' args: - 'bash' - '-c' - | mv hugo.tar.gz /tmp tar -C /tmp -xzf /tmp/hugo.tar.gz mv firebase /tmp chmod 755 /tmp/firebase /tmp/hugo /tmp/firebase deploy --project ${PROJECT_ID} --non-interactive --only hosting -m "Build ${BUILD_ID}" substitutions: _HUGO_VERSION: 0.96.0 options: defaultLogsBucketBehavior: REGIONAL_USER_OWNED_BUCKET

3. cloudbuild.yaml ファイルについて:

• このファイルには 3 つの名前付きの手順があり、それぞれがコンテナ イメージによって実行されます。最初の 2 つの手順では、Google がサポートするビルダーを使用して curl を実行し、Hugo と Firebase ツールをダウンロードします。これらの 2 つの手順は並行して実行されます。curl ビルダーを使用すると、curl を手動でインストールするよりも時間を短縮できます。
• 3 番目のステップでは、標準の Ubuntu コンテナを使用して Hugo と Firebase をインストールし、その後サイトを構築してデプロイします。デプロイごとに Hugo と Firebase をインストールすると、最新バージョンの Firebase を使用しながら、いつでも Hugo のバージョンを変更できます。
• tar および wget コマンドは、以前に installhugo.sh スクリプトで使用したものとほぼ同じです。
• このファイルには、カスタム置換変数（_HUGO_VERSION）と Google が提供する置換変数（PROJECT_ID）が使用されており、このテンプレートはさまざまな環境で使用することができます。
• Hugo と Firebase は、バイナリが作成されて一時ディレクトリにインストールされるため、誤ってウェブサイト自体にデプロイされることはありません。

GitHub リポジトリに接続して Cloud Build リポジトリを作成する

1. Linux インスタンスで GitHub リポジトリへの接続を開始します。

gcloud builds connections create github cloud-build-connection --project=$PROJECT_ID --region=$REGION gcloud builds connections describe cloud-build-connection --region=$REGION

2. actionUri を見つけます。

   etag: yKV297keFBHzs1UcgMsbYJlEYvYdIkfFLJMYZfOADu8 githubConfig: {} installationState: actionUri: https://accounts.google.com/AccountChooser?continue=https%3A%2F%2Fconsole.cloud.google.com%2Fm%2Fgcb%2Fgithub%2Flocations%2Fus-east4%2Foauth_v2%3Fconnection_name%3Dprojects%252F921646058273%252Flocations%252Fus-east4%252Fconnections%252Fcloud-build-connection message: ロボット アカウントを使用して https://github.com にログインし、 このリンクに従って、Cloud Build がそのアカウントにアクセスすることを承認してください。承認後、GitHub 認証トークンが Cloud Secret Manager に保存されます。stage: PENDING_USER_OAUTH name: projects/qwiklabs-gcp-00-40e7d6bb49bb/locations/us-east4/connections/cloud-build-connection reconciling: false updateTime: '2024-12-12T08:52:48.505263316Z'

3. 新しいブラウザタブで actionUri を開きます。

4. [続行] をクリックします。

Cloud Build GitHub アプリを、ご利用のアカウントか、所有する組織アカウントにインストールします。GitHub アカウントを使用してインストールを許可します。

4. [Repository access] で、[Only select repositories] を選択します。[リポジトリの選択] をクリックし、リポジトリを選択します。

5. [保存] をクリックします。

6. Cloud Build リポジトリを作成する:

gcloud builds repositories create {{{project_0.startup_script.build_repository_name | "filled in at lab start"}}} \ --remote-uri="https://github.com/${GITHUB_USERNAME}/{{{project_0.startup_script.github_repository_name | "filled in at lab start"}}}.git" \ --connection="cloud-build-connection" --region=$REGION

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 GitHub リポジトリに接続して Cloud Build リポジトリを作成する

Cloud Build トリガーを作成する

これから、リポジトリのマスター ブランチに対する commit に応答するトリガーを作成します。

1. Linux インスタンスのシェルで次のコマンドを入力します。

gcloud builds triggers create github --name="commit-to-master-branch1" \ --repository=projects/$PROJECT_ID/locations/$REGION/connections/cloud-build-connection/repositories/hugo-website-build-repository \ --build-config='cloudbuild.yaml' \ --service-account=projects/$PROJECT_ID/serviceAccounts/$PROJECT_NUMBER-compute@developer.gserviceaccount.com \ --region=$REGION \ --branch-pattern='^master$'

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 Cloud Build トリガーを作成する

Cloud Build サービス アカウント

Cloud Build サービス アカウントに、Firebase を使用してウェブサイトをデプロイするための権限を与える必要があります。

Cloud Build	ロール	説明
[PROJECT_NUMBER@cloudbuild.gserviceaccount.com	roles/firebasehosting.admin	Hosting リソースに対する完全な読み取り / 書き込みアクセス権

パイプラインをテストする

これでパイプラインが作成されたので、サイトに変更を加えてから commit を行い、変更が反映されるかどうかを確認できます。

1. Linux のシェルに以下のコマンドを入力し、リポジトリのディレクトリに移動します。

cd ~/my_hugo_site

2. ファイル config.toml を編集し、タイトルを変更します。

Blogging with Hugo and Cloud Build

3. 以下のコマンドを入力して、リポジトリへの変更を commit し、Cloud Build パイプラインをトリガーします。

git add . git commit -m "I updated the site title" git push -u origin master

4. ビルド履歴でビルドのステータスを確認します。

gcloud builds list --region=$REGION

5. 現在のビルドのビルドログを確認します。

gcloud builds log --region=$REGION $(gcloud builds list --format='value(ID)' --filter=$(git rev-parse HEAD) --region=$REGION)

6. 実行されたビルドから URL を取得します。

gcloud builds log "$(gcloud builds list --format='value(ID)' --filter=$(git rev-parse HEAD) --region=$REGION)" --region=$REGION | grep "Hosting URL"

7. ホスティング URL を参照して結果を確認します。

Firebase コンソールに移動し、プロジェクトを調べてドメイン名を見つけることもできます。

注: CDN が更新されて、更新されたサイト情報が表示されるまでに、数分かかる場合があります。 注: サイトには SSL 証明書があり、アクセスには HTTPS（Hypertext Transfer Protocol Secure）プロトコルが使用されます。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 パイプラインをテストする

お疲れさまでした

CDN と SSL 証明書を提供する Firebase に対して Hugo ウェブサイトをすばやくデプロイするために、Cloud Build がどのようにパイプラインのオーケストレーションを行うことができるかを学習しました。Cloud Build を使用すると、ニーズに合わせてプロセスを調整することができます。デプロイにかかる時間が短いため、イノベーションを迅速に実現し、ほとんど労力をかけることなくウェブサイトのリビジョンをテストすることができます。詳細については、Cloud Build と Firebase のドキュメントを参照してください。

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

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

マニュアルの最終更新日: 2024 年 2 月 11 日

ラボの最終テスト日: 2024 年 2 月 10 日

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