1. 概要
今回は
・Vercel ＋ AWS SDK ＋ DynamoDB
での環境構築の続きとしてS3とCloudFrontの設定について記載していきます。
2. 前提条件、注意事項
- 以下記載の前提条件が遵守され設定が完了していること。
【Vercel】Vercel×AWSで無料インフラを作るには ①AWS初期設定(IAMユーザー,DynamoDB,AWS-sdk)
3. S3でパケットの作成
3.1 コンソールから「S3」リンクを押下し「パケットを作成」ボタンを押下します。
※コンソール一覧にない場合は検索窓から「S3」と検索します。
3.2 赤枠の通りに設定を行い「パケットを作成」ボタンを押下します。
赤枠記載の箇所以外はデフォルトの設定としています。
3.3 パケットが作成されたことを確認し、「アップロード」ボタンを押下します。
3.4 「ファイルを追加」ボタンを押下して、任意の画像をUpし、「アップロード」ボタンを押下します。
3.5 タブの一覧より「アクセス許可」タブを選択して、CORS欄の「編集」ボタンを押下します。
3.6 自身のローカルとVercelからのみJavaScript経由での画像合成アクセスを許可するため、CORS赤枠の設定を行い、「変更の保存」ボタンを押下します。
設定は以下の内容を記載します。
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"http://localhost:3000",
"https://[Vercelのドメイン名]"
],
"ExposeHeaders": []
}
]4. CloudFrontのディストリビューション設定
4.1 AWSコンソールから「CloudFront」リンクを押下し、
表示された画面から「ディストリビューションを作成」ボタンを押下します。
※コンソール一覧にない場合は検索窓から「CloudFront」と検索します。
4.2 無料枠に設定して、「Next」ボタンを押下します。
4.3 ディストリビューション名を設定して、「Next」ボタンを押下します。
4.4 以下の設定を行い、「Next」ボタンを押下します。
・Origin type ：Amazon S3
・Origin ：S3で設定したパケット
・Setting ：赤枠に沿って設定
4.5 デフォルトのまま「Next」ボタンを押下します。
4.6 デフォルトのまま「Create distribution」ボタンを押下します。
4.7 ディストリビューションが正常に作成されたことを確認し、「オリジン」タブより作成したディストリビューション名を選択して「編集」ボタンを押下します。
4.8 「ポリシーをコピー」を押下します。
4.9 3で作成したS3のパケットを選択して、「アクセス許可」タブより、パケットポリシーの「編集」ボタンを押下します。
4.10 ポリシーをCloudFrontからコピーした内容を貼り付けて、「変更の保存」を押下します。
5. CloudFrontのアクセス制限を行う関数設定
5.1 CloudFrontから「関数を作成」ボタンを押下します。
5.2 CloudFrontから「関数を作成」ボタンを押下します。
5.3 設定した関数名になっていることを確認して関数コードを以下に記載の通りに編集します。
既に記載されている関数は確認の上、削除して問題有りません。
編集後、「変更を保存」ボタンが活性化されるので押下します。
function handler(event) {
var request = event.request;
var headers = request.headers;
var country = headers['cloudfront-viewer-country'] ? headers['cloudfront-viewer-country'].value : '';
// 1. 日本 (JP) 以外の国からのアクセスを403でブロック
if (country && country !== 'JP') {
return { statusCode: 403, statusDescription: 'Forbidden: Geo Restricted' };
}
// 2. 直リンク防止: Referer がない、または自分のドメイン以外からのアクセスをブロック
// ※ 開発用の localhost と Vercel ドメインからのリクエストのみ許可
var referer = headers['referer'] ? headers['referer'].value : '';
var isAllowedOrigin = referer.indexOf('localhost') !== -1 || referer.indexOf('vercel.app') !== -1 || referer.indexOf('live-archive') !== -1;
if (referer && !isAllowedOrigin) {
return { statusCode: 403, statusDescription: 'Forbidden: Direct Link Denied' };
}
return request;
}5.4 設定した関数から「発行」タグを選択し、「関数を発行」ボタンを押下します。
5.5 最下部に関連付けられているディストリビューション項目が現れるので、「関連付けを追加」ボタンを押下します。
5.5 4で設定したディストリビューションを選択し、キャッシュビヘイビアを「Default」に設定し、「関連付けを追加」ボタンを押下します。
5.6 緑のバーで「正常に作成されました」等の文言がでていれば設定が成功しております。
6. 設定確認
上記の3～5で設定した内容が正しいか、以下の確認を行います。
6.1 localhost及びVercel経由でS3でUpした画像が表示されること。
※ブラウザ内部のセキュリティ機能が働くため、AWS側のCORS設定(3.6)によって localhost:3000 と Vercelのドメイン のみを許可リストに指定し、他サイトのプログラムからの不正なデータ読み込みや画像化をブロックしています。
6.2 S3のリンク直打ちではアクセスできないこと
※S3バケットポリシー(4.10)によりURL直打ちや外部ツールからのアクセスを含め、CloudFront経由以外の通信をすべてサーバーレベルで拒否しています。
7. あとがき
今回はS3パケットの作成とセキュリティ観点からCloudFront経由でのアクセス、またアクセスポリシーの設定等を中心に記載しております。
次回は実際にVercelへの連携とデプロイ、ローカル環境と本番(Vercel)からのアクセスまでを記載予定です。
投稿者プロフィール
