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
190
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
BEYOND THE RAG🚀 ~とりあえずRAG?を超えていけ! 本当に使えるAIエージェント&生成AIプロダクトを目指して~ / BEYOND-THE-RAG-Toward Practical-GenerativeAI-Products-AOAI-DevDay-2025
jnymyk
4
230
LangfuseでAIエージェントの 可観測性を高めよう!/Enhancing AI Agent Observability with Langfuse!
jnymyk
1
420
完全に理解した!生成AI自社プロダクトのアジャイル開発の進め方!/ Fully understood! Agile tips for developing our generative AI product!(AOAI Dev Day)
jnymyk
5
2.5k
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
claude codeでPrompt Engineering
iori0311
0
420
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.3k
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
8.9k
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
2
230
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
500
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
210
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
1
680
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
850
Building GoReleaser - from shell script to paid product
caarlos0
0
270
OpenTelemetry の Log を使いこなそう
biwashi
4
980
QAを早期に巻き込む”って どうやるの? モヤモヤから抜け出す実践知
moritamasami
2
170
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
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. アジャイルに⼒を与え 共に成⻑し続ける社会を創る