AWS: Amplify の使い方 #AWS

こちらを参考にしました。
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