ようへいの日々精進XP

よかろうもん

jekyll で作ったペライチページを S3 と CloudFront, ACM, Route53 でサクッと公開出来たのが心地よかったのでメモ

tl;dr

oreno.tools というドメインを酔った勢いで取得して, いつかサイトを公開してみたいなと思っていたので, Jekyll という Ruby 製のサイトジェネレータでペライチページ (ペラ 1 枚)を生成して S3 + CloudFront and more で公開してみたのでメモります.

俺のツールズ

jekyll

Ruby 製のサイトジェネレータで, 導入も簡単だし, コンテンツ自体は Markdown で書くことが出来るので呼吸をする感じで記事を書くことが出来ます.

Jekyll • シンプルで、ブログのような、静的サイト

いい感じのテーマも用意されていて, 記事を書く時間よりもテーマを選ぶ時間のほうが長くなってしまいました.

静的サイトを公開する為の準備

鉄板

Amazon S3 + CloudFront は鉄板だと思います.

ドメイン

可能な限り Route53 で運用することを検討しましょう.

aws.amazon.com

Alias レコードで Zone Apex の指定も可能ですし, 後述の ACM によるサーバー証明書発行の際に DNS 認証を行えるので便利だと思います. Route53 で Hosted Zone を作成し, 払い出されたネームサーバーを某レジストラの管理画面にて登録しました.

サーバー証明書

Amazon Certificate Manager (以後, ACM と記述します) を利用します.

aws.amazon.com

CloudFront と ELB にのみ適用可能な証明書ですが, 今回ようなペライチサイトには十分だと思っています. 証明書を発行してもらうにあたり, メール認証かドメイン認証を行う必要がありますが, Route53 でドメインを管理しているとシームレスに連携 (認証用の CNAME レコードを対象 Hosted zone に挿入してくれます) してくれるので楽ちんです.

S3 + CloudFront

S3 バケットは公開したいドメイン名で作成 (バケットは必ずしもドメイン名で作成する必要はありません) し, CloudFront のオリジンにそのバケットを指定します. 基本的にはこれだけ. サーバー証明書ACM で発行した証明書を指定します.

aws.amazon.com

ただ, OAI (Origin Access Identity) だけは有効にしておきたいところです.

docs.aws.amazon.com

尚, 構築してすぐに対象の URL にアクセスすると HTTP ステータスコード 307 が返ってきてしまいますが, これは少し時間を置くと解消しますのでお茶でも飲んで待ちましょう. 以下, 参考にさせて頂きました. ありがとうございます.

stackoverflow.com

デプロイ

デプロイと言うと大袈裟な感じですが, S3 バケットに Jekyll が書き出した HTML や CSS などのファイルをアップロードします. これは, 以下のようなシェルスクリプトを用意しました.

bundle exec jekyll build
aws s3 sync ./_site/ s3://oreno.tools/ \
   --exclude "jekyll-cayman-theme.gemspec" \
   --exclude "README.md" \
   --exclude "deploy.sh"

詳しく書かれているドキュメントは確認出来ていませんが, ${project}/_site/ 以下のファイル群が実際にアクセスされるコンテンツになるようですので, これらのコンテンツを何らかの方法 (今回は AWS CLI を利用) でアップロードします.

以上

基盤は本当に一瞬と言っていいほど短時間で堅牢なものを準備することが出来ました. 後はそこに載せるコンテンツ次第だと思いますーε≡≡ヘ( ´Д`)ノ