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
150
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
完全に理解した!生成AI自社プロダクトのアジャイル開発の進め方!/ Fully understood! Agile tips for developing our generative AI product!(AOAI Dev Day)
jnymyk
5
2.1k
AzureでRAGをガンガン試行錯誤してみて得たナレッジを紹介します!/Azure RAG knowledge share
jnymyk
25
8.8k
GitHub Actions & オートスケールするSelf-hosted runnerで実現する KAGのみんなのCI/CD
jnymyk
4
1.3k
Other Decks in Technology
See All in Technology
JavaにおけるNull非許容性
skrb
1
1.9k
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
310
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
340
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
Amazon Aurora のバージョンアップ手法について
smt7174
1
120
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
240
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
140
実は強い 非ViTな画像認識モデル
tattaka
1
1.1k
CDKのコードを書く環境を作りました with Amazon Q
nobuhitomorioka
1
150
遷移の高速化 ヤフートップの試行錯誤
narirou
6
950
Active Directory攻防
cryptopeg
PRO
8
5.1k
MIMEと文字コードの闇
hirachan
2
1.4k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Optimizing for Happiness
mojombo
376
70k
Become a Pro
speakerdeck
PRO
26
5.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Adaptive Systems
keathley
40
2.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Fireside Chat
paigeccino
34
3.2k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
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. アジャイルに⼒を与え 共に成⻑し続ける社会を創る