DevOps のプラクティスを実践し Auth0 の開発体験を向上させた話

Transcript

1. @ 2023 Novasell, Inc. All Rights Reserved.
   DevOps のプラクティスを実践し
   Auth の開発体験を向上させた話
   2023/05/12 ノバセル株式会社 Murata Yuya
   1
   

   View Slide

2. @ 2023 Novasell, Inc. All Rights Reserved.
   プロフィール
   Murata Yuya
   ノバセル株式会社でサーバーサイドエンジニアをやっています。
   2
   

   View Slide

3. @ 2023 Novasell, Inc. All Rights Reserved. 3
   ノバセル の事業内容
   3
   「TVCMを、Web広告のように分析し運⽤する」
   運⽤型TVCM市場を開拓
   

   View Slide

4. @ 2023 Novasell, Inc. All Rights Reserved. 4
   本⽇の発表内容
   4
   ノバセルのアカウント基盤を Auth0 で構築した際に
   開発体験を向上させた具体的な devops のプラクティスの紹介
   ● ノバセルは各プロダクトごとに別々で認証を⾏っていたが、Auth を使⽤し各プロダクトの
   認証機能を共通化
   ● その開発の際に、開発体験‧⽣産性を向上させるために⾏った DevOps のプラクティスを紹
   介
   Auth
   ノビシロ
   

   View Slide

5. @ 2023 Novasell, Inc. All Rights Reserved. 5
   本⽇紹介する DevOps のプラクティス
   5
   クラウド
   インフラストラクチャ
   コードの保守性
   継続的
   インテグレーション
   デプロイの⾃動化
   継続的なテスト
   継続的デリバリー
   疎結合
   アーキテクチャ
   バージョン管理
   データベースの
   チェンジマネジメント
   トランクベース開発
   テストデータ管理
   チームのツール選択
   のサポート
   モニタリングと
   オブザービリティ
   お客様の
   フィードバック
   バリューストリームで
   の作業の可能性
   ⼩さいバッチ
   単位の作業
   変更承認の効率化
   チームのテスト
   仕掛り制限
   ビジュアル
   管理機能
   障害の予兆通知
   仕事の満⾜度
   創造的な組織⽂化
   変⾰型リーダーシップ
   学習⽂化
   技術 プロセス ⽂化
   セキュリティの
   シフトレフト
   システムをモニタリン
   グして的確な判断
   DevOps とは
   ● DevOps = ソフトウェアデリバリーの速度とサービスの信頼性を向上させる活動
   ● DevOps のプラクティス = DevOpsのベストプラクティスを実⾏する能⼒であるケ
   イパビリティの実践
   紹介するプラクティス
   ● バージョン管理、継続的インテグレーション、継続的デリバリー、
   継続的テスト、コードの保守性
   引⽤: Google Cloud
   「DevOpsとは」
   「DevOps の能⼒」
   

   View Slide

6. @ 2023 Novasell, Inc. All Rights Reserved.
   1. Terraform の導入
   2. Auth0 Action の Unit Test の導入
   3. Classic Universal Login のビルド環境の構築
   6
   Index -⽬次-
   

   View Slide

7. @ 2023 Novasell, Inc. All Rights Reserved. 7
   Section
   Terraform の導⼊
   

   View Slide

8. @ 2023 Novasell, Inc. All Rights Reserved. 8
   Auth ダッシュボードを⼿動で変更しなければならない
   ● 変更内容のレビューができない
   ● 操作ミスによる意図しない設定変更
   Auth ダッシュボード
   Auth を導⼊した際の課題
   

   View Slide

9. @ 2023 Novasell, Inc. All Rights Reserved.
   Auth ダッシュボードの⼿動変更 具体例 ①
   9
   アプリケーションの設定を⼿動変更 即保存されるトグルボタン
   

   View Slide

10. @ 2023 Novasell, Inc. All Rights Reserved.
    Auth ダッシュボードの⼿動変更 具体例 ②
    10
    Auth Action にソースコードを⼿動貼り付けして保存
    

    View Slide

11. @ 2023 Novasell, Inc. All Rights Reserved. 11
    Terraform の導⼊
    ● 変更内容のレビューができない
    ● 操作ミスによる意図しない設定変更
    ● GitHub の Pull Request 上でコードレビューが可能
    ● GitHub の Pull Request が Approve されてマージさ
    れると変更内容が反映
    Before After
    解決策
    GitHub Actions
    Auth
    デプロイ
    

    View Slide

12. @ 2023 Novasell, Inc. All Rights Reserved. 12
    Terraform 導⼊ 具体例 ①
    設定の変更がコードの差分として出ることでレビューが可能になり、
    操作ミスによる意図しない変更を防ぐことができるようになった
    

    View Slide

13. @ 2023 Novasell, Inc. All Rights Reserved. 13
    Terraform 導⼊ 具体例 ②
    ⼀般的なプログラムと同じように Auth Action の
    ソースコードをコードレビューできるようになった
    

    View Slide

14. @ 2023 Novasell, Inc. All Rights Reserved. 14
    Section
    Auth Action の Unit Test の導⼊
    

    View Slide

15. @ 2023 Novasell, Inc. All Rights Reserved.
    課題と解決策
    15
    ● ローカル開発環境で Action 単体で動作確認ができないことで毎回検証環境にデプロイ
    をして動作確認をする必要があり開発スピードが落ちる
    ● Action を修正したときに、デグレが起きていないことを確認するために多くのパター
    ンを実際に検証環境でテストする必要がある
    課題: Action の Unit Test がない
    解決策: Unit Test と CI の作成
    

    View Slide

16. @ 2023 Novasell, Inc. All Rights Reserved. 16
    テスト環境の構築 具体例
    tf_resources/
    └── actions/
    └── login_action.js
    action_tests/
    ├── package.json
    ├── login_action.js
    │ -> ../resources/actions/login_action.js
    └── login_action.spec.js
    ● Terraform ⽤ Action ファイルとは別の
    ディレクトリに JS プロジェクトでテス
    トを実⾏
    ● ファイルが重複しないようにシンボリッ
    クリンクを利⽤
    GitHub Actions で CI を構築
    テスト⽤ディレクトリを作成
    ● commit push 時、デプロイ時にテスト
    を実⾏
    

    View Slide

17. @ 2023 Novasell, Inc. All Rights Reserved. 17
    Section
    Classic Universal Login のビルド環境構築
    

    View Slide

18. @ 2023 Novasell, Inc. All Rights Reserved. 18
    Classic Universal Login とは
    Universal Login
    ● Auth によるホスティングで「会員登録‧ログイン画⾯」、「パスワード再設
    定画⾯」を作成すること
    ● Auth のドメイン（~.auth .com）でこれらのページが配信される
    New Universal Login
    ● Auth が⽤意したデフォルトのページデザインで「会員登録‧ログイン画
    ⾯」、「パスワード再設定画⾯」を作成すること
    ● 画⾯はシンプルでカスタマイズ性は少ないが実装⼯数を減らすことができる
    Classic Universal Login
    ● Auth に HTML ファイルをアップロードし、「会員登録‧ログイン画⾯」、
    「パスワード再設定画⾯」を作成すること
    ● 画⾯を⾃由にカスタマイズ可能
    ● デザインをリッチにするためにこちらを採⽤
    

    View Slide

19. @ 2023 Novasell, Inc. All Rights Reserved. 19
    New Universal Login, Classic Universal Login
    New Universal Login Classic Universal Login
    

    View Slide

20. @ 2023 Novasell, Inc. All Rights Reserved. 20
    Classic Universal Login の課題
    1. 1つの HTML ファイルに HTML、CSS、JS を書かなければならない
    => 可読性、処理の再利⽤性の低下につながる
    2. Auth が HTML をホスティングする際に設定情報を埋め込む⽂字列の
    記載があり、ローカルで HTML を⽴ち上げることができない
    => 開発スピードの低下につながる
    

    View Slide

21. @ 2023 Novasell, Inc. All Rights Reserved. 21
    課題 具体例 1
    HTML ファイルに⽣の HTML、JS、CSS を
    書いて開発するのは単純につらい
    

    View Slide

22. @ 2023 Novasell, Inc. All Rights Reserved. 22
    課題 具体例 2
    Auth が HTML をホスティングする際に⽂字列 「@@config@@」を設定
    情報の JSON ⽂字列に⾃動的に置換する
    しかし、ローカル環境ではその置換が起こらないため、⽂字列
    「@@config@@」を JSON Parse しようとしてエラーになり、HTML
    ファイルを正常に⽴ち上げることができない
    

    View Slide

23. @ 2023 Novasell, Inc. All Rights Reserved. 23
    解決策
    1. JavaScript フレームワークの導⼊
    ● React.js を採⽤
    ● React.js で画⾯を実装することでコードの可読性、保守性、再利⽤性
    を⾼める
    2. JavaScript ビルドツールの導⼊
    ● Vite を採⽤
    ● ローカルサーバー起動時に特定の⽂字列を指定のものに置換
    

    View Slide

24. @ 2023 Novasell, Inc. All Rights Reserved. 24
    解決策 具体例
    tf_resources/
    └── htmls/
    ├── password_reset.html
    └── regsitration_login.html
    => デプロイ時にreactjs ディレクトリの yarn build で⽣成される
    reactjs/
    ├── src/
    └── package.json
    ● ⽣ HTML 上で⾏うコーディングに⽐べて
    React.js で開発することで⽣産性‧開発
    体験が⼤きく向上
    ● デプロイフロー上で Auth にアップ
    ロードする HTML を React.js から⽣成
    React.js で各ページの HTML を⽣成
    ● Vite のビルド設定で「@@config@@」
    を仮の設定情報が⼊った JSON ⽂字列に
    置換
    ● ローカル開発環境で各種ページを起動で
    きるようになった
    Vite で埋め込み⽂字列を置換
    

    View Slide

25. @ 2023 Novasell, Inc. All Rights Reserved. 25
    まとめ
    ● Terraform を⼊れよう
    ● Auth Action のテストを書こう
    ● ⽣ HTML 上での開発はやめよう
    

    View Slide

26. @ 2023 Novasell, Inc. All Rights Reserved. 26
    26
    ご静聴ありがとうございました！
    ラクスル‧ノバセルでは
    エンジニア‧PdM‧データサイエンティスト
    募集中です！
    

    View Slide