LINEアプリ開発を さらに加速させる フレームワークとCI/CD技術 2022/11/14 SB Tech Night #9 ! 拓真 ソフトバンク株式会社 法⼈事業統括 クラウドエンジニアリング本部

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

なぜ ソフトバンクが LINE開発？

成⻑戦略「Beyond Carrier」 | 企業・IR | ソフトバンクより引⽤

なにを作ろうか？

お問い合わせ受け付け お問い合わせ受け付け よくある質問 チャットボット イベントの出⽋確認 予約システム 勤怠管理 シフト管理 パンまつりの電⼦化 スタンプラリー モバイル会員証 モバイルオーダー 企業においても 今後はLINEでの問い合わせ受け付けが主流になる!? アイデア よくある質問 チャットボット

採⽤した 技術スタック

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

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

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

ここからは フロントエンドに フォーカス

フロントエンドの フレームワーク

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

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

Atomic Design

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

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

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

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

CI/CD

CI/CD Continuous Integration / Continuous Delivery 継続的インテグレーション / 継続的デリバリー 静的解析 • SonarQube ビルド • 成果物のビルド • コンテナイメージのビルド テスト • Cypress デプロイ • Staging/Productionの⾃動デプロイ • コンテナイメージのPush • プルリクエスト駆動型デプロイ

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

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

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

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

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

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

まとめ

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

SB Tech Night #9 以上です！ ご清聴 ありがとうございました

Appendix

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