Cloudfront + S3 directory index / www あり、なし対応

静的サイトを S3 に移動したい

静的サイトジェネレータ hugo(gohugo) で作ったホームページを AWS、特に S3 を使ったサイトに移行しようと考えた。

コスト削減、といっても、数百円なので、それよりは、使っている WEB サービスの整理のためである。

S3 を WEB サーバとして使い、https でアクセスできるようにするには、Certification Manager で SSL 証明書を発行してもらえるが、その証明書を使うためには、CDN サービスである cloudfront を通すのが一般的なようだ。AWS にも以下のような記事がある。

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 は付いていても付いていなくても同じ動きになる。

これも、結局、Classmethod 社の記事、エッジで爆速コード実行！CloudFront Functionsがリリースされました！、に比較がある。脱線するが、Classmethod 社はすごいなと思う。

UI 上で見える明確な違いとしては、ディストリビューション > ビヘイビアに「関数の関連付け」の設定に違いがあった。

Cloudfront function は CDN 上で動く軽量の関数、という位置付けと想像する。

Lambda@Edge を使う方法もあり、できた！S3 オリジンへの直接アクセス制限と、インデックスドキュメント機能を共存させる方法で紹介されている。
Hugo Deploy を設定しておくと deploy コマンドで S3 にアップロード後、キャッシュクリアが自動的に実行されるので便利そう。ただ、私の場合、AWS_ACCESS_KEY_ID、AWS_SECRET_ACCESS_KEY 環境変数を設定しておかないとエラーになった。

WEB開発