GCS の課金は「保存しているデータ量」「オペレーション料金」「ネットワーク料金」があります。
GCS に置いた画像を公開して、 html の img タグなどでアクセスすると、アクセスのたびにネットワーク料金がかかるわけですが、 Cloudflare の無料の CDN を使うことで、画像に一度アクセスしたら、キャッシュの保存期間が切れるまでは CDN から読み込むので、料金を節約できると ChatGPT に教えてもらったので設定してみました。
私は初心者です、 ChatGPT に聞きながら書きました、間違いなどありましたら教えていただけると幸いです m(_ _)m
参考
上記参考を見ながら、わからない部分は ChatGPT に聞きながら進めた内容を記載しています。
前提
- CDN 配信用にドメインを取得しておく
- samplestorage.net
- 今回はお名前.com でこの投稿用に取得しました
- samplestorage.net
- 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 が増えるほど長くキャッシュされているとのことでした
