セキュリティ・キャンプ全国大会2021 オンライン 分散アーキテクチャ時代におけるWebシステムの開発と運用 ハッカソンについて

1. 【B3】
分散アーキテクチャ時代における
Webシステムの開発と運用
講師 仲山 昌宏・齋藤 徳秀
セキュリティ・キャンプ全国大会2021 オンライン
ハッカソンについて

2. 2
今日のハッカソンについて
• お題
• サンプルアプリをベースに
複数のユーザーがコミュニケーションできる
高信頼なWebシステムを想定してつくってください
• 例：Twitterクローン
• やってほしいこと
• 具体的なユースケースを決める
• 大規模な利用を想定し、スケーラビリティやセキュリティにおいて
なにが課題となるかを考える
• それを解決する設計を示し、できるかぎり実装しそれを検証する
• 実装はモブプログラミング形式で全員参加する
• どんな設計をしたかを全体で発表する
みんながんばれ

3. 3
ハッカソンの進め方
• 序盤
• 最初の30分でお互いを知る
• その次の30分で何をつくるか決める
• ➡ モブプログラミングに慣れよう
• 中盤
• うまくポイントを絞って作り込もう
• 終盤
• 魅せポイントを作りきる
• デモ＆発表準備！

4. 4
発表について
• 持ち時間15分で発表してください
• 発表者は代表一人、複数人持ち回り、どちらでもOK
• Googleスライドで発表資料を作成、SlackでURL共有
• 面白くてOKですが過度にネタに走らなくてよいです
• 発表しているチーム以外の人は、
シートを用意するのでコメントを書いてください
• 可能であれば作ったもののデモを入れてください
• ラスト1時間くらいから手を付けはじめると良いです

5. 5
発表について
• 必ず入れて欲しい内容
• 想定した利用ケースと、スケーラビリティ・セキュリティ上の課題
• その課題を解決するために考えた設計
• どこまで実装できたか、検証できたか
• ヒント
• 設計を数値で裏付ける
• コストとユースケースのバランスを取る
• 実装してわかった課題に立ち向かう
• 運用時の視点を持つ

6. 6
👀👀 今回のデモアプリについて
• サーバーレスアーキテクチャで構成された
簡単なタイムライン型SNS（Twitterのようなもの）
の基本部分が実装されています。
• 含まれている機能
• DynamoDBへの保存と読み込み
• S3へのファイル保存
• Auth0/JWTによる認証・認可
ここには、補足情報を書
いていきます。

7. 7
全体像
Netlify
HTML/JS
API Gateway AWS Lambda
GET API
POST API
JWT
Authorizer
Auth0
ブラウザ
クライアント
アプリ
API呼出し
認証
Userinfo API
S3
画像
画像保存
DynamoDB

8. 8
Frontend
• Auth0のサンプルアプリをベースにしています
• https://github.com/auth0-samples/auth0-javascript-samples
• 素のJavaScriptで実装
• 3つのAPI呼び出しを実装
• ログイン中ユーザーの投稿一覧(GET /)
• ユーザー名を指定した投稿一覧(GET /?user=username)
• 新規投稿(POST /)
• UIまわり注意ポイント
• SPAで画面切り替え
• class="page”がタブの中身
• public/_redirectsで
/profileにindex.htmlを返すよう設定

9. 9
API
• ポイント
• 投稿をDynamoDBに保存、画像をS3に保存
• JWT AuthorizerでAuth0のトークンを検証
• userinfo APIでログインユーザーの情報を取得
• Serverless Frameworkで必要リソースを管理
• DynamoDBテーブル
• S3バケット

10. 10
DynamoDB
• スケーラブルな分散データベース
• ドキュメント指向の
キーバリューストア（KVS）
• 必須のパーティションキー
を指定してデータを取得
• 追加でソートキーも
指定可能
https://d1.awsstatic.com/events/jp/2017/summit/slide/D3T3-4.pdf
https://www.slideshare.net/AmazonWebServicesJapan/aws-black-belt-
online-seminar-2018-amazon-dynamodb-advanced-design-pattern

11. 11
DynamoDB
• 読み込み/書き込みそれぞれ「CapacityUnits」で
「確保する性能」を設定
• 読み込み：1秒あたりの読み込み項目数 x 項目のサイズ
• 書き込み：1秒あたりの書き込み項目数 x 項目のサイズ
• 設定より多く利用されたらエラーが返る
• サンプルアプリでは読み書きどちらも1(最小値）
• 追加のインデックス
• LSI：規定のソートキーに加えて別のキーのインデックス
• GSI：パーティションを跨いだインデックス
• 詳しくはAWSの資料を参照
• https://www.slideshare.net/AmazonWebServicesJapan/20170809-black-belt-
dynamodb
• https://www.slideshare.net/AmazonWebServicesJapan/aws-black-belt-online-seminar-
2018-amazon-dynamodb-advanced-design-pattern
• https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB/DocumentCli
ent.html (API)
たとえば、フォローして
いる全員の新着投稿を
一気に取得したいなら、
どのようにデータモデル
を設計すれば良いでしょ
うか。
GSIなど追加インデック
スは便利ですが、使い方
によっては費用が2倍に
なってしまったりします。
仕様とコストをどのよう
にうまく設計するのが
腕の見せ所です。

12. 12
DynamoDB
• サンプルアプリでは以下のように使用
• パーティショニングキー：username(文字列）
• ソートキー：created_at(数値）
※unixtimeを格納
• パーティショニングキー（username）を指定してアクセス
• LSI/GSIは使用せず
• 読み込み時にScanIndexForward: falseでソートキー逆順
サンプルアプリではPut
とQueryを投げていま
す。ソートキーまで指定
すればGetができます。

13. 13
S3
• 投稿された画像を保存
• Lambdaから記録、表示はS3から直接提供
• username_timestamp
• 保存時にACL: 'public-read’を指定することで
認証無しでの読み込み可能に
• 保存後に画像URLをDynamoDBに保存
Lambda経由のアップ
ロードには、その仕様に
よってファイルサイズの
制限などの制限が発生
します。
たとえばブラウザから
S3に直接アップロード
するように作る事もで
きます。

14. 14
Auth0
• 認証（auth0-spa-js）
• OpenID Connectで認証
• Auth0 SDKがローカルストレージに状態格納
• API認可
• auth0.getTokenSilently()でアクセストークン取得
• アクセストークンをヘッダに入れてAPIリクエスト
• API側はJWT Authorizerでアクセストークンを検証
• ログインユーザー情報取得
• アクセストークンを使ってAuth0のuserinfo API呼び出し
ログイン周りはapp.js
の8行目以降、API呼び
出しは79行目以降にあ
ります。
細かい面倒な部分は
auth0-spa-jsがやっ
てくれるので、自前で実
装するのはアクセストー
クンを使ってAPIを投げ
る部分くらいです。

15. 15
モブプログラミング
• チーム「全員」で
「同じ作業」に立ち向かう
• 分担では無く共同作業
https://speakerdeck.com/takaking22/mob-programming-startup-manual-number-mobprogramming-number-mobupuro

16. 16
モブプログラミング
• 15～20分くらいでドライバー（操作担当）を交代
⇒いつでも作業を共有できる状態を保つことが重要
• 作業内容はどんどんGitHubに上げていく
• 議論や結論もその場でドキュメントに書いて共有
• JamboardやGoogle Documentを活用
• 苦手な作業はチーム内で手助けしあう（暗黙知の共有）

17. 17
⏱おしながき
08:30～09:30 講義（1） // Azaraさん担当回
09:30～10:00 ハッカソン説明
10:00～12:30 ハッカソン
12:30～13:30 おひるやすみ
13:30～14:30 講義（2） // 仲山担当回
14:30～16:20 ハッカソンのつづき
16:30～17:15 発表×3チーム
17:15～17:30 まとめ