share facebook facebook twitter menu hatena pocket slack

2018.11.06 TUE

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

川原 洋平

WRITTEN BY 川原 洋平

tl;dr

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

俺のツールズ

jekyll

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

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

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

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

鉄板

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

ドメイン

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

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

aws.amazon.com

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

サーバー証明書

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

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

aws.amazon.com

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

S3 + CloudFront

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

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

aws.amazon.com

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

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

docs.aws.amazon.com

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

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...

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 でサクッと公開出来たのが心地よかったのでメモ

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。