ブログで使う画像を Google Cloud Storage に置く

2024/11/27

このブログなどで使う画像を Google Cloud Storage で管理するまでの方法を記録します。

GCS で画像を管理するメリット

  • リポジトリ肥大化の回避
  • クラウド上での画像の一元管理
    • 別媒体への記事の移行などが容易になる
  • デプロイの高速化
    • SSG のブログなどで画像をローカルで扱う場合、コンテンツが増えたときにビルドに時間がかかるようになってしまう
    • デプロイにかかる時間はなるべく短くしたい

手順

  1. 独自ドメインを用意する
  • Google Cloud Storage に接続するためのドメインを用意します。
  • 今回は Cloudflare Registrar で所得しているドメインを使用しました。
  1. Cloud Storage

基本的には次の公式ドキュメントに従って設定します。

静的ウェブサイトをホストする  |  Cloud Storage  |  Google Cloud
faviconcloud.google.com
ogImage

HTTP を使用した静的ウェブサイトのホスティング  |  Cloud Storage  |  Google Cloud
faviconcloud.google.com
ogImage

  • 画像を管理するためのプロジェクトを作成
  • 支払い設定を行う
  • プロジェクトで Compute Engine API を有効化
  • プロジェクトの 「IAM と管理」の IAM から、自分に「ストレージ管理者」と 「Compute ネットワーク管理者」のロールを付与
  • Cloud Storage へのドメインの接続
    • 次のように DNS レコードを設定します。
TYPE NAME DATA
CNAME content c.storage.googleapis.com
  • バケットの作成
  • バケットの権限の設定
    • プリンシパル allUsers に対して「環境とストレージ オブジェクト閲覧者」のロールを付与
  • バケットに画像をアップロード
  • 登録したドメインが example.com の場合、画像は https://contents.example.com/example.jpg のような URL から参照できるようになります。

あとがき

もともとはブログの画像を Google Drive とかで管理できたらいいなと思って方法を調べていました。 しかし Google Drive は画像の直リンクができないため、今回は Google Cloud Storage を使用してみました。 （仮に Google Drive の画像へ直リンクできたとしても、いつ仕様が変わるかわからないので、GCS などの外部リソースで管理したほうが安心だと思いました。）

© 2024 seelx3