Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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