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

KDDIのTech blogを爆速レスポンスでつくったよ 2022.10.21 KAG / KDDI 三宅潤也

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 ソフトウェア技術部所属

2 KDDI Agile Development Center Corporation KDDI Agile Development Center
Corp. KDDI アジャイル開発センター株式会社 https://kddi-agile.com/ Whatʼs KAG?

KDDIエンジニア/デザイナー/マーケターの情報発信の場業務としてブログを書いて発信可能 Whatʼs Engineer Portal?

各個⼈の社外活動(Qiita/Zenn/個⼈ブログ等) を集約することで市場価値アップを⽬指す社内版/社外版ポータル Whatʼs Engineer Portal?

5 KDDI Agile Development Center Corporation What members? 本業のかたわら、コミュニティの有志メンバーで企画・開発・運⽤ •
企画開発運⽤チーム: 5名 • 運営サポート︓2名 • 宣伝隊⻑: 1名 • その他いろいろ: 1名

6 KDDI Agile Development Center Corporation How to respond ultra
fast? Jamstackなアーキテクチャ SSG (Static Site Generator)とHeadless CMSで実装 ︖︖︖

フロントエンドをデータやバックエンドから切り離して、柔軟性・スケーラビリティ・パフォーマンス・保守性を向上させるアーキテクチャアプローチ https://jamstack.org/

8 KDDI Agile Development Center Corporation How to implement Jamstack?(SSG①)
トラディショナルなWebアプリケーション • アプリケーションの処理をサーバ側で実⾏

9 KDDI Agile Development Center Corporation How to implement Jamstack?(SSG②)
モダンなWebアプリケーション CSR (Client Side Rendering) / SPA (Sigle Page Application) • 初回アクセス時に空のHTMLを取得、ページ全体をJavaScriptで⽣成 • クライアント側で取得したAPIレスポンス(JSON)を元にページ遷移なしでページ全体を書き換え

10 KDDI Agile Development Center Corporation How to implement Jamstack?(SSG③)
モダンなWebアプリケーション SSG (Static Site Generator) • 事前に⽣成された静的なHTMLを返却 • ビルド時にページ⽣成に必要なAPIリクエストを⾏いHTMLを⽣成

コンテンツのヘッド(表⽰画⾯)を持たないCMS ビルド時にAPIでコンテンツを取得エンジニアポータルではSaaSでHeadless CMSを提供する Contentfulを利⽤ https://www.contentful.com/ How to implement Jamstack?(Headless
CMS)

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

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

14 KDDI Agile Development Center Corporation How to respond ultra
fast? Jamstackなアーキテクチャ SSG (Static Site Generator)とHeadless CMSで実装 ︖︖︖

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)からキャッシュを返す場合は爆速を実現

ということで無事、爆速︕ ぜひ試してみてください︕ https://developers.kddi.com/kag

17 KDDI Agile Development Center Corporation Extra: What CI/CD architecture
of internal engineer portal? • ソースコードはGitHub Enterpriseで管理 • ビルドツールはAWS CodeBuildを利⽤ • 1時間に1回ビルドがトリガーされ、静的なHTMLを更新

18 KDDI Agile Development Center Corporation Extra: What CI/CD architecture
of engineer portal? • ソースコードはGitHub Enterpriseで管理 • ビルドツールはAWS CodeBuildを利⽤ • 1時間に1回ビルドがトリガーされ、静的なHTMLを更新

Be a Change Leader. アジャイルに⼒を与え共に成⻑し続ける社会を創る

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

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

Junya Miyake

More Decks by Junya Miyake

Other Decks in Technology

Featured

Transcript