アプリケーション開発をさらに加速させるフレームワークと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 ! 拓真 ソフトバンク株式会社 法⼈事業統括 クラウドエンジニアリング本部
2. ! 拓真 Takuma TSUJI 経歴 • 2010年〜 電機メーカー • LSI、カメラ、IoT、クラウド、アプリケーション • 2020年〜 ソフトバンク • クラウド、アプリケーション、DevOps プライベート • ⿅児島県薩摩郡さつま町出⾝ • よくディズニーに出没する • ⼆児の⽗ 資格 • 第三種電気主任技術者 • 第⼆種電気⼯事⼠ • クラウド関連多数
3. なぜソフトバンクが アプリケーション 開発？
4. 成⻑戦略「Beyond Carrier」 | 企業・IR | ソフトバンクより引⽤ ソフトバンクが掲げる成⻑戦略 コアの通信事業の持続的な成⻑を図りながら、 情報テクノロジーの各分野で積極的に事業展開し 企業価値の最⼤化を⽬指す
5. これまでに つくった アプリケーション
6. 開発実績 • クラウドコスト⾒積りツール • クラウド構築・運⽤⽀援ツール 社内ツール • LINEお問い合わせ管理ツール • FAQ（管理ツール・クライアント） 商⽤プロダクト しかも、すべて 内製開発 今回 ご紹介
7. 採⽤した 技術スタック
8. Infrastructure Frontend Backend CI/CD Azure Kubernetes Service Azure Container Registry
9. Infrastructure Frontend Backend CI/CD Azure Kubernetes Service Azure Container Registry フレームワーク
10. インフラを⽀える フレームワーク
11. システム構成 production/staging nginx front back Azure Database for PostgreSQL Load Balancer DNS Zone AKS Monitor Key Vault Internet LINE Messaging API
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
13. アプリケーション 開発を⽀える フレームワーク
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パーツを 最⼩の労⼒で配置できる <v-date-picker v-model="picker”/> (React.js)
15. フロントエンドのコンポーネント設計 • コンポーネントとは • UIを構成するパーツ • Vuetify.jsが提供するUIパーツもコンポーネント • コンポーネントの組み合わせでページを組み⽴てる • コンポーネント設計のポリシーがないと、、 • 複雑な依存関係の誕⽣ • 使いにくいコンポーネントが量産される • 軽微なデザイン変更のつもりが⼤規模⼯事に • 他のプロジェクトへの成果物継承が難しくなる
16. Atomic Design
17. Atomic Design by Brad Frost より引⽤ 原⼦ 分⼦ ⽣体 テンプレート ページ
18. Atomic Design by Brad Frost より引⽤ 原⼦ 分⼦ ⽣体 テンプレート ページ
19. Atomic Design 導⼊のメリット • 各コンポーネントの依存性の⾼さが明確 • Atoms なら依存関係が皆無なので、そのまま別 PJ にも転⽤可能 • デザイン変更が容易で、抜け漏れが出にくい • デザイン変更は⼀部のAtoms を修正するのみ • 低次元のパーツを組み⽴てて構成するため、⾼次元パーツの修正不要
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 } }
21. CI/CD Continuous Integration / Continuous Delivery 継続的インテグレーション / 継続的デリバリー
22. CI CD Plan Code Build Test Release D eploy O perate Feedback
23. Dev Ops Plan Code Build Test Release D eploy O perate Feedback
24. CI CD ① Code 静的解析 ② Build 成果物のビルド コンテナイメージのビルド ③ Test ⾃動テスト ④ Release コンテナイメージのPush ドキュメントの⾃動⽣成 ⑤ Deploy 各環境への⾃動デプロイ (Develop/Staging/Production) Plan Code Build Test Release D eploy O perate Feedback
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
26. SonarQube • 静的解析結果+αをGUIで確認できる • コード品質（コーディング規約、メンテナンス性） • コードセキュリティ（ホットスポット、脆弱性） • テストカバレッジ • 複数のプロジェクトを⼀元管理できる • GitHubなどと統合できる • コードへのインラインコメント • プルリクエストへのコメント など Code
27. Cypress • フロントエンドのテストツール • E2E (End to End) テスト • APIテスト • コンポーネントテスト 2022/11/08リリースの v11.0.0 で GA 🎉 • TypeScript(JavaScript)で記述可能 • 複数のプロファイルでテスト可能 • ダッシュボード機能あり • タイムトラベル機能が優秀 • 証跡を動画やスクリーンショット で記録可能 Test
28. Sphinx • Python製のドキュメント⾃動⽣成ツール • 静的サイトホスティング可能 • 使い慣れたブラウザを使⽤して参照可能 • 対応フォーマット • reST (reStructuredText) • Markdown Release
29. ２種類のデプロイ リリースのための デプロイ (Production/Stagingなど) 開発のための デプロイ （動作確認など） Deploy 今回は コチラに着⽬
30. プルリクエスト駆動型デプロイ プルリクエストの確認・動作確認の度に レビュアーの負担になる⾮効率な作業 Deploy
31. あ、やべ番号ミスった。 （⌫連打） ・・・（ビルド待ち） （動作確認） よし、問題ないな。 ふう、つかれた あざます!! PRの確認おねがいします! OKです!! りょーかい! git clone hoge/fuga.git git fetch origin pull/123/head:PR-123 git checkout PR-123 yarn # 依存関係のインストール yarn dev # ビルドとローカルサーバ起動 カタカタ これまで
32. デプロイしといたよ〜 https://hoge/fuga/123 あざます!! PRの確認おねがいします! OKです!! りょーかい! （動作確認） よし、問題ないな。 URLポチー プルリクエスト駆動型デプロイ
33. プルリクエスト駆動型デプロイ • PRの作成・更新をトリガに、PR単位で払い出したURLに⾃動デプロイ • デプロイ後、PRのコメントでもURLを通知 • 次の技術を組みあわせて実現 • Nuxt.js ・・・ 静的Webサイトとしてビルドできる (SSG) • Azure Blob Storage ・・・ 静的Webサイトをホスティングできる Deploy テスト環境の構築負荷軽減 過去のPR環境が全て残っているので 不具合調査の効率化
34. プルリクエスト駆動型デプロイ 詳しくはブログにて サンプルコードも公開中 https://bit.ly/3SWhkpB Deploy
35. まとめ
36. まとめ • 便利なフレームワーク や CI/CD技術 を導⼊することで、 エンジニアが開発作業に注⼒できる幸せな世界を作りましょう • お困りの点があれば、ぜひソフトバンクにご相談ください • クラウド導⼊ • アプリケーション開発 • CNAPによる Infrastracture as “Low” Code 実現 など
37. CM 透明氷製氷機 ice drops Amazon.co.jp ヨドバシ.comにて発売中
38. SoftBank Tech Night Fes 2023 以上です！ ご清聴 ありがとうございました
39. Appendix
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