カテゴリー
サブドメイン付きURLで静的なWebサイトをAWS S3/CloudFront(とCloudFront Functions)/Route53で作成する
※ 当ページには【広告/PR】を含む場合があります。
2021/03/10
2022/02/03
サブドメイン付きのウェブサイト？
www.yahoo.co.jp(メインのドメイン)
travel.yahoo.co.jp
finance.yahoo.co.jp
weather.yahoo.co.jp
auctions.yahoo.co.jp
shopping.yahoo.co.jp
....
yahoo.co.jp【通常CloudFront版・作業①】S3でHtmlファイル等を準備
バケットの作成
geek.tacoskingdom.com
[バケットを作成]
index.html
<!doctype html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>404 not found</h1>
</body>
</html>
ポリシーの付与
[アクセス許可]ブロックパブリックアクセス(バケット設定)
バケットポリシーs3:GetObjectARN値geek.tacoskingdom.com
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Public Policy #1",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::geek.tacoskingdom.com/*"
}
]
}
【通常CloudFront版・作業②】CloudFrontを設定する
AWS Certificate Manager
Create Distributiongeek.tacoskingdom.comDefault Root Objectindex.html[Create Distribution]in Progress
S3バケットポリシーの修正
Grant Read Permissions on BucketYes, Update Bucket PolicySid:2
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Public Policy #1",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::geek.tacoskingdom.com/*"
},
{
"Sid": "2",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity *******"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::geek.tacoskingdom.com/*"
}
]
}
CloudFront Origin Access Identity <ID値>
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Public Policy #1",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ***************"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::geek.tacoskingdom.com/*"
}
]
}
【通常CloudFront版・作業③】Route53の設定する
Route53
レコード名:
<サブドメイン名>.ドメイン
レコードタイプ：
A
エイリアス：
はい
エイリアス先：
CloudFrontディストリビューション
> どこかのリージョン
> 先程設定したCFデストリビューションのURL
https://geek.tacoskingdom.com
S3/CloudFront/Route53https://geek.tacoskingdom.com.s3.ap-northeast-3.amazonaws.com/index.htmlhttps://geek.tacoskingdom.comOrigin Domain Name
Origin Domain Name(変更前):hoge.piyo.com.s3.amazonaws.com
👇(S3バケットのあるリージョンをつける)
Origin Domain Name(変更後):hoge.piyo.com.s3-ap-northeast-1.amazonaws.com
【CloudFront Functions版・作業①】S3でHtmlファイル等を準備
geek.tacoskingdom.comCloudFront Functions
kabu-app.tacoskingdom.com
index.html
<!doctype html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body><h1>404 not found</h1></body>
</html>
[アクセス許可]
s3:GetObject
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Public Policy #2",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::kabu-app.tacoskingdom.com/*"
}
]
}
【CloudFront Functions版・作業②】CloudFrontとCloudFront Functionsを設定する
コンピューティング使用率CloudFront Functionsを作成・発行する
[CloudFront] > [関数] > [関数を作成]ボタン
kabu-app-handler
[関数コード]
function handler(event) {
const request = event.request;
const uri = request.uri;
if (!/index\.html$/m.test(uri)) {
if (/\/$/m.test(uri)) {
request.uri += 'index.html';
} else {
request.uri += '/index.html';
}
}
return request;
}
[関連付けを追加](やっぱり)CloudFrontのディストリビューションを作成する
https://...
ワイルドカード(*)[関数の関連付け - オプション]
[ビューワーリクエスト]CloudFront Functionskabu-app-hander(先ほど作成したもの)
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Public Policy #2",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ***************"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::geek.tacoskingdom.com/*"
}
]
}
【CloudFront Functions版・作業③】Route53の設定する
https://kabu-app.tacoskingdom.com
まとめ
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー