tl;dr

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

俺のツールズ

jekyll

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

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

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

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

鉄板

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

ドメイン

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

Amazon Route 53（クラウド DNS - ドメインネームサーバー） | AWS
AWS Route 53 は、ドメイン名を数値の IP アドレスに変換する、信頼性とコスト効率の高いマネージド型クラウドベースのドメインネームシステム (DNS) ウェブサービスです。
Amazon Web Services, Inc.

aws.amazon.com

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

サーバー証明書

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

AWS Certificate Manager（SSL/TLS 証明書を無料で作成） | AWS
AWS Certificate Manager では、AWS の各種サービスで使用する Secure Sockets Layer/Transport Layer Security (SSL/TLS) 証明書のプロビジョニング、管理、およびデプロイを簡単に行えます。AWS Certificate Manager でプロビジョニングされた SSL/TLS 証明書は無...
Amazon Web Services, Inc.

aws.amazon.com

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

S3 + CloudFront

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

Amazon CloudFront（高速コンテンツ配信ネットワーク - CDN） | AWS
Amazon CloudFront は、低レイテンシーの高速転送によりデータ、ビデオ、アプリケーション、API をビューワーに安全に配信するグローバルコンテンツ配信ネットワーク (CDN) サービスです。
Amazon Web Services, Inc.

aws.amazon.com

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

オリジンアクセスアイデンティティを使用して Amazon S3 コンテンツへのアクセスを制限する - Amazon CloudFront
オリジンアクセスアイデンティティを作成して使用することで、Amazon S3 コンテンツへのアクセスを制限します。
docs.aws.amazon.com

docs.aws.amazon.com

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

AWS CloudFront returns http 307 when origin is S3 bucket
I have created the s3 bucket with some files. I created the CloudFront distribution with that S3 bucket as origin and it changed status to deployed.When I curl CloudFront for any file I get:&lt...
Stack Overflow

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 を利用) でアップロードします.

以上

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

元記事はこちら

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