KDDIのTech blogを爆速レスポンスでつくったよ

2022-10-21 に行われたKGDC Tech Conference #3 KDDIグループの「ごったに！」会の登壇資料です。

Transcript

1. KDDIのTech blogを 爆速レスポンスでつくったよ 2022.10.21 KAG / KDDI 三宅 潤也
2. 1 KDDI Agile Development Center Corporation 三宅 潤也(@jnymyk) Who am I ? • ホームIoT/XR/MaaSプロジェクトでAWSをメ インとしたインフラ、バックエンド、フロント エンドを担当 • KDDI/KAGの内製開発基盤であるGitHub EnterpriseのAdminもやってます • 好きなAWSサービス: AWS Wavelength • 趣味︓ニチアサ、Bizmates KAG 開発1部 / KDDI ソフトウェア技術部 所属
3. 2 KDDI Agile Development Center Corporation KDDI Agile Development Center Corp. KDDI アジャイル開発 センター株式会社 https://kddi-agile.com/ Whatʼs KAG?
4. KDDIエンジニア/デザイナー/マーケターの 情報発信の場 業務としてブログを書いて発信可能 Whatʼs Engineer Portal?
5. 各個⼈の社外活動(Qiita/Zenn/個⼈ブログ等) を集約することで市場価値アップを⽬指す 社内版/社外版ポータル Whatʼs Engineer Portal?
6. 5 KDDI Agile Development Center Corporation What members? 本業のかたわら、コミュニティの有志メンバーで企画・開発・運⽤ • 企画開発運⽤チーム: 5名 • 運営サポート︓2名 • 宣伝隊⻑: 1名 • その他いろいろ: 1名
7. 6 KDDI Agile Development Center Corporation How to respond ultra fast? Jamstackなアーキテクチャ SSG (Static Site Generator)とHeadless CMSで実装 ︖︖︖
8. フロントエンドをデータやバックエンドから切り離して、柔軟 性・スケーラビリティ・パフォーマンス・保守性を向上させる アーキテクチャアプローチ https://jamstack.org/
9. 8 KDDI Agile Development Center Corporation How to implement Jamstack?(SSG①) トラディショナルなWebアプリケーション • アプリケーションの処理をサーバ側で実⾏
10. 9 KDDI Agile Development Center Corporation How to implement Jamstack?(SSG②) モダンなWebアプリケーション CSR (Client Side Rendering) / SPA (Sigle Page Application) • 初回アクセス時に空のHTMLを取得、ページ全体をJavaScriptで⽣成 • クライアント側で取得したAPIレスポンス(JSON)を元にページ遷移なしで ページ全体を書き換え
11. 10 KDDI Agile Development Center Corporation How to implement Jamstack?(SSG③) モダンなWebアプリケーション SSG (Static Site Generator) • 事前に⽣成された静的なHTMLを返却 • ビルド時にページ⽣成に必要なAPIリクエストを⾏いHTMLを⽣成
12. コンテンツのヘッド(表⽰画⾯)を持たないCMS ビルド時にAPIでコンテンツを取得 エンジニアポータルではSaaSでHeadless CMSを提供する Contentfulを利⽤ https://www.contentful.com/ How to implement Jamstack?(Headless CMS)
13. 12 KDDI Agile Development Center Corporation What architecture of internal engineer portal? • 最⼤限マネージドサービスに寄せる • 1時間に1回ビルドがトリガーされ、静的なHTMLを更新 • 社内にアクセス元を制限 • ポータルのコンテンツをSSR/ISR※ したい場合も考慮して設計 ※SSR: Server Side Rendering, ISR: Incremental Static Regeneration
14. 13 KDDI Agile Development Center Corporation What architecture of engineer portal? • 最⼤限マネージドサービスに寄せる • 1時間に1回ビルドがトリガーされ、静的なHTMLを更新 • 社内ポータルをベースにAWS新サービス(App Runner)利⽤ • App Runnerの利⽤についてはエンジニアポータルにブログを書いてます︕ • https://developers.kddi.com/blog/EzMkpB2zMihVnpXFcuCrc • ポータルのコンテンツをSSR/ISR※ したい場合も考慮して設計 ※SSR: Server Side Rendering, ISR: Incremental Static Regeneration
15. 14 KDDI Agile Development Center Corporation How to respond ultra fast? Jamstackなアーキテクチャ SSG (Static Site Generator)とHeadless CMSで実装 ︖︖︖
16. 15 KDDI Agile Development Center Corporation Re:How to respond ultra fast? Jamstackなアーキテクチャ SSG (Static Site Generator)とHeadless CMSで実装 まとめ ビルド時にHeadless CMS(Contentful)からページに必要なコン テンツをAPIで取得し、SSG(Next.js)で静的なHTMLを事前に⽣ 成 ユーザーからのリクエストに対して事前に⽣成済みの静的なHTML を返すことで⾼速レスポンス さらにCDN(CloudFront)からキャッシュを返す場合は爆速を実現
17. ということで無事、爆速︕ ぜひ試してみてください︕ https://developers.kddi.com/kag
18. 17 KDDI Agile Development Center Corporation Extra: What CI/CD architecture of internal engineer portal? • ソースコードはGitHub Enterpriseで管理 • ビルドツールはAWS CodeBuildを利⽤ • 1時間に1回ビルドがトリガーされ、静的なHTMLを更新
19. 18 KDDI Agile Development Center Corporation Extra: What CI/CD architecture of engineer portal? • ソースコードはGitHub Enterpriseで管理 • ビルドツールはAWS CodeBuildを利⽤ • 1時間に1回ビルドがトリガーされ、静的なHTMLを更新
20. Be a Change Leader. アジャイルに⼒を与え 共に成⻑し続ける社会を創る