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

セキュリティ・キャンプ サーバーレスハンズオンの裏話 仲山昌宏 （@nekoruri）

仲山 昌宏 / @nekoruri • • • • サーバーレス極振り屋さん 株式会社WHERE （2016-） SecHack365 トレーナー （2017-） セキュリティ・キャンプ 全国大会 講師 （2015-） • 技術系同人誌サークル 「めもおきば」「ssmjp同人部」 • #ssmjp / #qpstudy /#serverlesstokyo • Microsoft MVP (Azure) • Minecrafter (筋肉整地担当) 2

セキュリティ・キャンプ • 「将来の高度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

• https://www.ipa.go.jp/jinzai/camp/2020/zenkoku2020_index.html

今年の担当講義 • 「クラウド時代における分散Webシステムの構成とスケーリング」 • 2015年から担当しているクラウド技術講義の6年目 • 隙を生じぬ三段構え • 座学（昨年度の講義アーカイブのオンライン受講） • 事前学習（ハンズオン） • ハッカソン（当日4時間）

テーマ • メインテーマ • スケーラビリティを考慮したシステム設計 • サブテーマ • 簡単なことを簡単に実現するサーバーレス技術 • モブプログラミングによる協調作業

事前ハンズオン＋ハッカソン • 事前ハンズオン • 提供したサンプルプログラムを、自分の環境で動かす • 各自の開発環境の整備 • 基本的な開発操作の素振り • ハッカソン（7人程度×5グループ） • ユースケースをより具体的に想定し、スケールさせるうえでの課題と、 それを解決する設計を考える • 時間内にできる限り実装して、その設計を検証する • どんな設計をしたかを発表し、それに対して議論する

「サンプルプログラム」 • 技術ゴール • タイムライン型システムを通じてスケーラビリティを議論する • HTML＋API、アクセス管理、データベース • 重要ポイント • • • • • ハッカソンに必要な要素技術を体験できる 体験して欲しい技術に集中する 平易さを保つ 特定の技術に固有のコトを知って欲しいわけではない リモートでの作業共有がしやすい

サンプルプログラムの構成 • Azure Static Web Apps • 性的静的コンテンツ(※)の提供 • Docs: Azure Static Web Apps • Azure Functions • APIの提供 • APIに付随するログイン機能の提供 • Docs: Azure Functions • Cosmos DB • データの保存先となる分散データストア ※ Qiita: AWSのS3で性的Webサイトを公開する手順まとめ

• https://docs.microsoft.com/ja-jp/azure/static-web-apps/?WT.mc_id=AZ-MVP-5002273
• https://docs.microsoft.com/ja-jp/azure/azure-functions/?WT.mc_id=AZ-MVP-5002273
• https://qiita.com/nekoruri/items/817d9fefa9af4e8b41e1

もともと考えていた構成（しくじり1） • Azure Static Web Apps（＋組み込みのFunctions） • • • • 静的コンテンツの提供 APIの提供（API support） ログイン機能の提供（Authentication and authorization） とにかくシンプル • 欠点 • 【勘違い】任意のOutput bindingが使えないと思い込んでいた • 今後の発展で任意のトリガーについても触れたいが未対応

• https://docs.microsoft.com/ja-jp/azure/static-web-apps/apis?WT.mc_id=AZ-MVP-5002273
• https://docs.microsoft.com/ja-jp/azure/static-web-apps/authentication-authorization?WT.mc_id=AZ-MVP-5002273

当日の一部の構成（しくじり2） • Static Web Appsの上限に引っかかった • プレビューリリースなので引き上げできない！ • Netlifyの並行利用 • どうせ静的コンテンツだけなので、 あわてて動作確認してNetlifyでの手順を紹介 • サーバーサイドもStatic Web Appsしてたら危なかった……

フロントエンド • 複雑なことをしない • フロントエンド沼を楽しんでもらう講義ではない • 入口の知識が少ない人でも手軽にハックして欲しい • 割り切った簡単構成 • 各自forkしたGitHub repoからStatic Web Appsに自動デプロイ • 漢らしくビルド不要の生JavaScript • フロント側はログイン管理をしない（表示出し分け等はしない）

Azure Static Web Apps • NetlifyやGitHub Pagesみたいなやつ • • • • カスタムドメイン＋自動HTTPS証明書 Azure Functinosのサブセットを内蔵（しているが今回不使用） 認証機能とパスごとの保護が可能（今回不使用） GitHub repoを登録すると GitHub Actionsが設定される

アクセス管理 • 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に対応

• https://docs.microsoft.com/ja-jp/azure/app-service/overview-authentication-authorization?WT.mc_id=AZ-MVP-5002273
• https://docs.microsoft.com/ja-jp/azure/app-service/configure-authentication-provider-aad?WT.mc_id=AZ-MVP-5002273

サーバーサイド • Azure Functionsの関数として実装 • ハッカソンに必要な技術要素の紹介 • リクエストボディの取得、レスポンスの生成 • ログインユーザの取得 ⇒ req.headers['x-ms-client-principal-name'] • CosmosDB SDKを利用したクエリ ⇒ @azure/cosmos • Output bindingを利用したCosmos DBへの保存 ⇒ context.bindings.outputDocument = {…}

Cosmos DB • 今回の講義の本質的存在 • 座学パートで基礎から学習した分散DBのキーパーティショニングを、 現実のデータストアで体感し、それに根ざした設計を考えてもらう。 • クエリが消費したRU(要求ユニット)をすぐに確認可能 （Azure Portal経由、あるいはSDKにおけるレスポンス） ⇒ 設計した結果を検証しやすい

当日のスライド Cosmos DB • 分散データベース • うまくつかえば地球規模のスケーラビリティ • 様々なデータモデル（今回は単純なドキュメントＤＢを利用） • ＲＵ（要求ユニット）に対して課金される • ＩＤとパーティションキーを指定した1KBの読み取りが1RU • Azure Cosmos DB の要求ユニット • パーティションキーをどう選ぶかが重要 • Azure Cosmos DB Performance Tips • 消費したRUを確認する • timelineアプリには確認用にCosmos DBからの戻り値をログ出力 しているので、x-ms-request-charge として確認可能 • Azure Portal上でクエリを実行してみて確認

• https://docs.microsoft.com/ja-jp/azure/cosmos-db/request-units?WT.mc_id=AZ-MVP-5002273
• https://eventmarketing.blob.core.windows.net/mstechsummit2018-after/DA13_PDF_TS18.pdf

事前ハンズオンの進捗確認 • Googleスプレッドシートで #進捗どうですか？ • 全員の進捗が一覧されることで煽る意図もあったりなかったり

「全員リモート」でのグループワーク • Google Meet（協議会から参加者全員に提供） • 全体の部屋＋チーム別の部屋 • 全体部屋はミュートしたまま、参加者には「二窓」してもらう • 講師・チューターは各部屋を行ったり来たりしてお手伝い • モブプログラミング形式を推進 • VS Code Live Share（あくまで紹介にとどめる） • これのためにハンズオンは全てVS Codeベースで手順化してある • 最終的に2チームがLive Shareを利用 • Googleスライドで各チームの発表 • スプレッドシートで各チームへのコメントを書いてもらう

当日のスライド モブプログラミング • チーム「全員」で「同じ作業」に向かう • 分担では無く共同作業 出典：https://speakerdeck.com/takaking22/mob-programming-startup-manual-number-mobprogramming-number-mobupuro

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

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

おまけ：コスト

おまけ2 • 追加課題、「いる」「ほしい」計100%だったのでなにか出す予定

まとめ • セキュキャンをよろしく！ • おちかくのU22におつたえください • 会員企業は見学可能、個人で参加できる会員プログラムもあります(小声） • https://www.security-camp.or.jp/ • Azureでもいろいろ便利な道具が来ました！ • Static Web Apps • 組み込みの簡単認証機能 • 簡単なことをより簡単に！ • モブプログラミングいいよ！ • VS Code Live Shareは便利

• https://www.security-camp.or.jp/

配布資料 • 事前課題ハンズオン資料 • https://gist.github.com/nekoruri/6b638b4ca551552480b9d3de3bb61151 • 講義スライド • https://www2.slideshare.net/nekoruri/seccamp2020-b3-scalable-web-system

• https://gist.github.com/nekoruri/6b638b4ca551552480b9d3de3bb61151
• https://www2.slideshare.net/nekoruri/seccamp2020-b3-scalable-web-system