Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

セキュリティ・キャンプ サーバーレスハンズオンの裏話 #serverlessjp

2020-11-18 Serverless Meetup Japan Virtual #11 #severlessjp
https://serverless.connpass.com/event/195084/

  • Login to see the comments

セキュリティ・キャンプ サーバーレスハンズオンの裏話 #serverlessjp

  1. 1. セキュリティ・キャンプ サーバーレスハンズオンの裏話 仲山昌宏 (@nekoruri)
  2. 2. 仲山 昌宏 / @nekoruri • サーバーレス極振り屋さん • 株式会社WHERE (2016-) • SecHack365 トレーナー (2017-) • セキュリティ・キャンプ 全国大会 講師 (2015-) • 技術系同人誌サークル 「めもおきば」「ssmjp同人部」 • #ssmjp / #qpstudy /#serverlesstokyo • Microsoft MVP (Azure) • Minecrafter (筋肉整地担当) 2
  3. 3. セキュリティ・キャンプ • 「将来の高度IT人材」を発掘、育成するための事業 • セキュリティ・キャンプ協議会と情報処理推進機構(IPA)が主催 • 例年は、8月に5日間の合宿形式で全国大会を実施 (この先は全国大会の話をします) • 22歳以下の学生から応募選考 • 毎年80人程度、2019年度まで計824名を輩出 • 2020年度:セキュリティ・キャンプ全国大会2020 オンライン • 10/18~12/6の毎週末にオンライン開催 • https://www.ipa.go.jp/jinzai/camp/2020/zenkoku2020_index.html
  4. 4. 今年の担当講義 • 「クラウド時代における分散Webシステムの構成とスケーリング」 • 2015年から担当しているクラウド技術講義の6年目 • 隙を生じぬ三段構え • 座学(昨年度の講義アーカイブのオンライン受講) • 事前学習(ハンズオン) • ハッカソン(当日4時間)
  5. 5. テーマ • メインテーマ • スケーラビリティを考慮したシステム設計 • サブテーマ • 簡単なことを簡単に実現するサーバーレス技術 • モブプログラミングによる協調作業
  6. 6. 事前ハンズオン+ハッカソン • 事前ハンズオン • 提供したサンプルプログラムを、自分の環境で動かす • 各自の開発環境の整備 • 基本的な開発操作の素振り • ハッカソン(7人程度×5グループ) • ユースケースをより具体的に想定し、スケールさせるうえでの課題と、 それを解決する設計を考える • 時間内にできる限り実装して、その設計を検証する • どんな設計をしたかを発表し、それに対して議論する
  7. 7. 「サンプルプログラム」 • 技術ゴール • タイムライン型システムを通じてスケーラビリティを議論する • HTML+API、アクセス管理、データベース • 重要ポイント • ハッカソンに必要な要素技術を体験できる • 体験して欲しい技術に集中する • 平易さを保つ • 特定の技術に固有のコトを知って欲しいわけではない • リモートでの作業共有がしやすい
  8. 8. サンプルプログラムの構成 • Azure Static Web Apps • 性的静的コンテンツ(※)の提供 • Docs: Azure Static Web Apps • Azure Functions • APIの提供 • APIに付随するログイン機能の提供 • Docs: Azure Functions • Cosmos DB • データの保存先となる分散データストア ※ Qiita: AWSのS3で性的Webサイトを公開する手順まとめ
  9. 9. もともと考えていた構成(しくじり1) • Azure Static Web Apps(+組み込みのFunctions) • 静的コンテンツの提供 • APIの提供(API support) • ログイン機能の提供(Authentication and authorization) • とにかくシンプル • 欠点 • 【勘違い】任意のOutput bindingが使えないと思い込んでいた • 今後の発展で任意のトリガーについても触れたいが未対応
  10. 10. 当日の一部の構成(しくじり2) • Static Web Appsの上限に引っかかった • プレビューリリースなので引き上げできない! • Netlifyの並行利用 • どうせ静的コンテンツだけなので、 あわてて動作確認してNetlifyでの手順を紹介 • サーバーサイドもStatic Web Appsしてたら危なかった……
  11. 11. フロントエンド • 複雑なことをしない • フロントエンド沼を楽しんでもらう講義ではない • 入口の知識が少ない人でも手軽にハックして欲しい • 割り切った簡単構成 • 各自forkしたGitHub repoからStatic Web Appsに自動デプロイ • 漢らしくビルド不要の生JavaScript • フロント側はログイン管理をしない(表示出し分け等はしない)
  12. 12. Azure Static Web Apps • NetlifyやGitHub Pagesみたいなやつ • カスタムドメイン+自動HTTPS証明書 • Azure Functinosのサブセットを内蔵(しているが今回不使用) • 認証機能とパスごとの保護が可能(今回不使用) • GitHub repoを登録すると GitHub Actionsが設定される
  13. 13. アクセス管理 • Azure Functions(の基盤Web Apps)の認証機能 • 様々なIDプロバイダー(※)でのログイン連携が可能 • サインインエンドポイント(/.auth/login/aad)で認証フローが始まり、 APIドメインのCookieに認証トークンを保存 • 関数実行前に自動で認証トークンを検証し、結果を引数に設定 • Ajax呼び出し時にCookieを送る必要がある • Docs: • Azure App Service および Azure Functions での認証と承認 • Azure AD ログインを使用するように App Service または Azure Functions アプリを構成する ※ Azure ADのほか、Facebook、Google、Microsoftアカウント Twitter、OpenID Connectに対応
  14. 14. サーバーサイド • Azure Functionsの関数として実装 • ハッカソンに必要な技術要素の紹介 • リクエストボディの取得、レスポンスの生成 • ログインユーザの取得 ⇒ req.headers['x-ms-client-principal-name'] • CosmosDB SDKを利用したクエリ ⇒ @azure/cosmos • Output bindingを利用したCosmos DBへの保存 ⇒ context.bindings.outputDocument = {…}
  15. 15. Cosmos DB • 今回の講義の本質的存在 • 座学パートで基礎から学習した分散DBのキーパーティショニングを、 現実のデータストアで体感し、それに根ざした設計を考えてもらう。 • クエリが消費したRU(要求ユニット)をすぐに確認可能 (Azure Portal経由、あるいはSDKにおけるレスポンス) ⇒ 設計した結果を検証しやすい
  16. 16. Cosmos DB • 分散データベース • うまくつかえば地球規模のスケーラビリティ • 様々なデータモデル(今回は単純なドキュメントDBを利用) • RU(要求ユニット)に対して課金される • IDとパーティションキーを指定した1KBの読み取りが1RU • Azure Cosmos DB の要求ユニット • パーティションキーをどう選ぶかが重要 • Azure Cosmos DB Performance Tips • 消費したRUを確認する • timelineアプリには確認用にCosmos DBからの戻り値をログ出力 しているので、x-ms-request-charge として確認可能 • Azure Portal上でクエリを実行してみて確認 当日のスライド
  17. 17. 事前ハンズオンの進捗確認 • Googleスプレッドシートで #進捗どうですか? • 全員の進捗が一覧されることで煽る意図もあったりなかったり
  18. 18. 「全員リモート」でのグループワーク • Google Meet(協議会から参加者全員に提供) • 全体の部屋+チーム別の部屋 • 全体部屋はミュートしたまま、参加者には「二窓」してもらう • 講師・チューターは各部屋を行ったり来たりしてお手伝い • モブプログラミング形式を推進 • VS Code Live Share(あくまで紹介にとどめる) • これのためにハンズオンは全てVS Codeベースで手順化してある • 最終的に2チームがLive Shareを利用 • Googleスライドで各チームの発表 • スプレッドシートで各チームへのコメントを書いてもらう
  19. 19. モブプログラミング • チーム「全員」で「同じ作業」に向かう • 分担では無く共同作業 出典:https://speakerdeck.com/takaking22/mob-programming-startup-manual-number-mobprogramming-number-mobupuro 当日のスライド
  20. 20. モブプログラミング • 15~20分くらいでドライバー(操作担当)を交代 ⇒いつでも作業を共有できる状態を保つことが重要 画面共有やVSCode Live Shareなどを上手く使ってください。 • 作業内容はどんどんGitHubに上げていく • 議論や結論もその場でドキュメントに書いて共有 • Google DocumentやGitHub Wiki等を活用 • 苦手な作業があればチーム内で手助けしあう(暗黙知の共有) 当日のスライド
  21. 21. おまけ:コスト
  22. 22. おまけ2 • 追加課題、「いる」「ほしい」計100%だったのでなにか出す予定
  23. 23. まとめ • セキュキャンをよろしく! • おちかくのU22におつたえください • 会員企業は見学可能、個人で参加できる会員プログラムもあります(小声) • https://www.security-camp.or.jp/ • Azureでもいろいろ便利な道具が来ました! • Static Web Apps • 組み込みの簡単認証機能 • 簡単なことをより簡単に! • モブプログラミングいいよ! • VS Code Live Shareは便利
  24. 24. 配布資料 • 事前課題ハンズオン資料 • https://gist.github.com/nekoruri/6b638b4ca551552480b9d3de3bb61151 • 講義スライド • https://www2.slideshare.net/nekoruri/seccamp2020-b3-scalable-web-system

×