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
短縮 URL サービス 4分間クッキング - Amazon CloudFront KeyVa...
Search
@twingo_b
March 02, 2024
Technology
1
1.3k
短縮 URL サービス 4分間クッキング - Amazon CloudFront KeyValueStore, CloudFront Functions, AWS CDK で作成、CloudWatch Logs で簡易アクセス集計 -
JAWSDAYS 2024 B-11 恒例!ソリューションアーキテクト怒涛のLT
@twingo_b
March 02, 2024
Tweet
Share
More Decks by @twingo_b
See All by @twingo_b
20240713 Generative AI with AWS
twingob
6
670
Amazon RDS / Amazon Aurora パフォーマンスチューニングとモニタリング
twingob
10
3k
失敗知識から学ぶ!クラウドアプリ設計で避けるべき事例とその対策
twingob
11
5.8k
Amazon CodeCatalyst と Amazon CodeWhisperer で開発を加速しよう!
twingob
1
820
AWS Copilot with AWS CDK
twingob
1
560
Amazon Redshift Serverless with CDK
twingob
2
1.9k
Rapid Prototyping with AWS
twingob
0
500
Using cdk-remote-stack and AWS Edge Networking Services for cross-regional applications
twingob
0
390
Try Infrastructure as Code with AWS CDK!
twingob
1
430
Other Decks in Technology
See All in Technology
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
1k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Git in Team
kawaguti
PRO
2
310
社内お問い合わせBotの仕組みと学び
nish01
1
510
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
680
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
170
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
4
170
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
170
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
350
Adapty_東京AI祭ハッカソン2025ピッチスライド
shinoyamada
0
200
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
1
540
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
650
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Mobile First: as difficult as doing things right
swwweet
224
10k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Designing for humans not robots
tammielis
254
26k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Scaling GitHub
holman
463
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Transcript
© 2024, Amazon Web Services, Inc. or its affiliates. ©
2024, Amazon Web Services, Inc. or its affiliates. 短縮 URL サービス 4分間クッキング - Amazon CloudFront KeyValueStore, CloudFront Functions, AWS CDK で作成、CloudWatch Logs で簡易アクセス集計 - Yoshinori Fujiwara Sr. Solutions Architect Amazon Web Services Japan G.K. JAW S DAY S 2 0 2 4 B - 1 1 恒 例 ︕ ソ リ ュ ー シ ョ ン ア ー キ テ ク ト 怒 涛 の LT
© 2024, Amazon Web Services, Inc. or its affiliates. ⾃⼰紹介
藤原 吉規 🧑🚒 デジタルサービスソリューション部 シニア ソリューションアーキテクト デジタルネイティブビジネスのお客様に 技術⽀援しています。 好きな AWS サービス Amazon CloudFront AWS 技術サポート 2
© 2024, Amazon Web Services, Inc. or its affiliates. 作成済みの短縮
URL サービスに実際にアクセスしましょう 3 QR コードが読める 📸 カメラアプリ のご準備を︕
© 2024, Amazon Web Services, Inc. or its affiliates. JAWS
DAYS 2024 このあとの楽しみなセッションは︖ 4 🍻 懇親会 🍻 恒例︕ SA 怒涛の LT (本セッション)
© 2024, Amazon Web Services, Inc. or its affiliates. 短縮
URL サービス全体アーキテクチャ 5 クライアント (ビューワー) GET /sa-lt ビューワーリクエスト 302 Found Location: https://jawsdays2024.jaws-ug.jp/sessions/timetable/B-11 AWS Cloud Development Kit (AWS CDK) デプロイ Amazon CloudFront エッジロケーション CloudFront エッジ キャッシュ CloudFront Functions CloudFront KeyValueStore Amazon CloudWatch Logs トラッキング
© 2024, Amazon Web Services, Inc. or its affiliates. src/redirectconfig.json
{ "data": [ { "key": "sa-lt", "value": "https://jawsdays2024.jaws-ug.jp/sessions/timetable/B-11/" }, { "key": "in-house-development", "value": "https://jawsdays2024.jaws-ug.jp/sessions/timetable/D-12/" }, { "key": "social-gathering", "value": "https://jawsdays2024.jaws-ug.jp/sessions/timetable/SOCIAL/" } ] } 6
© 2024, Amazon Web Services, Inc. or its affiliates. src/viewer-request.js
import cf from "cloudfront"; const kvsId = "KEY_VALUE_STORE_ID_PLACEHOLDER"; // KeyValueStore Id はリプレースする const kvs = cf.kvs(kvsId); function response_generate(target) { return { statusCode: 302, statusDescription: "Found", headers: { location: { value: target }, }, }; } … 7 async function handler(event) { // マッチしなかったときのデフォルト URL let target = 'https://jawsdays2024.jaws-ug.jp/'; if (event.request.uri === "/") { return response_generate(target); } const key = event.request.uri.split("/")[1]; try { target = await kvs.get(key); // トラッキング⽤のログ console.log(`Match found: ${key} -> ${target}`); } catch (err) { console.log(`Error when fetching key ${key}: ${err}`); } // ターゲット URL にリダイレクト return response_generate(target); }
© 2024, Amazon Web Services, Inc. or its affiliates. CDK
TypeScript source const keyValueStore = new cdk.aws_cloudfront.KeyValueStore(this, 'KeyValueStore', { source: cdk.aws_cloudfront.ImportSource.fromAsset('src/re directconfig.json'), }); // CloudFront Functions を読み込んで、 KeyValueStore Id をリプレースする const functionCode = readFileSync("src/viewer- request.js", "utf8").replace( "KEY_VALUE_STORE_ID_PLACEHOLDER", keyValueStore.keyValueStoreId, ); … 8 const viewerRequestFunction = new cdk.aws_cloudfront.Function(this, "ViewerRequestFunction", { code: cdk.aws_cloudfront.FunctionCode.fromInline(functionCode), runtime: cdk.aws_cloudfront.FunctionRuntime.JS_2_0, keyValueStore: keyValueStore, }); const distribution = new cdk.aws_cloudfront.Distribution(this, "Distribution", { defaultBehavior: { origin: new cdk.aws_cloudfront_origins.HttpOrigin("never.referenced"), functionAssociations: [ { function: viewerRequestFunction, eventType: cdk.aws_cloudfront.FunctionEventType.VIEWER_REQUEST, }, ], }, }); new cdk.CfnOutput(this, 'DistributionURL', { value: distribution.distributionDomainName });
© 2024, Amazon Web Services, Inc. or its affiliates. CloudWatch
Logs Insights で簡易集計 fields @timestamp | filter @message like /Match found/ | parse @message /Match found: (?<@slug>.*?) ->/ | stats count(*) as count by @slug | sort count desc 9 ロググループ クエリ 可視化 /aws/cloudfront/function/<CloudFront Funcsion Name>
© 2024, Amazon Web Services, Inc. or its affiliates. 4
分 (実測) で短縮 URL サービスをデプロイできました︕ 10
© 2024, Amazon Web Services, Inc. or its affiliates. 集計結果は後ほど︕
11 https://twitter.com/twingo_b/status/1763840023819059580
© 2024, Amazon Web Services, Inc. or its affiliates. Thank
you! © 2024, Amazon Web Services, Inc. or its affiliates.