Serverless Web Application Workshop をCLIでやってみた Lab 1: Static Website Hosting
サーバーレスアーキテクチャ Advent Calendar 2016 の10日目の記事です。Advent Calendar初参加になります。
先日、AWS re:Invent 2016 Recap に参加しました。
jawsug-yokohama.connpass.com
各スピーカーからAWS re:Invent 2016 の体験記を聞くことができました。今年は大量のサービスが出ていてキャッチアップが大変ですね。。
勉強会の中でAWS re:Invent 2016でサーバレスのワークショップが開催されてたことを知りました。
qiita.com
手順は英語ですがREADMEに詳細に書かれているので、読みながら簡単にできそうです。サーバレスならお金も安いので、個人アカウントで試せて安心ですね。
github.com
コンソールでの作業を、(できるだけ)CLIに置き換えてみたのでメモを載せていきます。
作業はMacで、リージョンはバージニアを想定して書いてます。
ワークショップは全部で4つあります。
- Lab 1: Static Website Hosting
- Lab 2: Beta Sign-up Mailing List
- Lab 3: Administrative Interface
- Lab 4: Product Update Blog
今回はLab 1: Static Website Hostingについて書いていきます。
- やること
- Setup
- バケット作成
- Static Website Hostingを有効にする
- ワークショップ用に用意されたlab1のファイルをS3にsyncする
- ブラウザで開く
- CloudFront作成
- TTL変更
- CloudFront経由で開く
- 最後に
やること
静的なウェブサイトをホストする為にS3 bucketを作成・設定。グローバル展開をする為にCloudFrontの設定・配信する。CloudFrontのURLからサイトが表示される事を確認。
Setup
- AWSのCLIやjqなど入ってなければインストールしておきましょう。
- AWS configureでAccessKey, SecretAccessKeyは自分のもの、regionはus-east-1を指定しておきましょう。
git clone https://github.com/awslabs/aws-serverless-website-workshop.git cd aws-serverless-website-workshop
バケット作成
- バケットはユニークでなければダメなので、XXXXXXは読み替えて下さい。
$ export BUCKET_NAME=XXXXXX-wildrydes $ aws s3 mb --region us-east-1 s3://${BUCKET_NAME}
・ポリシー追加
$ export PUBLIC_POLICY=public.json
$ cat << EOF > ${PUBLIC_POLICY}
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::${BUCKET_NAME}/*"
}
]
}
EOF
$ aws s3api put-bucket-policy --bucket ${BUCKET_NAME} --policy file://${PUBLIC_POLICY}
Static Website Hostingを有効にする
$ aws s3 website s3://${BUCKET_NAME} --index-document index.html
ワークショップ用に用意されたlab1のファイルをS3にsyncする
- アプリコードは用意されているものを使います。
- 自分で作成したアプリコードがあれば、そちらをsyncするのも良いと思います。
- Lab2も続きになるので用意されてるものを使いましょう。
$ aws s3 sync lab1/ s3://${BUCKET_NAME}
ブラウザで開く
- SPAで動いているサービスを確認できると思います。
open http://${BUCKET_NAME}.s3-website-us-east-1.amazonaws.com
CloudFront作成
- CloudFrontのCLIはまだプレビューになるので、まずは有効にしましょう。
$ aws configure set preview.cloudfront true
- 次の設定変更に使用したいので、作成時に出力されるjsonをファイルに出力しておきます。
$ aws cloudfront create-distribution --origin-domain-name ${BUCKET_NAME}.s3-website-us-east-1.amazonaws.com > cloudfront.json
TTL変更
$ aws cloudfront update-distribution --cli-input-json file://cloudfront.json
- うまくいかないのでコンソールから手動で変更してコマンドは無視して下さい。
CloudFront経由で開く
- StatusがDeployedになってから開いてください。2, 3分かかります。
- 作成時のjsonからDomainNameを取り出して、ブラウザで開きます。
- CloudFront経由で確認できたら完成です。
$ open https://$(cat cloudfront.json | jq -r '.Distribution.DomainName')
- めんどいからやらないけど、S3に直接アクセスできる状態で終わりなの気持ち悪いな。。
