AWSとゼロから始めるデジタル名刺生活～S3+CloudFront 編～

Transcript

1. AWSとゼロから始めるデジタル名刺生活 ～S3+CloudFront 編～ 2025/07/16(水) クラウド食堂 #3 ~若手応援LT会~
2. 2 デジタル名刺はお持ちでしょうか？
3. はじめに｜デジタル名刺 ┃スマホをかざすとプロフページに飛ぶイかしたやつ 3 私もほしい！作りたい！ https://prairie.cards/products/prairie-card より引用
4. はじめに｜調べてみる ┃いくつか記事はでてくるが… 4 出来合いのものが多い… せっかくAWS触っているのにもったいない… プロフページを自分で作るために AWSを学んできたんだ！ちがう
5. はじめに｜作ってみた ┃ということで作ってみました（ドメインも買っちゃいました） 5
6. はじめに ┃本日お話しすること 6 ココ！（コンテンツ配信）
7. はじめに ┃本日お話しすること 7 S3について CloudFrontについて ・プロフページ作成 ・OAC設定 ・NFCカードについて（おまけ）
8. 8 S3 コンテンツ作成
9. S3｜コンテンツ作成 ┃Claude Opus 4 に作ってもらいました 9 デジタル名刺（NFCカード）を読み取った際に表示されるプロフィール サイトを作成して 見やすさとすごそうな感じであることを重視したい また、NFCカードで読み取って表示させるケースが多いのでスマホ表示 でもみやすいデザインである必要があることに注意して この後、気になるところの修正を数往復して 小1時間で今の形になりました
10. 10 CloudFront OAC 設定
11. CloudFront｜OAC とは 11 ┃オリジンアクセスコントロール ‐ CloudFront→S3バケットの安全なアクセスを実現
12. CloudFront｜OAC 設定 12 ┃ディストリビューション作成時に取得できる ポリシーをS3バケットに設定 { "Version": "2008-10-17", "Id": "PolicyForCloudFrontPrivateContent", "Statement": [ { "Sid": "AllowCloudFrontServicePrincipal", "Effect": "Allow", "Principal": { "Service": "cloudfront.amazonaws.com" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*", "Condition": { "StringEquals": { "AWS:SourceArn": "arn:aws:cloudfront::YOUR-ACCOUNT-ID:distribution/YOUR-DISTRIBUTION-ID" } } } ] } 特定のCloudFrontから 特定のS3バケットへ
13. CloudFront｜OAC 設定 13 ┃ディストリビューション作成時に取得できる ポリシーをS3バケットに設定 { "Version": "2008-10-17", "Id": "PolicyForCloudFrontPrivateContent", "Statement": [ { "Sid": "AllowCloudFrontServicePrincipal", "Effect": "Allow", "Principal": { "Service": "cloudfront.amazonaws.com" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*", "Condition": { "StringEquals": { "AWS:SourceArn": "arn:aws:cloudfront::YOUR-ACCOUNT-ID:distribution/YOUR-DISTRIBUTION-ID" } } } ] } 特定のCloudFrontから 特定のS3バケットへ 先日のアップデートで簡単に設定することが できるようになりました！
14. CloudFront｜OAC 設定（過去） 14 https://aws.amazon.com/jp/blogs/news/amazon-cloudfront-introduces-origin-access-control-oac/ より引用
15. CloudFront｜OAC 設定（過去） 15 生成されたポリシーをコピーして、マネコンを移動し S3バケットポリシーを更新する必要があった https://aws.amazon.com/jp/blogs/news/amazon-cloudfront-introduces-origin-access-control-oac/ より引用
16. CloudFront｜OAC 設定（最新） 16
17. CloudFront｜OAC 設定（最新） 17 ディストリビューション作成時に自動で設定される
18. ┃しっかりアクセス制御できていそう CloudFront｜OAC 確認 18 CloudFront からはOK S3直接 はNG
19. 19 NFCカードへの書き込み
20. ┃Near Field Communication（近距離無線通信） ‐ 近くのデバイス間でデータをやり取りする技術 ‐ 例：交通系ICカード・クレカのタッチ決済 など ┃簡単に手に入れることができる ‐ 私はこちらを購入（1枚100円程度） • NFCカード NTAG215 黒無地 NFCタグ NFCカード｜NFC とは 20
21. ┃NFC Tools を利用 NFCカード｜情報書き込み 21 書き込みたいURLを入力して カードをスキャンするだけ
22. 22 お高いんじゃないの…？
23. 料金について 23 ┃ページサイズ40KB・月50アクセスとすると… ‐ CloudFront • データ転送：50GBまで無料 • リクエスト：1000万回まで無料 ‐ S3（12か月までは 無料 ） • ストレージ：0.00004GB × 0.023/GB = $0.000001 • GETリクエスト：50回 × 0.0004/1000回 = $0.00002 ほぼ無料でできます！ ※私はここに Route53 ホストゾーン $0.50 が乗ってます
24. まとめ ┃本日お話ししたこと 24 S3について CloudFrontについて 生成AIでサクッと作成 CloudFront からのみOKな状態にできた NFCカードは簡単に入手・設定可能
25. おわりに 25 ┃デジタル名刺で表示されるプロフィールページを AWSで構築してみた ‐ S3 + CloudFront というド定番の構成 ‐ ページデザインはClaudeに丸投げ ┃シンプルながらも、アクセス制御など 勉強になることがたくさんあった 自分で作ってみるのも一興