GSP747

概要

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

目標

このラボでは、次のことを行います。

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

前提条件

ラボで使用するサービスを実際に体験しておくと、より効果的に学ぶことができます。他に以下のラボがありますので、お役立てください。

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

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

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

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

設定と要件

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

こちらの説明をお読みください。ラボには時間制限があり、一時停止することはできません。タイマーは、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 にデプロイします。2 つ目のパートでは、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

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

出力:

_HUGO_VERSION=0.96.0 curl -L https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz | tar -xz -C /tmp/ # echo The Hugo binary is now at /tmp/hugo.

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

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

cd ~ /tmp/installhugo.sh

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

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

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

事前に作成された Git リポジトリのクローンを Linux インスタンスに作成します。

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

1. Linux VM に git をインストールし、プロジェクト 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 -y git

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

git config --global init.defaultBranch main git config --global user.name "student" git config --global user.email "{{{user_0.username | "filled in at lab start"}}}"

3. 次のコマンドを入力して、事前に作成されたリポジトリのクローンをローカルの Gitea サーバーに作成します。

cd ~ git clone http://giteaadmin:GiteaPassword123@localhost:3000/giteaadmin/my_hugo_site.git 注: リポジトリは新しく初期化されたものであり、まだ commit が含まれていないため、「警告: 空のリポジトリのクローンを作成した可能性があります。」の出力は想定内のことです。

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

これで、ウェブサイトの構成を作成する準備が整いました。

6. Linux のシェルに次のコマンドを入力します。

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

通常は、hugo コマンドによりディレクトリが作成されます。--force オプションを指定すると、リポジトリ ディレクトリがすでに存在する場合でも、そのディレクトリ内にウェブサイトを作成できます。そのため、先ほどクローンを作成したディレクトリに Git 関連の情報を保管できます。

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

7. 次に、ウェブサイトのレイアウトとして使用する 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

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

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

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

9. ウェブサイトの構成を設定したので、プレビュー表示ができるようになりました。次のコマンドを入力して、TCP ポート 8080 でサイトをリリースします。

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

Hugo によってウェブサイトが構築され、TCP ポート 8080 でアクセスできるように公開されます。サーバーは Ctrl+C キーで停止するまで実行されます。

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

外部 IP アドレスは、Google Cloud コンソールの [Compute Engine] > [VM インスタンス] の [外部 IP] 列で確認できます。また、ターミナルで次のコマンドを実行して確認することもできます。

curl -s -H "Metadata-Flavor: Google" http://metadata.google.internal/computeMetadata/v1/instance/network-interfaces/0/access-configs/0/external-ip

次の場所にアクセスします。

http://[EXTERNAL IP]:8080

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

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

11. 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: Set up deployments for static web apps] を選択し、Enter キーを押します。

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

• パブリック ディレクトリについては、デフォルト値の [public] を選択します。

• シングルページ アプリケーションの構成については、「N」と入力して Enter キーを押します。

• GitHub / 外部 Git による自動ビルド / デプロイの設定については、「N」と入力して Enter キーを押します。

• Firebase 用のエージェント スキルのインストールについては、[N] を選択します。

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

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

/tmp/hugo && firebase deploy

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

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

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

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

環境変数を確認する

先に進む前に、セッションの環境変数がまだ定義されていることを確認してください。ターミナル セッションを再起動したり、接続が切断されたりした場合は、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])")

ビルドを構成する

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/git' args: ['clone', 'http://giteaadmin:GiteaPassword123@${_GIT_SERVER_IP}:3000/giteaadmin/my_hugo_site.git', '.'] - name: 'gcr.io/cloud-builders/curl' args: - '-L' - 'https://firebase.tools/bin/linux/latest' - '-o' - '/workspace/firebase' - name: 'gcr.io/cloud-builders/curl' args: - '-L' - 'https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz' - '-o' - '/workspace/hugo.tar.gz' waitFor: ['-'] - name: 'ubuntu:20.04' args: - 'bash' - '-c' - | tar -xvf /workspace/hugo.tar.gz chmod 755 /workspace/firebase /workspace/hugo /workspace/firebase deploy --project ${PROJECT_ID} --non-interactive --only hosting -m "Build ${BUILD_ID}" substitutions: _HUGO_VERSION: 0.96.0 _GIT_SERVER_IP: '' options: defaultLogsBucketBehavior: REGIONAL_USER_OWNED_BUCKET

3. cloudbuild.yaml ファイルについて、次のことがわかります。

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

最初の commit を実行する

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

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

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

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

git add . git commit -m "Add app to Git Repository" git push -u origin main

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

注: git branch コマンドを実行して、ブランチが正しいことを確認してください。master と表示された場合は、git branch -m master main コマンドを使用して main に名前を変更します。

Cloud Build の Webhook トリガーを作成する

ここで、Gitea Git リポジトリからのコードの push に応答する Cloud Build の Webhook トリガーを作成します。

1. 事前にプロビジョニングされた Secret Manager のシークレットを使用して、Cloud Build の Webhook トリガーを作成します。

gcloud builds triggers create webhook --name="commit-to-main-branch1" \ --inline-config="cloudbuild.yaml" \ --secret="projects/$PROJECT_ID/secrets/webhook-secret/versions/1" \ --service-account="projects/$PROJECT_ID/serviceAccounts/$(gcloud projects describe $PROJECT_ID --format='value(projectNumber)')-compute@developer.gserviceaccount.com" \ --substitutions=_GIT_SERVER_IP=$(curl -s -H "Metadata-Flavor: Google" http://metadata.google.internal/computeMetadata/v1/instance/network-interfaces/0/access-configs/0/external-ip) \ --region=$REGION

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 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 を編集し、タイトルを変更します。

ファイルは nano テキスト エディタで開いて編集できます。

nano config.toml

title を含む行を見つけて、次のように変更します。

title = "Blogging with Hugo and Cloud Build"

Ctrl+O キー、Enter キーを順に押して保存してから、Ctrl+X キーを押して nano エディタを終了します。

別の方法として、シェルで次の sed コマンドを実行して、タイトルを自動的に更新することもできます。

sed -i 's/title =.*/title = "Blogging with Hugo and Cloud Build"/g' config.toml

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

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

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

gcloud builds list --region=$REGION

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

gcloud builds log --region=$REGION $(gcloud builds list --region=$REGION --limit=1 --format='value(id)')

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

gcloud builds log --region=$REGION $(gcloud builds list --region=$REGION --limit=1 --format='value(id)') | grep "Hosting URL"

7. ホスティング URL にアクセスして結果を確認します。

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

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

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

お疲れさまでした

Cloud Build がパイプラインをオーケストレートして、CDN と SSL 証明書を提供する Firebase に対して Hugo ウェブサイトをすばやくデプロイできることを学習しました。Cloud Build のプロセスはニーズに合わせて調整できます。デプロイ時間が短縮されるので、すばやくイノベーションを実現し、手軽にウェブサイトの変更をテストできるようになります。詳細については、Cloud Build と Firebase のドキュメントを参照してください。

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

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

マニュアルの最終更新日: 2026 年 6 月 18 日

ラボの最終テスト日: 2026 年 6 月 18 日

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