まえがき

春ですね。良い季節です。花粉と暑いのを除いて・・・
実はですね、重い腰を上げ散らかして画像ファイルとか全部AWS S3に移行したんですよ。
めんどくさかった。もうやらない。

なぜ S3 に移行したのか

これまではこのサイトで使用している画像はすべてリポジトリ内に直接含めていました。
しかし、記事が増えるにつれて以下のような問題が見えてきました。

リポジトリのサイズ肥大化：Gitで画像を管理すると重くなりがち。
ビルド・デプロイ時間の増加：画像ファイルが多いとCI/CDの時間が長くなる。
配信パフォーマンス：専用のストレージとCDN（CloudFront）の組み合わせにすることで、高速な配信を行いたかった。

そこで、画像や一部cssなどを分離してAWS S3に保存し、CloudFront経由で配信する構成に変更しました。

やったこと

1. S3バケットの作成

まずは画像保存用のS3バケットを作成しました。
セキュリティ面を考慮してパブリックアクセスはブロックし、CloudFront経由でのみアクセスできるようにしています。

2. CloudFrontの設定

S3をオリジンとするCloudFrontディストリビューションを作成しました。

3. Hugo側の設定とショートコードの作成

このブログはHugoで作られているので、画像URLを簡単に呼び出せるように専用のショートコードを作成しました。先ほど実装した s3img ショートコードでは、サイズ（パーセンテージなど）も指定できるようにしています。

1
2


<!-- layouts/shortcodes/s3img.html -->
<img src="{{ .Site.Params.staticAssetsUrl }}{{ .Get "src" }}" alt="{{ .Get "alt" }}"{{ if or (.Get "width") (.Get "height") }} style="{{ with .Get "width" }}width: {{ . }};{{ end }}{{ with .Get "height" }} height: {{ . }};{{ end }}"{{ end }}>

これで、Markdown記事からは以下のように呼び出せます。

1

{{< s3img src="example.png" alt="サンプル画像" width="50%" >}}

移行してみた結果

リポジトリがめっちゃすっきり。
軽くなったし、画像の追加もS3にアップロードするだけなので管理が楽。
あとはCloudFrontのおかげで画像の読み込み速度も上がったのかな？って感じ。知らんけど。

おわりに

今回は画像配信のインフラをAWSに移行した話でした。
個人ブログの規模ならAWSの無料枠や少額の維持費で済むことが多いと思うので、ちょっと遊びたい人にはいいんじゃないかな？

S3ってすばらしい。知らんけど。

静的ファイルをAWS S3に移行した話

うっすい記事の内容。限界。