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
830
短縮 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
500
Amazon RDS / Amazon Aurora パフォーマンスチューニングとモニタリング
twingob
6
1.5k
失敗知識から学ぶ!クラウドアプリ設計で避けるべき事例とその対策
twingob
11
4.9k
Amazon CodeCatalyst と Amazon CodeWhisperer で開発を加速しよう!
twingob
1
680
AWS Copilot with AWS CDK
twingob
1
440
Amazon Redshift Serverless with CDK
twingob
1
1.5k
Rapid Prototyping with AWS
twingob
0
400
Using cdk-remote-stack and AWS Edge Networking Services for cross-regional applications
twingob
0
290
Try Infrastructure as Code with AWS CDK!
twingob
1
380
Other Decks in Technology
See All in Technology
Road to Single Activity Uncovered
yurihondo
0
110
GPSデバイスを使った簡易位置案内システムの構築をしてみた話。/jawsfesta2024
kwada
0
210
Vespaを利用したテクいベクトル検索
szdr
3
250
Microsoft 365 でデータセキュリティを強化しよう
sophiakunii
2
450
From LibreOffice to « La Suite » : providing civil servants with Free Software sovereign tools
bluehats
0
120
塩野義製薬様のAWS統合管理戦略:Organizations設計と運用の具体例
tkikuchi
0
300
Grafana エコシステムの活用事例 on ABEMA
tetsuya28
5
710
全社を巻き込んだ業務オペレーション改善と、それは事業成長に貢献しているのか?を実感した話
marroooon
0
130
AWS Lambda と Amazon SQS で「わかった気になれる」FreeRTOS 入門
soracom
PRO
2
140
俺とVSCode Python Debugger Extension
sat
PRO
1
140
とある事業会社にとっての Kaggler の魅力
hakubishin3
7
1.5k
プログラミング写経のすすめ
natsutan
0
150
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
GitHub's CSS Performance
jonrohan
1030
450k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
26
700
The Cult of Friendly URLs
andyhume
77
6k
Building an army of robots
kneath
302
42k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Why Our Code Smells
bkeepers
PRO
334
57k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Teambox: Starting and Learning
jrom
132
8.7k
GraphQLとの向き合い方2022年版
quramy
43
13k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
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.