AWS
lambda
reinvent
APIGateway
serverless

re:Invent 2016 Workshop (SRV309: Wild Rydes Takes Off - The Dawn of a New Unicorn

More than 1 year has passed since last update.

AWS re:Invent 2016でサーバレスのワークショップ「SRV309: Wild Rydes Takes Off - The Dawn of a New Unicorn」をやって来たので、その内容の紹介と解説を。


内容

SPAっぽいウェブアプリをAWSの各サービスを使って段階的に実装をしていくというもの。

Screenshot 2016-12-01 13.42.42.png

こんな。


前提


使うサービス群


  • S3

  • Lambda

  • API Gateway

  • DynamoDB

  • Cognito

  • SES

  • CloudFront

  • IAM


必要なツール

Chromeじゃないとうまく動かない。


対応リージョン


  • US East (N. Virginia)

  • US West (Oregon)

  • EU (Ireland)

ワークショップで使うサービス群が対応しているリージョンが限られてる為(SES等)、上記3つから選択。各サービスのリージョン対応はリージョンテーブルが参考になる

(※)実際にはリージョンを跨いでサービスは呼べるが対応リージョンに絞ったほうがよりシンプル


作業


lab1 - static web site hosting


やる内容

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


構成図

Screenshot 2016-12-06 23.02.36.png


注意点

CloudFrontの作成が遅い。設定ミスを修正すると数十分待たされるので、次のlabにスキップしても問題ない


lab2 - beta sign-up mailing list


やる内容

ベータサービスにユーザがサインアップするメーリングリストを作成。認証のいらないユーザなので、Cognito identity poolとIAM policyを使って、DynamoDBにメールアドレスが書き込まれ、DyanmoDB StreamsからのLambda連携で確認メールをSESを使って配信する。一般ユーザがサインアップ後、確認メールが自身のメールアドレスに届く事を確認する。


構成図

Screenshot 2016-12-06 23.04.41.png


lab3 - administrative interface


やる内容

管理インターフェイスの作成。Cognito user poolを使って管理者を定義し、DynamoDBに記録されている登録ユーザ一覧を取得するLambdaとIAM roleを作成し、API Gateway(GET resource)でLambda Proxy連携とCognito user pool認証を設定してウェブアプリから呼び出せるAPI endpointを作成してウェブアプリ側に埋め込む。ウェブアプリで管理者としてログイン後、登録ユーザ一覧が表示される事を確認。


構成図

Screenshot 2016-12-06 23.05.26.png


lab4 - product update blog


やる内容

管理者がアップデートできるブログ機能の構築。ブログ記事を保存するテーブルをDynamoDBで作成し、記事一覧を取得するLambdaと記事をポストをするLambdaとIAM roleを作成し、API Gateway(GET/POST resource)でLambda Proxy連携とCognito user pool認証を設定してウェブアプリから呼び出せるAPI endpointを作成してウェブアプリ側に埋め込む。ウェブアプリで管理者としてログイン後、記事のポストと最新記事一覧が表示される事を確認。


構成図

Screenshot 2016-12-06 23.09.02.png


その他


  • ワークショップはコンソールでのポチポチ作業とコピペ作業なので(s3アップロードだけcli)1時間もあれば完了する。

  • 新規AWSアカウントならFree tierの範囲内で無料でできる。ワークショップでは$1のクーポンを配ってた。


ソースコードはこちらから

https://github.com/awslabs/aws-serverless-website-workshop