BtoB SaaS開発基礎講座

Slide 1

Slide 1 text

Slide 2

Slide 2 text

まずは︕︕︕ 2 本⽇はなるべくインタラクティブにやりたいと思います︕ 右のURLにアクセスお願いします。まずは練習で、「ハロー︕」とか打ってみてください〜︕ いろいろ質問するので、ここから答えてみてください〜︕ 講義内限り

Slide 3

Slide 3 text

⾃⼰紹介 3 ⽮ヶ崎哲宏(Akihiro YAGASAKI) 株式会社アンチパターン取締役 CTO兼COO 役割︓⽇本のソフトウェアエンジニアを憧れの職業にするためのいろいろ経歴︓アマゾンウェブサービスジャパンにて SaaSシニアパートナーソリューションアーキテクト Webメディア/SaaSベンダーにて技術責任者ボードメンバー⼤⼿SIerグループ会社にて情シス責任者アニメソングのコーラスなど 2022, 2023, 2024 Japan AWS Top Engineers (Software) 1975年⽣まれ

Slide 4

Slide 4 text

本⽇のゴール 4 「SaaSって、こんなこと考えないといけないんだな〜〜〜」っていうのをほんのりわかってもらって、本当の仕事の場⾯でこういうのが必要になった時に、「あ、そういえばSaaSってそういうの必要だって⾔ってたな〜チームでいろいろ試⾏錯誤してたわそういえば」って思いだしてもらえるようにする︕ ※そのため、厳密には間違ってるけどだいたい雰囲気をわかってもらう系で⾏きます︕

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

チームの準備今⽇はみなさんのロールもスキルもバラバラですなので、チームで助け合い＆話し合いをして進めてみましょう︕ ということで、まずはお互いに⾃⼰紹介してください〜︕(3分) 例（全然このとおりじゃなくてOKです）・名前・会社名・役割（フロントエンジニアとかデータサイエンティストとか）・CTO協会新⼈研修で持ち帰りたいもの・好きなSaaS などなど

Slide 8

Slide 8 text

GitHub の準備 https://github.com/yaggytter/sampleapp-basic-chat ここにアクセスして、「.」(ドット)キーを押してみてください︕エディタ(VSCode)の画⾯になります GitHubにログインした後に、

Slide 9

Slide 9 text

GitHub の準備 - 2 エディタ(VSCode)が表⽰されたら、左上の三本線=> ターミナル=> 新しいターミナルを押し画⾯下の GitHub Codespaces で作業を続⾏けるを押す

Slide 10

Slide 10 text

GitHub の準備 - 3 画⾯上の⽅の、 2 cores なんたらを選ぶそしてしばらく待つ・・・

Slide 11

Slide 11 text

GitHub の準備 - 3 右下のShellの画⾯で cd ./php/laravel/ ./init.sh を実⾏して、しばらく待つこんな感じのが出ればOK

Slide 12

Slide 12 text

Slide 13

Slide 13 text

© 2024 Anti-Pattern Inc. All rights reserved. 会社の紹介「⽇本のソフトウェアエンジニアを憧れの職業へ」を掲げるスタートアップ企業概要会社名株式会社アンチパターン (Anti-Pattern Inc.) 設⽴ 2019年7⽉1⽇代表者⼩笹佑京 (おざさゆうき) 所在地東京都港区南⻘⼭3-15-9 MINOWA表参道3階資本⾦ 65,000千円主要株主⼩笹佑京決算期 6⽉公式WEB/SNS https://anti-pattern.co.jp / X : @antipatterninc SaaSコントロールプレーンをSaaSとして機能提供 B2B SaaSの開発/運⽤/販売を⽀援するSaaS 様々な企業に対するソフトウェア開発の⽀援事業アジャイルのアプローチでプロダクト価値を最⼤化ソフトウェア開発⽀援優秀なエンジニアと、⾼付加価値/⾼単価な案件を依頼したい企業のマッチングサービス AWSエンジニア特化型マッチングサービス Webアプリケーションをテーマにソフトウェア開発を4年間かけて学びデジタルネイティブ⼈材を輩出⼤学⽣向けプログラミング学習コミュニティソフトウェアエンジニアに必要な場を提供エンジニア向け勉強会/交流会/セミナーなども実施エンジニア特化型コミュニティスペース実務シミュレーションによるエンジニアのスキル可視化、実⼒向上を図る。実技型試験サービス AWSエンジニアのスキルチェックサービス 13

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

改めて SaaS とは https://www.ipa.go.jp/security/reports/oversea/nist/ug 65p90000019cp4-att/000025366.pdf NIST によるクラウドコンピューティングの定義より引⽤元︓ NIST によるクラウドコンピューティングの定義

Slide 18

Slide 18 text

改めて SaaS とは https://www.ipa.go.jp/security/reports/oversea/nist/ug 65p90000019cp4-att/000025366.pdf NIST によるクラウドコンピューティングの定義より引⽤元︓ NIST によるクラウドコンピューティングの定義むずい

Slide 19

Slide 19 text

雑に改めて SaaS とはインターネット越しにソフトウェア(アプリケーション) をサービスとして利⽤できるようにしたもの

Slide 20

Slide 20 text

雑に改めて SaaS とはインターネット越しにソフトウェア(アプリケーション) をサービスとして利⽤できるようにしたものここで質問 SaaS と聞いて思いつくサービスは︖

Slide 21

Slide 21 text

SaaS と⾔えば

Slide 22

Slide 22 text

BtoC と BtoB BtoC BtoB BtoG BtoE ※分類の仕⽅はあくまでも例です

Slide 23

Slide 23 text

SaaS の活⽤メリット営業管理ソフト会計ソフト労務ソフト営業管理 SaaS 会計 SaaS 労務 SaaS コスト & リスクコスト & リスク => 割り勘効果を得ている⾃社開発 & パッケージソフト SaaS 利⽤ 23

Slide 24

Slide 24 text

SaaSビジネスに関しては、⽇本語で読める良質な情報が増えてきている

Slide 25

Slide 25 text

© 2024 Anti-Pattern Inc. All rights reserved. ⽇本でのSaaS Tech系イベント昨年からちょっと増えてきましたマイクロサービス、マルチテナント、認証認可、信頼性、UI/UXなど SaaS Tech のお話中⼼ SaaS Tech に関しては⽇本語で読める情報はまだまだ少ない https://saas-tech.connpass.com/event/243204/ https://btob-tech.connpass.com/event/247407/

Slide 26

Slide 26 text

SaaS の開発/運⽤ではビジネスとテックが⼀体化する必要がある Biz Dev Ops ⼀体となって価値を届け続ける⾃社SaaSビジネスにとって価値のある実装とはなにか︖ 運⽤コストを抑えられる作りにできているか︖ 素早く改善できるか︖ 可⽤性やセキュリティ、性能はお客様に影響をあたえてないか︖ 利⽤者この機能をつけるのはどれくらいの難易度か︖ 不具合が発⽣しずらいか︖ アプリケーションが作りやすい環境にできているか︖ 運⽤コストが増えすぎない料⾦プラン体系か︖

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Vertical (垂直) •⼀般的には下記の軸で整理されることが多い B2B SaaSの⼀般的な軸について 29 Horizontal(⽔平) 業界を問わず⾏われる業務に対し価値を提供 ex)⼈事労務、会計⼩売製造業⾦融 Vertical (垂直) Vertical (垂直) 業界特化の業務に対して価値を提供

Slide 30

Slide 30 text

Horizontal Vertical 参照元︓https://onecapital.jp/perspectives/horizontal-landscape-2022 https://onecapital.jp/perspectives/vertical-landscape-2022 •⽇本国内だけでも数多くのSaaSが市場に存在している SaaS市場のカオスマップ 30 「業界」という概念がこれらのSaaSを分類する指標になっている。

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

© 2024 Anti-Pattern Inc. All rights reserved. SaaS 開発/運⽤のポイント - 1 • テナントサービスの契約をする顧客組織の単位。会社であったり⼀部⾨であったり特定の団体であったり実際の組織はいろいろある。 • サイロ、プール、ブリッジモデル（、ハイブリッドモデル）リソースの共有範囲を表す。後述の項⽬に合わせて検討が必要。 • SaaSにおける認証と認可ユーザの認証とともにそのユーザがどのテナントに属しているかという認証、ユーザ単位・テナント単位両⽅の観点から認可をする必要がある。契約している料⾦プランも関係してくる。 • テナント分離⾃⾝のテナント以外にアクセスできないようにマルチテナントにおいて分離は必須になる。コスト、運⽤効率、コンプライアンス、展開モデルによって検討する必要がある • データーパーティショニングテナント分離とともに、特にデータ（データベースやストレージなど）をどのように分割していくのかを考える必要がある

Slide 37

Slide 37 text

© 2024 Anti-Pattern Inc. All rights reserved. SaaS 開発/運⽤のポイント - 2 • ノイジーネイバーテナント間でリソース共有していると、とあるユーザのリソース消費が他のユーザの体験（特に性能）に影響を与えるので考える必要がある • テナントオンボーディング新しいテナント（顧客）契約時に、そのテナントに関連する全てのリソースを⾃動的にプロビジョニングする必要がある。 • テナントティアー多種多様なお客様に対応するため、料⾦プランとセットで機能や利⽤量、また信頼性まで差をつけて提供することにより、運⽤負荷を適切に分散する • メータリングとビリング料⾦プランの内容によっては、利⽤量の計測が必須になる。また、その利⽤量をベースに利⽤料⾦を確定し請求処理を⾏うことが必要。これらも極⼒⾃動化することによりスケールできるようになる。 • テナントアクティビティの収集と分析 SaaSは継続的改善が前提になるため、⼤量のユーザの利⽤状況からインサイトを得て改善を進めていく必要がある。また、テナント横串でのアクティビティを分析して新たなベストプラクティスを⾒つけ、新しい価値として実装をしていくことも重要。

Slide 38

Slide 38 text

© 2024 Anti-Pattern Inc. All rights reserved. SaaSのアーキテクチャ SaaS管理画⾯テナント管理ユーザー管理認証認可ログ収集利⽤量計測分析請求料⾦プランコントロールプレーン (SaaSの管理に必要な機能群) アプリケーションプレーン (SaaSのアプリケーションの機能群) Webフロントエンドテナントバックエンド DB テナントバックエンド DB テナントバックエンド DB テナントバックエンド DB これらが集まって１つのSaaSになる

Slide 39

Slide 39 text

© 2024 Anti-Pattern Inc. All rights reserved. 特に意識しなくてもSaaSはおのおのの役割は持っている SaaS管理画⾯テナント管理ユーザー管理認証認可ログ収集利⽤量計測分析請求料⾦プラン Webフロントエンドテナントバックエンド DB テナントバックエンド DB テナントバックエンド DB テナントバックエンド DB 作り⽅によっては分かれていないこともあるがその役割はどこかで持っている

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

© 2024 Anti-Pattern Inc. All rights reserved. フィーチャーフラグ(フィーチャートグル) 料⾦プランや特定企業向けオプションなどの時だけではなく使える • 複数のコードベースを管理するのはアンチパターン • ⻑い間存在する別ブランチも同義 • どこにトグルルータを置くか︖ • 処理の直前ではなくDIなどの活⽤ • フラグをどこに保存するか︖ • ハードコード、パラメータ、設定ファイル、DB、オーケストレーションツール、クラウド機能 https://martinfowler.com/articles/feature-toggles.html

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

テナント分離モデルごとの特徴サイロモデルプールモデルブリッジモデル・ユーザ認証・テナント識別・データベース切替・運⽤コスト・複雑度・テナント分離 (主にセキュリティと性能) 不要な場合あり不要不要⼤⼩⾼必要必要不要⼩中⽐較的⼩必要必要必要中⼤中アプリケーションで

Slide 54

Slide 54 text

テナント分離モデルごとの特徴サイロモデルプールモデルブリッジモデル・ユーザ認証・テナント識別・データベース切替・運⽤コスト・複雑度・テナント分離 (主にセキュリティと性能) 不要な場合あり不要不要⼤⼩⾼必要必要不要⼩中⽐較的⼩必要必要必要中⼤中アプリケーションでビジネスサイドとテックサイド(エンジニア)でよく話し合って決めましょうエンジニアに丸投げすると、プール(⾵)モデルになる可能性が⾼いです

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Slide 57

Slide 57 text

サンプルアプリケーションの実⾏ – 0 右下のShellの画⾯で cd ./php/laravel/ ./init.sh を実⾏して、しばらく待つこんな感じのが出ればOK ここまでできてますよね︖︕

Slide 58

Slide 58 text

サンプルアプリケーションの実⾏ – 1 ここからは、「sample.txt」をもとにコマンドを打っていきましょう「sample.txt」をクリックすると、右に内容が出てきます

Slide 59

Slide 59 text

サンプルアプリケーションの実⾏ – 2 1. Portforwardが勝⼿に設定されるので、公開URLを出す画⾯下の、「ポート80」の「転送されたアドレス」のURLをコピーする例︓ https://legendary-broccoli-x5995rgjvj33cpp7g-80.app.github.dev そして、表⽰範囲の「Private」を右クリックして「Public」に変更する上記URLを `php/laravel/api/.env.example` に設定し、保存する

Slide 60

Slide 60 text

サンプルアプリケーションの実⾏ – 3 2. 更新とアプリケーション再起動再度、ターミナルに戻って ./init.sh を実⾏する

Slide 61

Slide 61 text

サンプルアプリケーションの実⾏ – 4 3. サンプルアプリケーションの表⽰先ほどのURLにブラウザでアクセスすると、ログイン画⾯が表⽰される Email: user@example.com Password: SaaSTraining でログインすると、チャットの画⾯が表⽰されるので適当に⽂字を打ってみる

Slide 62

Slide 62 text

サンプルアプリケーションの実⾏ – 4 3. サンプルアプリケーションの表⽰先ほどのURLにブラウザでアクセスすると、ログイン画⾯が表⽰される Email: user@example.com Password: SaaSTraining でログインすると、チャットの画⾯が表⽰されるので適当に⽂字を打ってみるここまでできました︖︕ ここまではただのチャットアプリケーション︕ これをマルチテナント化していきます。 (プール型⾵マルチテナント)

Slide 63

Slide 63 text

これからやることなう完成形全員共⽤チャットテナント１⽤チャットテナント２⽤チャット

Slide 64

Slide 64 text

これからやることなう完成形全員共⽤チャットテナント１⽤チャットテナント２⽤チャットマルチテナント

Slide 65

Slide 65 text

DBをのぞいてみる – 1 4. PostgreSQL拡張機能でDBをのぞく接続定義を⼊⼒ ↑質問に答えて各種情報を⼊⼒ Hostname: localhost User: saasus Password: password Port: 5432 Connection: Standard Connection Database: saasus Display name: localhost

Slide 66

Slide 66 text

DBをのぞいてみる – 2 各テーブルから、Run Select を選ぶと表⽰される

Slide 67

Slide 67 text

DBをのぞいてみる – 2 各テーブルから、Run Select を選ぶと表⽰されるテナントの情報が無いから⼊れていこう︕

Slide 68

Slide 68 text

最低限のテナントコンテキストを⼊れる – 1 5. 最低限のテナントIDを⼊れる 5-1. DBのユーザーテーブルにテナントIDを追加 `php/laravel/api/database/migrations/2014_10_12_000000_create_users_table.php` のコメントアウト部分を外す 5-2. DBのユーザーテーブルのテストデータにテナントIDを追加 `php/laravel/api/database/seeders/UserSeeder.php` のコメントアウト部分を外す 5-3. 表⽰処理、書き込み処理にユーザーに応じたテナントIDを追加 `php/laravel/api/app/Http/Controllers/MessageController.php` のコメントアウト部分を外すこんな感じ

Slide 69

Slide 69 text

最低限のテナントコンテキストを⼊れる – 2 5-4. 更新とアプリケーション再起動再度、ターミナルに戻って ./init.sh を実⾏するすると、いま変更したDBやアプリケーションが反映される興味がある⽅は、前述の⼿順でDBのテーブルの中⾝を⾒てみてください

Slide 70

Slide 70 text

最低限のテナントコンテキストを⼊れる – 3 テナント１⽤チャットテナント２⽤チャット user@ example .com user1@ example .com user2@ example .com user3@ example .com 6. いろんなユーザーでログインして書いてみる user@example.com, user2@example.com はテナント１ user3@example.com, user4@example.com はテナント２というテストデータになっているため、各ユーザーで⼊ってテナント間でちゃんとデータが⾒れないか確かめる

Slide 71

Slide 71 text

Slide 72

Slide 72 text

Slide 73

Slide 73 text

攻撃を試す – Brute force attack - 1 7. ログイン認証を突破する攻撃ブルートフォース攻撃（総当たり攻撃）を軽く試します 7-1. 攻撃ツール(Hydra)のセットアップ新しいシェルを作成して、「sample.txt」のコマンドを実⾏「＋」を押すと、新しいシェルが開きますこんな感じ今回は体験を主としているのですごくシンプルな辞書を作ってます

Slide 74

Slide 74 text

Slide 75

Slide 75 text

攻撃を試す – Brute force attack - 2 7-2. 攻撃ツール(Hydra)の実⾏「sample.txt」のコマンドを実⾏ hydra -L usernames.txt -P passwords.txt -f -u -vV localhost http-post-form '/login:email=^USER^&passwo rd=^PASS^:F=wrong' つまり、認証(ログインとか)は⾃分で作っちゃダメ︕︕︕ いろんなアタックへの対応とか MFAとか振る舞い検知とかそんなの作ってられない

Slide 76

Slide 76 text

攻撃を試す – SQL Injection - 1 8. テナント境界をまたいじゃう攻撃 SQLインジェクションを軽く試します 8-1. user@example.com(テナント１のユーザー) でログインしてください。 8-2. メッセージに以下を⼊れてみてください。 hello', now()), ('2', '2', 'hacked message

Slide 77

Slide 77 text

攻撃を試す – SQL Injection - 2 8-3. いったんログアウトし、 user3@example.com(テナント２のユーザー) でログインしてください。 ※興味がある⽅は、DBのテーブルものぞいてみてください先ほどのメッセージ「helloʻ, now()), (ʼ2ʻ, ʼ2ʻ, ʼhacked message」で、 user@example.com(テナント１のユーザー) が user2@example.com(テナント１のユーザー) になりすまして、テナント２にメッセージが書けてしまいました・・・

Slide 78

Slide 78 text

Slide 79

Slide 79 text

Slide 80

Slide 80 text

改善チャレンジ︕ • テクニカル • SQLインジェクションが起きないように修正する • ＋ビジネス • 次に開発する部分と優先順位をディスカッションしてみてください • 機能⾯(例) • テナント名が固定になっちゃってるけどいいかな︖ • チャットのUIがしょぼい︖ • ログインにGoogle認証⼊れたい • ボイスチャットできるようにしたい • LLMが相⼿してくれるようにしたい • 管理者権限の⼈がユーザーの追加、削除出来るようにしたい • ⾮機能⾯(例) • 新規契約されたテナントの発⾏を出来るようにしたい • 料⾦プランをどうしよう︖ • 請求・⽀払はどうやってやろう • ブルートフォースアタックに対応できるようにする • 性能的にこのままで⼤丈夫か︖ • インフラ構築をどうするか︖ • CI/CDをどうする︖ などなどまだまだいっぱい

Slide 81

Slide 81 text

Slide 82

Slide 82 text

Slide 83

Slide 83 text

Slide 84

Slide 84 text

© 2024 Anti-Pattern Inc. All rights reserved. Conclusion ・技術的にも SaaS ならではの考えることがたくさんある・その中でも、まずはテナント分離の考え⽅が基本になる・なるべく⾃分で作らないで信頼できる製品を活⽤する・ (今回はなかったですが)インフラ、アプリ、開発、運⽤を全部ひっくるめて考える必要がある︕ ・ (今回はなかったですが)なので SaaS は作った⼈が運⽤するべし︕ You built it, you run it! ・ (今回はなかったですが)さらに、お客様からのフィードバックを開発・運⽤に活かすべし︕ ・(今回はなかったですが)データを製品改善に活かすべし︕ ということで、 SaaS のエンジニアは楽しいですよ︕

Slide 85

Slide 85 text

© 2024 Anti-Pattern Inc. All rights reserved. SaaS開発ガイド【基礎編】も合わせてご覧ください 1.SaaSにおけるソフトウェア開発の重要性 - SaaS提供事業者の責任 - 成⻑ステージ毎に考慮すべきSaaS運営のポイント - SaaS⽴ち上げ前に知っておきたい開発の進め⽅ 2.SaaSにおけるソフトウェア開発の勘所 SaaS⽴ち上げ前に知っておきたい開発の進め⽅ - BizDevOps - MVP / プロトタイプ SaaS開発時に考慮すべき6つのポイント 1. テナントという概念の考慮 2. 迅速なサービス改善を実現するアーキテクチャの検討 3. セキュリティの強化 4. 拡張性の担保 5. 料⾦プランの設計と請求⽅法の確⽴ 6. データの活⽤ https://saasus.io/resource/e-book/saas-dev-guide-basic SaaS開発ガイド【基礎編】続編（テナント編）もあります︕

Slide 86

Slide 86 text

まとめディスカッションその後、チームでディスカッションしてみてください • 今⽇学んだこと • ⾯⽩かったこと • つまらなかったこと • 難しかったこと • チームに共有したいことまずはアンケート回答お願いします︕ https://docs.google.com/forms/d/e/1FAIpQLScUI7 BctzwwJ5GuaFfSH4R2_W3VWFsc5asOWz3nd0htzu PkTA/viewform 講義内限り