GCS の課金は「保存しているデータ量」「オペレーション料金」「ネットワーク料金」があります。

GCS に置いた画像を公開して、 html の　img タグなどでアクセスすると、アクセスのたびにネットワーク料金がかかるわけですが、 Cloudflare の無料の CDN を使うことで、画像に一度アクセスしたら、キャッシュの保存期間が切れるまでは CDN から読み込むので、料金を節約できると ChatGPT に教えてもらったので設定してみました。

私は初心者です、 ChatGPT に聞きながら書きました、間違いなどありましたら教えていただけると幸いです m(_ _)m

参考

https://blog.kumano-te.com/activities/build-static-file-server-with-cloudflare-and-gcs#google_vignette

上記参考を見ながら、わからない部分は ChatGPT に聞きながら進めた内容を記載しています。

前提

CDN 配信用にドメインを取得しておく
- samplestorage.net
  - 今回はお名前.com でこの投稿用に取得しました
Cloudflare のアカウントを持っている
GCP のアカウントを持っている

この投稿に記載しているバケットなどはすでに削除しました

Cloudflare とドメインの設定

Cloudflare の設定画面に自分のドメインを入れて「続行」

フリープランを選択

タイプ「CNAME」を選択、名前「cdn」、ターゲット「c.storage.googleapis.com」を入力、プロキシ（オレンジ雲）はONにして、次の画面に進む。

※私はここで間違って入力して、後から Cloudflare の設定画面で編集しましたが、挙動などに違いはないはず

↓3だけお名前.comの画面から設定をしました

お名前.comの画面で設定↓

ネームサーバー設定後に Cloudflare の設定画面から先に進もうとしましたが、ネームサーバーの設定が反映されるまで時間かかるという都合で、エラーになりました。
数時間ぐらい経つと Cloudflare からメール↓が来て、自動で設定が完了までされたことを確認できました。

gmail のスクショ

ドメインの所有権をGoogleに証明

自分のドメイン名と同じ名前でバケットを作る必要があるが、今のままだとドメイン名の使用が承認されてないことのエラーが GCS の画面でバケット作成時に出てしまいます。

バケット名 cdn.samplestorage.net を作成するには、そのドメイン名の使用が承認されていることを確認する必要があります。確認の手順については、「バケットに名前を付ける」ステップのリンクに従ってください。

なのでドメインの所有権を証明する作業をします。

Google Search Console を開く

画面の指示に従って操作するだけで DNS の設定まで自動で行ってくました↓

この投稿を書く前に何度か試してましたが、以下のような画面操作ではなくても、自分でお名前.comのDNSの設定画面から TXT レコードを設定しても証明まですることができました。

GCS の設定

バケット作成

バケット名に「cdn.samplestorage.net」を入力

Region (単一リージョン)で日本国内にしておけば良い思います

「このバケットに対する公開アクセス禁止を適用する」のチェックを外す

それ以外はデフォルトの設定で作成しました

画像などを公開する設定

「権限」タブから新しいメンバーを「allUsers」、ロールを「Storage オブジェクト閲覧者」に設定する

どうでもいいですが、ロールの別の選択肢に「Storage バケット閲覧者」という似てる項目もあり、こちらを間違って設定してしまうと、画像が公開 URL からアクセスできなくてはまってました。

いらすとやから適当な画像をバケットにアップロードしました

ブラウザから URL を直リンクで画像にアクセスできたことを確認できました

CDN から画像にアクセス確認とキャッシュの設定

ここまでの設定がうまくいっていれば https://cdn.samplestorage.net/ファイル名 で GCS の画像にアクセスができるはず

以下、 ChatGPT に聞いた設定をそのままやってみました

ChatGPT によると GCS 側のキャッシュ設定が短いと、Cloudflare側だけ設定しても短時間で取り直してしまう場合がある、とのことだがこの挙動についてまでは確認しませんでした

Cloudflare の設定画面からブラウザのキャッシュ時間を最大にする

ページルールを設定

AI によると「オリジンキャッシュコントロール」を「OFF」、「エッジキャッシュTTL」を長く設定（1年など）にすると Cloudflare のサーバー側でキャッシュされるとのことです

AI によると「cf-cache-status」が「HIT」ならばキャッシュされている状態であり、それが確認できました。
また、Age が増えるほど長くキャッシュされているとのことでした