もともとGitHub Pagesで管理していたが、そろそろHTTPSで配信してもよかろうと思い立ってCloudFront+S3で配信することにした。おおよそいつもの構成。
↓このリポジトリで管理していて、masterにコミットが追加されるとCircle CIで勝手にビルドしてデプロイする。いままでHTMLとCSSをベタで書いてたけどEJSとSass使うことにした。みどころはそれくらいなはず。見た目自体は全く変えていないけど中身は丸々書き直した。
設定にあたっては、307 Temporary RedirectでS3のURLに飛ばされて困った。正確にはbucket-name.s3.amazonaws.comがデフォルトでus-east-1を向いていて、実際のS3 bucketのregionと異なる場合はリダイレクトされるという仕様にハマって困った。
CloudFrontのoriginをS3に設定するとbucket-name.s3.amazonaws.comに自動で向くのでS3 bucketのregionがus-east-1以外のときに307が発生する。そのため独自ドメインをCNAME(Route 53ならAレコードのaliasでも)でCloudFrontに向けるとS3のURLへのリダイレクトが発生して期待通りにアクセスできない。
bucket-name.s3.amazonaws.comがus-east-1に向く設定はユーザからは変更不可能(のはず?)で時が経つと勝手に適用されるとのことなのだけど、数時間たってもなぜかうまくいかなかった。
masawada.meは東京リージョンのS3 bucketを使っているので、今回はbucket-name.s3-website-ap-northeast-1.amazonaws.comというようなURLをCloudFrontのoriginとして設定したところうまく見られるようになった。
若かりしころはFetchというFTPクライアントでちまちまHTMLとかをアップロードしていたので、こういう構成の静的ウェブサイトを作るときはいつも隔世の感を感じながら作業している。
