2017年11月2日に行われたServerlessconf Tokyo 2017 1日目、ワークショップに参加してきました。

私が参加したのはA Cloud Guru(あ、じゃなくて、えーくらうどぐるーと読むらしい）ご提供の
Build your own serverless video sharing website という LambdaやAPI Gateway、S3、Elastic Transcoder、
Firebase、Auth0といったサービスを駆使して、YouTube ライクなwebサイトをつくるワークショップです。

コードや手順はGitHubに公開されおり、どなたでも試すことができます。
https://github.com/ACloudGuru/serverless-workshop

WebサイトからS3にアップロードされた動画を変換するパイプラインの作成や
Firebaseを使用して処理結果をリアルタイムにブラウザに反映するなどの実装が、
1からチュートリアル形式で進めることができます。

https://github.com/ACloudGuru/serverless-workshop/raw/master/lab-5/Lesson%205.pdf より

各サービスのことはなんとなく分かっていても、それらを糊付けしてサーバレスなアーキテクチャを構成する力が
圧倒的に足りていない私には貴重な経験となりました。
全5章で構成されており、かなりのボリュームがあるため、全てを手順通りに行うと半日～一日はかかります。
また各章末には追加のお題があり、初心者以外の方も楽しめるのではないでしょうか。

各章の概要

事前準備

AWSアカウント、Googleアカウントの他に、作業端末にNode.js v6.x のインストールが必要です。
Windows環境な私は事前にNodistというツールを使ってインストールを行いました。
https://qiita.com/satoyan419/items/56e0b5f35912b9374305

> nodist -v
0.8.8

# Node.js v6の最新版をインストール
> nodist 6
> node -v
v6.11.5

#Node.jsのバージョンに対応したnpmの最新化
> nodist npm match
> npm -v
3.10.10

Lesson 1.

動画アップロード用、変換済動画格納用の2つのバケットを作成し、ポリシーを設定
Elastic Transcoderのパイプラインを作成
パイプラインをキックするLmabdaファンクションをデプロイし、S3トリガーを設定する

参考URL
http://docs.aws.amazon.com/ja_jp/elastictranscoder/latest/developerguide/pipeline-settings.html
http://docs.aws.amazon.com/ja_jp/elastictranscoder/latest/developerguide/system-presets.html

Lesson 2.

認証・認可のサービスをクラウドで提供している、Auth0のアカウントを登録
webサイトのconfig.jsにAuth0アカウントで作成したドメイン、ClientIdを設定
webサイトをローカルで起動し、Auth0によるサインアップとユーザログインをテストする

参考URL
https://qiita.com/furuth/items/68c3caa3127cbf4f6b77
https://auth0.com/docs/clients/client-settings

Lesson 3.

Auth0からユーザ情報を取得するLambdaファンクションをデプロイ
API Gatewayでユーザ情報取得用のリソースを作成し、Getメソッドで上記ファンクションを呼び出す
API Gatewayでカスタムオーソライザーを使用するためのLambdaファンクションをデプロイ
ユーザ情報取得時にカスタムオーソライザーを呼び出すよう、API Gatewayを設定する

API Gateway作成時にCORSを有効化しておく。
カスタムオーソライザーを使用することでAuth0の認証情報を元にAPI Gatewayに届いたリクエストを認可するか判断させることができる。
Lambdaファンクションの環境変数に、Auth0のsecretを設定するが、コピペミスでユーザ情報取得が正常に動作せずハマってしまった。

参考URL
http://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/use-custom-authorizer.html
http://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-cors.html
https://auth0.com/docs/api/authentication#user-profile15

Lesson 4.

WebサイトからS3にファイルをアップロードできるようにポリシーを返す、Lambdaファンクションをデプロイする
動画アップロード用バケットへのPutObject権限を持ったIAMユーザを作成する
Lambdaファンクションの環境変数にバケット名やIAMユーザのアクセスキー情報を設定する
API Gatewayで新たなリソースを作成し、Getメソッドで上記ファンクションを呼び出すように設定する
WebサイトからS3に直接ファイルをアップロードできるようにバケットのCORSを有効にする

Lesson 3同様にGetメソッドに対し、カスタムオーソライザーを設定する
ここまでの作業でWebサイトから動画をアップロードすると、Elastic Transcoderジョブがキックされ、
変換された動画が、変換済み動画格納用のバケットに作成されていることが確認できる

参考URL
http://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/cors.html

Lesson 5.

Firebaseの新規プロジェクトで空のデータベースを作成する
FirebaseのRulesを編集して、ユーザにデータの読取りを許可する
WebサイトがFirebaseにアクセスできるようにconfigコードをアプリに埋め込む
LambdaファンクションがFirebaseにアクセスできるようにサービスアカウントを作成する
Lesson 1で作成した動画変換のためのLambdaファンクションをFirebase対応済みのものに差し替える
変換した動画のURLをFirebaseに書き込むLambdaファンクションをデプロイする
変換済動画格納用バケットにファイルが追加された時に上記ファンクションが起動するようトリガーを設定する

以上によりWebサイト上でアップロード、変換された動画を閲覧できるようになります。
Firebaesのリアルタイムデータベース機能を使用することで、WebサイトはDB側の更新(変換終了、およびS3のURL）
をダイレクトに受取ることができます。
ローカルで実行しているWebサイトのリソースをS3上に静的ウェブサイトホスティングすれば、
構築した環境をインターネット上に公開することも可能です。

参考URL
https://firebase.google.com/docs/database/security/?hl=ja
https://firebase.google.com/docs/web/setup
https://cloud.google.com/iam/docs/service-accounts?hl=ja

最後に

このworkshop以外にも他にも3つのworkshopが公開されており、時間を見つけてチャレンジしたいと思います。

最後になってしまいましたが、運営、スタッフのみなさま、スポンサーのみなさま、このような機会をありがとうございました。

以上です。

Serverlessconf Tokyo 2017 のワークショップに参加してきました(A Cloud Guru)