{S3}Cross-Origin Resource Sharing (CORS) の使用

https://dev.classmethod.jp/articles/lim-s3-cors-2021/

-- 1. コマンド等のインストール

-- 1.1 aws cli version 2 インストール

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install
aws --version

-- 2. S3 バケットを作成する

aws s3 mb s3://bucket123-1
aws s3 mb s3://bucket123-2

aws s3 ls

-- 3. バケットにオブジェクトをアップロードする

vim index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p>This is first page.</p>
</body>
<div id="tofetch">
<script>
var tofetch = document.getElementById("tofetch");

fetch('http://bucket123-2.s3-website-ap-northeast-1.amazonaws.com/secondpage.html')
.then((response) => {
return response.text();
})
.then((html) => {
tofetch.innerHTML = html
});
</script>
</html>

vim secondpage.html
<p>This is second page.</p>

vim error.html
<h1>This is error page.</h1>

aws s3api put-object --bucket bucket123-1 --key index.html --body index.html --content-type text/html
aws s3api put-object --bucket bucket123-1 --key error.html --body error.html --content-type text/html

aws s3api put-object --bucket bucket123-2 --key secondpage.html --body secondpage.html --content-type text/html

aws s3 ls s3://bucket123-1 --recursive
aws s3 ls s3://bucket123-2 --recursive

-- 4. 静的ウェブサイトホスティングの有効化
-- 4.1 bucket123-1の設定

vim a1.json
{
"IndexDocument": {
"Suffix": "index.html"
},
"ErrorDocument": {
"Key": "error.html"
}
}

aws s3api put-bucket-website \
--bucket bucket123-1 \
--website-configuration file://a1.json

aws s3api get-bucket-website \
--bucket bucket123-1

-- 4.2 bucket123-2の設定

vim a2.json
{
"IndexDocument": {
"Suffix": "secondpage.html"
}
}

aws s3api put-bucket-website \
--bucket bucket123-2 \
--website-configuration file://a2.json

aws s3api get-bucket-website \
--bucket bucket123-2

-- 5. パブリックアクセスブロック設定の編集

-- 5.1 アカウントレベル
aws s3control put-public-access-block \
--account-id 999999999999 \
--public-access-block-configuration "BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false"

aws s3control get-public-access-block \
--account-id 999999999999

-- 5.2 バケットレベル
aws s3api put-public-access-block \
--bucket bucket123-1 \
--public-access-block-configuration "BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false"

aws s3api get-public-access-block \
--bucket bucket123-1

aws s3api put-public-access-block \
--bucket bucket123-2 \
--public-access-block-configuration "BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false"

aws s3api get-public-access-block \
--bucket bucket123-2

-- 6. バケットポリシーの設定
-- 6.1 bucket123-1の設定

vim b1.json
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::bucket123-1/*",
"Condition": {
"IpAddress": {
"aws:SourceIp": [ "203.0.113.1/32" ,"203.0.113.2/32" ]
}
}
}
]
}

※IPアドレス制限追加

aws s3api put-bucket-policy \
--bucket bucket123-1 \
--policy file://b1.json

aws s3api get-bucket-policy \
--bucket bucket123-1

-- 6.2 bucket123-2の設定

vim b2.json

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::bucket123-2/*",
"Condition": {
"IpAddress": {
"aws:SourceIp": [ "203.0.113.1/32" ,"203.0.113.2/32" ]
}
}
}
]
}

※IPアドレス制限追加

aws s3api put-bucket-policy \
--bucket bucket123-2 \
--policy file://b2.json

aws s3api get-bucket-policy \
--bucket bucket123-2

-- 7. CORSの設定

vim cors.json

{
"CORSRules": [
{
"AllowedOrigins": ["http://bucket123-1.s3-website-ap-northeast-1.amazonaws.com"],
"AllowedHeaders": ["Authorization"],
"AllowedMethods": ["GET"],
"MaxAgeSeconds": 300,
"ExposeHeaders": []
}
]
}

aws s3api put-bucket-cors \
--bucket bucket123-2 \
--cors-configuration file://cors.json

aws s3api get-bucket-cors \
--bucket bucket123-2

-- 8. 動作確認

http://bucket123-1.s3-website-ap-northeast-1.amazonaws.com

→
CORS設定前は2行目が表示されない
CORS設定後は2行目が表示される

curl http://bucket123-1.s3-website-ap-northeast-1.amazonaws.com

http://bucket123-2.s3-website-ap-northeast-1.amazonaws.com/secondpage.html

curl http://bucket123-2.s3-website-ap-northeast-1.amazonaws.com/secondpage.html

-- 9. クリーンアップ

-- バケットの削除
aws s3 ls

aws s3 rb s3://bucket123-1 --force
aws s3 rb s3://bucket123-2 --force

-- アカウントレベルのパブリックアクセスブロックの有効化

aws s3control put-public-access-block \
--account-id 999999999999 \
--public-access-block-configuration "BlockPublicAcls=true,IgnorePublicAcls=true,BlockPublicPolicy=true,RestrictPublicBuckets=true"

aws s3control get-public-access-block \
--account-id 999999999999