AWS: Amplify の使い方

こちらを参考にしました。
[AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 構築編(Amplify CLI)](https://tech.nri-net.com/entry/aws_serverless_static_website_hosting_using_amplify_cli)

CloudFront から S3 の静的なページにアクセスする仕組みを作ります。

Amplify CLIのインストール

```bash
sudo npm install -g @aws-amplify/cli
```

アカウントの設定

```bash
amplify configure
```

プロジェクトの作成

```bash
mkdir projamp01
cd projamp01
amplify init
```

この時点でのフォルダーの構造

```text
$ 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
```

```bash
amplify add hosting
```

package.json の作成

```json:package.json
{
  "name": "projamp01",
  "version": "1.0.0",
  "description": "AWS Amplify CLI Demo",
  "dependencies": {},
  "devDependencies": {
  },
  "scripts": {
    "start": "",
    "build": ""
  }
}
```

dist/index.html を作成

```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" にします。

```json:amplify/backend/hosting/S3AndCloudFront/template.json
(省略)
"Origins": [
            {
              "DomainName": {
                "Fn::GetAtt": [
                  "S3Bucket",
                  "RegionalDomainName"
                ]
              },
(省略)
```

デプロイ

```bash
amplify publish
```

クラウドフロントのアドレスは次のようになります。
https://dntdig2******.cloudfront.net

```text
$ 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
```

ブラウザーでアクセスした結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/e4e1549d-1000-4766-98e7-95bfc3bbeb65.png)



## Domain name の調べ方 ##

```bash
aws cloudfront list-distributions > tmp01.json
jq .DistributionList.Items[].DomainName tmp01.json
```