アプリケーション開発をさらに加速させるフレームワークとCI／CD技術

2023年3月16日に開催された「SoftBank Tech Night Fes 2023」の講演資料です。

アプリケーション開発において非効率な作業は付きものです。エンジニアがこれらの作業の対応に追われるということは、プロジェクト全体の生産性を落とし、エンジニア自身のモチベーションも下がる原因になります。エンジニアが生産性のある開発作業に注力できる「幸せな世界」を目指して、採用したフレームワークやCI/CD技術についてお話しします。

■関連リンク
・プルリクエスト駆動型デプロイのすゝめ
　https://www.softbank.jp/biz/blog/cloud-technology/articles/202212/pullrequest-driven-deployment/

・LINEアプリ開発を さらに加速させる フレームワークとCI/CD技術
　https://speakerdeck.com/sbtechnight/cdji-shu

■作成者
辻 拓真（つじ たくま）
ソフトバンク株式会社
法人事業統括 クラウドエンジニアリング本部
DevOpsエンジニア

■SoftBank Tech Nightについて
ソフトバンク株式会社のエンジニア有志が開催するテックイベントです。
各分野のエキスパートが、日頃培った技術や事例、知見について発信しています。
イベントは開催スケジュールはconnpassをご確認ください。
https://sbtechnight.connpass.com/

SoftBank Tech Night Fes 2023公式サイト
https://www.softbank.jp/biz/events/tech-night-fes-2023/

Transcript

1. アプリケーション開発を
   さらに加速させる
   フレームワークとCI/CD技術
   2023/03/16
   SoftBank Tech Night Fes 2023
   ! 拓真
   ソフトバンク株式会社
   法⼈事業統括
   クラウドエンジニアリング本部
   

   View Slide

2. ! 拓真 Takuma TSUJI
   経歴
   • 2010年〜 電機メーカー
   • LSI、カメラ、IoT、クラウド、アプリケーション
   • 2020年〜 ソフトバンク
   • クラウド、アプリケーション、DevOps
   プライベート
   • ⿅児島県薩摩郡さつま町出⾝
   • よくディズニーに出没する
   • ⼆児の⽗
   資格
   • 第三種電気主任技術者
   • 第⼆種電気⼯事⼠
   • クラウド関連多数
   

   View Slide

3. なぜソフトバンクが
   アプリケーション
   開発？
   

   View Slide

4. 成⻑戦略「Beyond Carrier」 | 企業・IR | ソフトバンクより引⽤
   ソフトバンクが掲げる成⻑戦略
   コアの通信事業の持続的な成⻑を図りながら、
   情報テクノロジーの各分野で積極的に事業展開し
   企業価値の最⼤化を⽬指す
   

   View Slide

5. これまでに
   つくった
   アプリケーション
   

   View Slide

6. 開発実績
   • クラウドコスト⾒積りツール
   • クラウド構築・運⽤⽀援ツール
   社内ツール
   • LINEお問い合わせ管理ツール
   • FAQ（管理ツール・クライアント）
   商⽤プロダクト
   しかも、すべて
   内製開発
   今回
   ご紹介
   

   View Slide

7. 採⽤した
   技術スタック
   

   View Slide

8. Infrastructure
   Frontend Backend
   CI/CD
   Azure Kubernetes Service
   Azure Container Registry
   

   View Slide

9. Infrastructure
   Frontend Backend
   CI/CD
   Azure Kubernetes Service
   Azure Container Registry
   フレームワーク
   

   View Slide

10. インフラを⽀える
    フレームワーク
    

    View Slide

11. システム構成
    production/staging
    nginx
    front
    back
    Azure Database
    for PostgreSQL
    Load Balancer
    DNS Zone
    AKS
    Monitor
    Key Vault
    Internet LINE
    Messaging API
    

    View Slide

12. LINE
    Messaging API
    実は、CNAPで丸っと簡単に構築してます
    production/staging
    nginx
    front
    back
    Azure Database
    for PostgreSQL
    Load Balancer
    DNS Zone
    AKS
    Monitor
    Key Vault
    Internet
    Cloud Native Application Platform
    git
    CNAP
    くわしくは
    k8sも監視もマネージドデータベースも
    CM
    

    View Slide

13. アプリケーション
    開発を⽀える
    フレームワーク
    

    View Slide

14. フロントエンドのフレームワーク
    • Vue.jsで最もメジャー
    • 国内求⼈数はNext.jsの2倍以上
    • ⽬的に応じて⽅式を選択
    • SSR (Server-Side Rendering)
    • SPA (Single Page Application)
    • SSG (Static Site Generation)
    • 便利なモジュールが多数
    • @nuxtjs/vuetify
    • @nuxtjs/i18n
    • @nuxtjs/auth-next など
    • Vue.js⽤のCSSフレームワーク
    • Material Designを採⽤
    • いい感じのUIパーツを
    最⼩の労⼒で配置できる
    

    View Slide

15. フロントエンドのコンポーネント設計
    • コンポーネントとは
    • UIを構成するパーツ
    • Vuetify.jsが提供するUIパーツもコンポーネント
    • コンポーネントの組み合わせでページを組み⽴てる
    • コンポーネント設計のポリシーがないと、、
    • 複雑な依存関係の誕⽣
    • 使いにくいコンポーネントが量産される
    • 軽微なデザイン変更のつもりが⼤規模⼯事に
    • 他のプロジェクトへの成果物継承が難しくなる
    

    View Slide

16. Atomic Design
    

    View Slide

17. Atomic Design by Brad Frost より引⽤
    原⼦ 分⼦ ⽣体 テンプレート ページ
    

    View Slide

18. Atomic Design by Brad Frost より引⽤
    原⼦ 分⼦ ⽣体 テンプレート ページ
    

    View Slide

19. Atomic Design 導⼊のメリット
    • 各コンポーネントの依存性の⾼さが明確
    • Atoms なら依存関係が皆無なので、そのまま別 PJ にも転⽤可能
    • デザイン変更が容易で、抜け漏れが出にくい
    • デザイン変更は⼀部のAtoms を修正するのみ
    • 低次元のパーツを組み⽴てて構成するため、⾼次元パーツの修正不要
    

    View Slide

20. Atomic Design 導⼊のデメリット
    • Atoms/Molecules/Organismsの定義が明確でないと破綻する
    • PJ内でコーディング規約などに定めよう！
    • ディレクトリ構成が複雑化する
    • Nuxt.js v2.13以降、import⽂を記述せず独⾃コンポーネントが使える
    • Nuxt.js は Atomic Design フレンドリーになった！
    import BaseButton from '@/components/button/BaseButton.vue’
    export default {
    components: {
    BaseButton
    }
    }
    

    View Slide

21. CI/CD
    Continuous Integration / Continuous Delivery
    継続的インテグレーション / 継続的デリバリー
    

    View Slide

22. CI CD
    Plan
    Code
    Build Test
    Release
    D
    eploy
    O
    perate
    Feedback
    

    View Slide

23. Dev Ops
    Plan
    Code
    Build Test
    Release
    D
    eploy
    O
    perate
    Feedback
    

    View Slide

24. CI CD
    ① Code
    静的解析
    ② Build
    成果物のビルド
    コンテナイメージのビルド ③ Test
    ⾃動テスト
    ④ Release
    コンテナイメージのPush
    ドキュメントの⾃動⽣成
    ⑤ Deploy
    各環境への⾃動デプロイ
    (Develop/Staging/Production)
    Plan
    Code
    Build Test
    Release
    D
    eploy
    O
    perate
    Feedback
    

    View Slide

25. CI CD
    ① Code
    SonarQube
    ② Build
    $ nuxt build
    $ docker image build ③ Test
    Cypress
    ④ Release
    $ docker image push
    Sphinx
    ⑤ Deploy
    プルリクエスト駆動型デプロイ
    Plan
    Code
    Build Test
    Release
    D
    eploy
    O
    perate
    Feedback
    

    View Slide

26. SonarQube
    • 静的解析結果+αをGUIで確認できる
    • コード品質（コーディング規約、メンテナンス性）
    • コードセキュリティ（ホットスポット、脆弱性）
    • テストカバレッジ
    • 複数のプロジェクトを⼀元管理できる
    • GitHubなどと統合できる
    • コードへのインラインコメント
    • プルリクエストへのコメント など
    Code
    

    View Slide

27. Cypress
    • フロントエンドのテストツール
    • E2E (End to End) テスト
    • APIテスト
    • コンポーネントテスト
    2022/11/08リリースの v11.0.0 で GA 🎉
    • TypeScript(JavaScript)で記述可能
    • 複数のプロファイルでテスト可能
    • ダッシュボード機能あり
    • タイムトラベル機能が優秀
    • 証跡を動画やスクリーンショット
    で記録可能
    Test
    

    View Slide

28. Sphinx
    • Python製のドキュメント⾃動⽣成ツール
    • 静的サイトホスティング可能
    • 使い慣れたブラウザを使⽤して参照可能
    • 対応フォーマット
    • reST (reStructuredText)
    • Markdown
    Release
    

    View Slide

29. ２種類のデプロイ
    リリースのための
    デプロイ
    (Production/Stagingなど)
    開発のための
    デプロイ
    （動作確認など）
    Deploy
    今回は
    コチラに着⽬
    

    View Slide

30. プルリクエスト駆動型デプロイ
    プルリクエストの確認・動作確認の度に
    レビュアーの負担になる⾮効率な作業
    Deploy
    

    View Slide

31. あ、やべ番号ミスった。
    （⌫連打）
    ・・・（ビルド待ち）
    （動作確認）
    よし、問題ないな。
    ふう、つかれた
    あざます!!
    PRの確認おねがいします!
    OKです!!
    りょーかい!
    git clone hoge/fuga.git
    git fetch origin pull/123/head:PR-123
    git checkout PR-123
    yarn # 依存関係のインストール
    yarn dev # ビルドとローカルサーバ起動
    カタカタ
    これまで
    

    View Slide

32. デプロイしといたよ〜
    https://hoge/fuga/123
    あざます!!
    PRの確認おねがいします!
    OKです!!
    りょーかい!
    （動作確認）
    よし、問題ないな。
    URLポチー
    プルリクエスト駆動型デプロイ
    

    View Slide

33. プルリクエスト駆動型デプロイ
    • PRの作成・更新をトリガに、PR単位で払い出したURLに⾃動デプロイ
    • デプロイ後、PRのコメントでもURLを通知
    • 次の技術を組みあわせて実現
    • Nuxt.js ・・・ 静的Webサイトとしてビルドできる (SSG)
    • Azure Blob Storage ・・・ 静的Webサイトをホスティングできる
    Deploy
    テスト環境の構築負荷軽減 過去のPR環境が全て残っているので
    不具合調査の効率化
    

    View Slide

34. プルリクエスト駆動型デプロイ
    詳しくはブログにて
    サンプルコードも公開中
    https://bit.ly/3SWhkpB
    Deploy
    

    View Slide

35. まとめ
    

    View Slide

36. まとめ
    • 便利なフレームワーク や CI/CD技術 を導⼊することで、
    エンジニアが開発作業に注⼒できる幸せな世界を作りましょう
    • お困りの点があれば、ぜひソフトバンクにご相談ください
    • クラウド導⼊
    • アプリケーション開発
    • CNAPによる Infrastracture as “Low” Code 実現 など
    

    View Slide

37. CM
    透明氷製氷機 ice drops
    Amazon.co.jp
    ヨドバシ.comにて発売中
    

    View Slide

38. SoftBank Tech Night Fes 2023
    以上です！
    ご清聴
    ありがとうございました
    

    View Slide

39. Appendix
    

    View Slide

40. CNAPに関する情報
    公式Webサイト
    • クラウドネイティブ・アプリケーションプラットフォーム（CNAP） | MSPサー
    ビス | 法⼈向け | ソフトバンク
    開発者によるブログ寄稿
    • DevOpsライフサイクルを⾼速回転させる「クラウドネイティブ・アプリケーショ
    ンプラットフォーム（CNAP） | DevOps Hub | SB C&S
    Microsoft Ignite 2022
    • DevOpsライフサイクルを⾼速化させる「インフラ⾃動化」(delivered in
    Japanese)
    HCCJP(ハイブリッドクラウド研究会) 36回勉強会
    • DevOpsライフサイクルを加速する「インフラ⾃動化」/ HCCJP(ハイブリッドク
    ラウド研究会) 36回勉強会 - YouTube
    

    View Slide