こちらを参考にしました。
AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 構築編(Amplify CLI)
CloudFront から S3 の静的なページにアクセスする仕組みを作ります。
Amplify CLIのインストール
sudo npm install -g @aws-amplify/cli
アカウントの設定
amplify configure
プロジェクトの作成
mkdir projamp01
cd projamp01
amplify init
この時点でのフォルダーの構造
$ tree
.
├── amplify
│ ├── #current-cloud-backend
│ │ ├── amplify-meta.json
│ │ ├── awscloudformation
│ │ │ └── build
│ │ │ └── root-cloudformation-stack.json
│ │ └── tags.json
│ ├── README.md
│ ├── backend
│ │ ├── amplify-meta.json
│ │ ├── awscloudformation
│ │ │ └── build
│ │ │ └── root-cloudformation-stack.json
│ │ ├── backend-config.json
│ │ ├── tags.json
│ │ └── types
│ │ └── amplify-dependent-resources-ref.d.ts
│ ├── cli.json
│ ├── hooks
│ │ ├── README.md
│ │ ├── post-push.sh.sample
│ │ └── pre-push.js.sample
│ └── team-provider-info.json
└── src
└── aws-exports.js
amplify add hosting
package.json の作成
package.json
{
"name": "projamp01",
"version": "1.0.0",
"description": "AWS Amplify CLI Demo",
"dependencies": {},
"devDependencies": {
},
"scripts": {
"start": "",
"build": ""
}
}
dist/index.html を作成
dist/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">
<title>AWS Amplify CLI Demo</title>
</head>
<body>
<p>AWS Amplify CLI Hosting S3+CloudFront Demo</p>
<p>おはよう</p>
<p>こんにちは</p>
<p>今晩は</p>
<blockquote>
<p>Jul/16/2022 PM 19:38</p>
</blockquote>
</body>
</html>
設定ファイルの修正
"DomainName" を "RegionalDomainName" にします。
amplify/backend/hosting/S3AndCloudFront/template.json
(省略)
"Origins": [
{
"DomainName": {
"Fn::GetAtt": [
"S3Bucket",
"RegionalDomainName"
]
},
(省略)
デプロイ
amplify publish
クラウドフロントのアドレスは次のようになります。
https://dntdig2******.cloudfront.net
$ amplify publish
⠦ Fetching updates to backend environment: dev from the cloud.Overrides functionality is not implemented for this category
✔ Successfully pulled backend environment dev from the cloud.
Current Environment: dev
┌──────────┬─────────────────┬───────────┬───────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Hosting │ S3AndCloudFront │ No Change │ awscloudformation │
└──────────┴─────────────────┴───────────┴───────────────────┘
No changes detected
? Do you still want to publish the frontend? Yes
frontend build command exited with code 0
Publish started for S3AndCloudFront
✔ Uploaded files successfully.
Your app is published successfully.
https://dntdig2******.cloudfront.net
ブラウザーでアクセスした結果
Domain name の調べ方
aws cloudfront list-distributions > tmp01.json
jq .DistributionList.Items[].DomainName tmp01.json