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

7219 ワード
Firebase Auth0 serverless AWS AWS テキストリンク

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が公開されており、時間を見つけてチャレンジしたいと思います。

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

以上です。