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

>100 Views

September 30, 21

スライド概要

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

【本講義は以下の4つから構成されます】

イントロダクション
https://www.docswell.com/s/nekoruri/5WGY1K-seccamp2021b3-introduction

クラウドシステムをセキュアに開発運用する勘所
https://speakerdeck.com/azara/sekiyuriteikiyanpuquan-guo-da-hui-2021-onrain-b3-fen-san-akitekutiyashi-dai-niokeruwebsisutemufalsekai-fa-toyun-yong-shi-qian-zi-liao-kuraudosisutemuwosekiyuanikai-fa-yun-yong-surukan-suo

クラウド時代のものづくり
https://www.docswell.com/s/nekoruri/ZD3QDK-seccamp2021b3-cloudnative

ハッカソンについて
https://www.docswell.com/s/nekoruri/KRY725-seccamp2021b3-hackathon

profile-image

NAKAYAMA Masahiro

@nekoruri

スライド一覧

秋葉原生まれ大手町育ちの歌って踊れる江戸っ子インフラエンジニア。 0と1が紡ぐ「ゆるやかなつながり」に魅せられ早20年、 SNSとCGMの力で世界を幸福にするのがライフワーク。 市民、幸福は義務です。 あなたは幸福ですか?

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

⏱おしながき 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