静的サイトを S3 に移動したい
静的サイトジェネレータ hugo(gohugo) で作ったホームページを AWS、特に S3 を使ったサイトに移行しようと考えました。
コスト削減、といっても、数百円なので、それよりは、使っている WEB サービスの整理のためです。
S3 を WEB サーバとして使い、https でアクセスできるようにするには、Certification Manager で SSL 証明書を発行してもらえますが、その証明書を使うためには、CDN サービスである cloudfront を通すのが一般的なようです。AWS にも以下のような記事があります。
Cloudfront function で directory index 相当の動作をさせる
gist も参考
Cloudfront を設定してみたものの、 https://domain/folder/ のような形式だとページが表示されないことに気づきました。
index.html を自動的に返す機能(apache であれば directory index)が無いためです。「参考」に記載しているように、Lambda@Edge などを使って index.html を付ける必要があるようです。
しかし、Lambda@Edge を使うと(Lambda を使うだろうから)遅くならないのだろうか、と思い調べていると、Cloudfront function を使って、index.html を付ける方法が以下に紹介されていました。
速度面、価格面について評価したわけではありませんが、Cloudfront のメニュー内にあり、簡単に設定できそうなので、この方法を使ってみます。
- 上記 function を AWS コンソールから Cloudfront > 関数メニューから、「関数を作成」します。directory_index のような名前で良いと思います。
- 作成後、発行タブを押して「関数を発行」します。
- 発行タブの下のほうに、「関連付けられているディストリビューション」という欄があるので、「関連付けを追加」を押します。ディストリビューションを選びます。イベントタイプは「Viewer Request」キャッシュビヘイビアは「Default(*)」で良いと思います。
「ビヘイビア」タブから設定しても同じようになると思います。
このように設定すると、末尾が / で終わる場合は、index.html が、拡張子が付いていない URL の場合には、/index.html が付加されます。コードを見ればわかりますが、query parameter は付いていても付いていなくても同じ動きになります。
Cloudfront function と Lambda@Edge の違い
これも、結局、Classmethod 社の記事、エッジで爆速コード実行！CloudFront Functionsがリリースされました！、に比較があります。脱線しますが、Classmethod 社はすごいなと思います。
UI 上で見える明確な違いとしては、ディストリビューション > ビヘイビアに「関数の関連付け」の設定に違いがありました。
- Cloudfront function は、ビューワーリクエスト/レスポンスにのみ設定できます。
- Lambda@Edge はビューワーリクエスト/レスポンスとオリジンリクエスト/レスポンス両方に設定できます。
Cloudfront function は CDN 上で動く軽量の関数、という位置付けと想像します。
参考
- Lambda@Edge を使う方法もあり、できた！S3 オリジンへの直接アクセス制限と、インデックスドキュメント機能を共存させる方法 で紹介されています。
- Hugo Deployを設定しておくと deploy コマンドで S3 にアップロード後、キャッシュクリアが自動的に実行されるので便利そうです。ただ、私の場合、AWS_ACCESS_KEY_ID、AWS_SECRET_ACCESS_KEY 環境変数を設定しておかないとエラーになりました。
まとめ
- AWS の Certification Manager で SSL 証明書を発行する。(バージニア北部)
- hugo deploy で S3 にデータを置く。
- Cloudfront でディストリビューションを作成する。
- Cloudfront function を作成し、ディストリビューションに関連付ける。