Google CloudのCloud StorageとCloud CDNでAstroのホスティング環境を構築したい

2023年12月13日 14:24

この記事は「株式会社メンバーズ Jamstack研究会主催 Advent Calendar
2023」の11日目の記事です。

はじめに

こんにちは、株式会社メンバーズ DevOpsLeadでクラウドコンピューティングサービスを利用してサービス構築に携わっている白井です。

今回は、HTML、CSS、JavaScriptなどの静的ファイルをWeb公開するために、Google Cloud Platform（GCP）のサービスを利用（Google Cloudコンソール操作）し、AstroのSSGで生成した静的ファイルをCloud Storageに置いて、Cloud CDNでキャッシュさせる、いわゆるJamstack構成を行なってみようと思います。

また、Cloud BuildをGitHubと連携させて、特定のブランチにプッシュされたときに自動ビルド＆デプロイできるようにしていきます。

Cloud Storageバケットの作成

静的ファイルを保存しておくためのバケットを作成します。

Astroでプロジェクトの作成

静的ファイルにできればなんでもいいのですが、特にパフォーマンスが良く、多くのCMSと連携できるのでAstroで作成していきます。

実行時のローカル環境

$ git --version
git version 2.34.1

$ node -v
v20.10.0

$ npm -v
10.2.4

こちらのドキュメント通りにプロジェクトを作成していきます。

$ npm create astro@latest

作成したプロジェクトのディレクトリに移動して、cloudbuild.yamlファイルを作成します。※バケット名は先ほど作成したCloud Storageバケット名に変更してください。
この設定でAstroのビルドとCloud Storageバケットに同期を行なっています。

# cloudbuild.yaml

steps:
  - name: "node"
    entrypoint: "npm"
    args: ["install"]
  - name: "node"
    entrypoint: "npm"
    args: ["run", "build"]
  - name: "gcr.io/cloud-builders/gsutil"
    args: ["rsync", "-d", "-r", "dist", "gs://バケット名"]

先ほどのInitialize a new git repository? でYesを選択しているのでローカルリポジトリが作成されています。
GitHubでリポジトリを作成し、ローカルリポジトリをリモートリポジトリにプッシュしておきます。

Cloud Buildトリガーを作成

GitHubと連携するためのCloud Buildトリガーを作成していきます。
GitHubリポジトリはソースコード管理プロバイダの認証をすることで選択することができます。

トリガーの設定ができたので何かしらファイルを変更してプッシュしてみます。プッシュしたらCloud Buildがビルドしてファイルの同期を行なってくれます。

ファイルを公開するためにバケットにアクセス権を設定します。
[権限]から[アクセス権を付与]でプリンシパルにallUsers、ロールにStorage オブジェクト読み取りを設定しておきます。

Cloud CDN

通常、一般公開オブジェクトはデフォルトで Cloud Storage ネットワークのキャッシュに保存されるため、特に設定をしなくても、Cloud Storage はコンテンツ配信ネットワーク（CDN）のように動作します。

Cloud Storage の組み込みキャッシュ｜Google Cloud

上記のようにCloud CDNを使わずともCDNとして動作してくれますが、キャッシュ可能な最大ファイルサイズ、キャッシュの有効期限、キャッシュの無効化やHTTPS を介したカスタムドメインのサポートなどCloud Storageとはコントロールできる範囲に違いがあるため、これらが必要な場合はCloud CDNを使うことになります。

Cloud CDNの設定をするにはアプリケーションロードバランサが必要なので作成します。アプリケーションロードバランサを作る設定項目からCDNを有効にすることで、CDNも作成できます。