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

by SoftBank Tech Night

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

採⽤した技術スタック

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

フロントエンドのフレームワーク • 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パーツを最⼩の労⼒で配置できる

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Atomic Design

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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 } }

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

まとめ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Appendix

Slide 40

Slide 40 text

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