ハッカソンについて(分散アーキテクチャ時代におけるWebシステムの開発と運用) #seccamp

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

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

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

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

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

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

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

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を返すよう設定 8

• https://github.com/auth0-samples/auth0-javascript-samples

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

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

• 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

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

• 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/DocumentClient.html

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

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

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

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

• https://speakerdeck.com/takaking22/mob-programming-startup-manual-number-mobprogramming-number-mobupuro

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

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