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
140
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
2k
AzureでRAGをガンガン試行錯誤してみて得たナレッジを紹介します!/Azure RAG knowledge share
jnymyk
25
8.6k
GitHub Actions & オートスケールするSelf-hosted runnerで実現する KAGのみんなのCI/CD
jnymyk
4
1.3k
Other Decks in Technology
See All in Technology
実務につなげる数理最適化
recruitengineers
PRO
6
560
WernerVogelsのKeynoteで語られた6つの教訓とOps
hatahata021
2
270
職能を超えたモブプログラミングが品質に与えた良い影響
tonionagauzzi
2
330
NilAway による静的解析で「10 億ドル」を節約する #kyotogo / Kyoto Go 56th
ytaka23
3
290
Kubeshark で Kubernetes の Traffic を眺めてみよう/Let's Look at k8s Traffic with Kubeshark
kota2and3kan
3
340
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
52k
イノベーショントークから見るクラウド運用の未来を振り返ってみた
nyankotaro
0
450
GPTsで模擬問題生成して資格対策してみる
hsg_alf
2
110
大幅アップデートされたRagas v0.2をキャッチアップ
os1ma
2
370
re:Inventで発表された Bedrockの新機能を色々使って、マルチRAGエージェントにクラウド選定させてみた件
minorun365
PRO
4
300
目玉アップデート!のSageMaker LakehouseとUnified Studioは何たるかを見てみよう!
nayuts
0
210
Amazon SageMaker Unified Studio(Preview)、Lakehouse と Amazon S3 Tables
ishikawa_satoru
0
120
Featured
See All Featured
It's Worth the Effort
3n
183
27k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
500
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Making Projects Easy
brettharned
116
5.9k
How to Ace a Technical Interview
jacobian
276
23k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
The World Runs on Bad Software
bkeepers
PRO
65
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Into the Great Unknown - MozCon
thekraken
33
1.5k
GraphQLとの向き合い方2022年版
quramy
44
13k
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. アジャイルに⼒を与え 共に成⻑し続ける社会を創る