Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
KDDIのTech blogを爆速レスポンスでつくったよ
Search
Junya Miyake
October 24, 2022
Technology
2
180
KDDIのTech blogを爆速レスポンスでつくったよ
2022-10-21 に行われたKGDC Tech Conference #3 KDDIグループの「ごったに!」会の登壇資料です。
Junya Miyake
October 24, 2022
Tweet
Share
More Decks by Junya Miyake
See All by Junya Miyake
LangfuseでAIエージェントの 可観測性を高めよう!/Enhancing AI Agent Observability with Langfuse!
jnymyk
1
380
完全に理解した!生成AI自社プロダクトのアジャイル開発の進め方!/ Fully understood! Agile tips for developing our generative AI product!(AOAI Dev Day)
jnymyk
5
2.4k
AzureでRAGをガンガン試行錯誤してみて得たナレッジを紹介します!/Azure RAG knowledge share
jnymyk
25
9.1k
GitHub Actions & オートスケールするSelf-hosted runnerで実現する KAGのみんなのCI/CD
jnymyk
4
1.4k
Other Decks in Technology
See All in Technology
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
580
A2Aのクライアントを自作する
rynsuke
1
170
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
470
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
解析の定理証明実践@Lean 4
dec9ue
0
180
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
100
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
640
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
460
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
720
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
11k
Agentic Workflowという選択肢を考える
tkikuchi1002
1
520
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
A better future with KSS
kneath
239
17k
A Tale of Four Properties
chriscoyier
160
23k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Producing Creativity
orderedlist
PRO
346
40k
Visualization
eitanlees
146
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Transcript
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. アジャイルに⼒を与え 共に成⻑し続ける社会を創る