カテゴリー
【AWS】CloudFrontからOAI/OACを利用してアクセス制限付きのS3からリソースを取得する方法
※ 当ページには【広告/PR】を含む場合があります。
2020/04/21
2024/10/06

これまで個人的な趣向で、AWSのLambdaでRESTfulなAPIの構築しか念頭に入れていなかったので、S3バケットからテキストから画像などありとあらゆるリソースをAPIからGETでリソースをリクエストして、拡張子ごとに適切に中身を処理して…かなり面倒です。
特にリソースが画像の場合は、base64形式でリレーしてあげねばならず、そんな無理にAPIに画像を引張ってきてもらわなくても、CloudFrontから直にS3を連れてきて貰えばいいよね?というのが今回のモチベーションです。
ただ今回の記事のネタは、ネットで“CloudFront S3”で検索していただけたら、設定方法がたくさんヒットします。
割と使い古されているネタですので、あくまで個人の備忘録&復習にどうぞ。
簡単なテスト環境準備
とりあえず適当な名前でS3バケットを作成し、jpeg画像(0.jpg)を突っ込んでおきます。
ファイル構造…といえるほど大層なものではないですが、バケットのルートからは以下のように配置しておきます。
$ tree
.
└── article1
└── 0.jpg
CloudFront 側の設定
今回の目標は、ブラウザ等で
http://xxxxxxxxxxxx.cloudfront.net/article1/0.jpg
それでは早速、CloudFrontのコンソールに切り替えて、適当なディストリビューションを新規作成してみます。
まずはCloudFrontで新規ディストリビューションを作成します。
350x58

400x210

次に、サラのCloudFrontディストリビューションに、前の工程で作ったS3バケットを指定したアクセス制限をかける設定を行います。
ただし、2024年現在で、この記事の当初作成したときに説明していた
とりあえず
OAI
OAC
(旧式のため非推奨)OAIによるアクセス制限の設定
せっかくですので、OAIによるS3バケットのアクセス制限の手順を記録として残しておきます。
実用だけをチェックしたい方は、この節の内容をスキップして、次の「OACによるアクセス制限の設定手順」に進んでください。
まず、
Origin Path
400x225

次に、以下のように選択肢を設定します。
400x161

なお、'Grant Read Permission on Bucket'をNoにして、あとでS3のバケットポリシーを手動で設定しても良いのですが面倒な人間はYesにしとくことで、下の写真のように自動で更新してもらえます。
自前のバケットポリシー更新前:
400x201

CloudFrontの自動書き換え適用後:
450x243

とりあえず、他の設定項目も多いですが、他はそのまま既定値にしといて、Createボタンをおしてこのディストリビューションを作成します。
作成から体感15分ほどで、'Status'が'Deployed'に変わるまで待ちます。
デプロイ後、サイドメニューから'Origin Access Identity'を覗くと、以下のように先ほど作成したディストリビューションに、新しいオリジンアクセスアイデンティティが発行されていれば成功です。
500x132

では早速、このディストリビューションのDomain Nameを、ブラウザのアドレスにコピペしてみましょう。
200x13

すると、CloudFrontのドメインからリソース画像にアクセスできます。
400x250

OACによるアクセス制限の設定
※この節の内容は2024年10月に追加したものです。
それではOACによるアクセス制限手順のほうも説明していきます。
まずはCFディストリビューションから、
[オリジン] > [オリジンを作成]
738x361

設定画面に移り、まず
[Origin domain]
544x338

次の設定項目で、
[Origin access control settings (recommended)]
[Create new OAC]
710x420

このOACからバケットポリシーを作るのですが、直下にある
[ポリシーをコピー]
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<バケット名>/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::012345678901:distribution/<CFディストリビューションID>"
}
}
}
]
}
あとは、
[S3バケットアクセス許可に移動]
681x465

先程の内容と同様に、ディストリビューションのDomain Nameを、ブラウザのアドレスにコピペしてみましょう。
200x13

すると、CloudFrontのドメインからリソース画像にアクセスできていれば設定完了です。
400x250

HTTPSでアクセスする
上の設定まででCloudFrontから十分アクセス可能ですが、できればSSL対応して使いたいです。 そんな時に、デストリビューションのBehavior タグを以下のように編集してみます。
350x88

そして再デプロイ後に、アクセスを試みると、
400x234

キチンとhttpsでアクセスできていることがわかります。
まとめ
以上、CloudFrontとS3からファイルを取得する基本を簡単にまとめてみました。
おそらくAWS初学者が学習の最初に構築してみる代表的なマイクロサービスパターンの一つですので、ダッシュボードでの設定方法を確実に身につけましょう。
参考
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー