読者です 読者をやめる 読者になる 読者になる

やーまんぶろぐ

気が向いた時にだけ書くブログ

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について書いていきます。

やること

静的なウェブサイトをホストする為にS3 bucketを作成・設定。グローバル展開をする為にCloudFrontの設定・配信する。CloudFrontのURLからサイトが表示される事を確認。

Setup

  • AWSCLIや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変更

  • update用のjsonがうまく作れなかった。。
  • 作成時に出力されたjsonをうまく修正して、DefalutTTLを5に変更して、下のコマンドでアップデートできそうなのですが。。
$ 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')

f:id:yamano3201:20161210080015p:plain

  • めんどいからやらないけど、S3に直接アクセスできる状態で終わりなの気持ち悪いな。。

最後に

ほとんどコピペでできるようになったのではないでしょうか。
あまりCLI触ったことない人は試してみてはどうでしょう。

残りも順番にやっていきたいと思います。