[AWS] AWSで作る、いちばん簡単なホームページ 〜「あ」って表示させてみよう〜

# はじめに

### つくるもの
白い背景に「あ」って表示されているだけのホームページをつくる。
最初の一歩だ！

### 概要
![スクリーンショット 2025-04-2714.50.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/98461025-63b1-4bab-a3d0-9434881e0edf.png)


# AWSのアカウントをつくろう
以下から「無料でAWSを開始」と書かれたボタンをクリックしてアカウント登録する。


https://aws.amazon.com/jp/free/?trk=58ef6015-6519-450b-96ea-258378c321895&sc_channel=ps&ef_id=Cj0KCQjwiLLABhCEARIsAJYS6umkomo2Vn8AXQKe9FQErhSJdJi5x-Dk60Y-OLDPSXSD3I758X_FkuUaAmVqEALw_wcB:G:s&s_kwcid=AL!4422!3!618145042460!p!!g!!%E3%82%A2%E3%83%9E%E3%82%BE%E3%83%B3%20aws!18137558856!140477907357&gbraid=0AAAAADjHtp-5HlUoWOo-eW7Nrvz7g6a7j&gclid=Cj0KCQjwiLLABhCEARIsAJYS6umkomo2Vn8AXQKe9FQErhSJdJi5x-Dk60Y-OLDPSXSD3I758X_FkuUaAmVqEALw_wcB&all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20Categories=*all

# ドメインを取ろう
自分専用の「アドレス」を手に入れよう。

### Route53 を検索
![Route53-01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/7e1c9e7a-d5fd-6247-8972-40d19d9e6929.jpeg)

**ピン留め**
⭐︎マークを押すとサービスをピン留めできる。
![Route53-02-.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/72b290c9-eea5-0d81-1ce2-252c90ac73ee.jpeg)

ピン留めされたサービスはここから簡単にアクセスできるようになる。
![Route53-03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/cafb936a-e32d-f97e-698c-ca04fc311836.jpeg)

**Route53の画面に遷移**
![Route53-04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/a000bc42-e64f-00be-5c15-f8e56ba49294.jpeg)

### Route53コンソールに遷移
「ドメインを登録」ボタンをクリック
![Route53-05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/7c3d2877-c647-46a6-d7e7-76adf87358cf.jpeg)

#### 利用可能なドメインを検索する
ドメイン名には、英数字および末尾と先頭以外のハイフンのみを含めることができる。
![Route53-06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/cd72ca8f-96b7-9b26-648e-c3906c562767.jpeg)

#### 任意のドメインを選択
![Route53-07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/b7612bce-e233-2cb1-b101-e6cc57cb565e.jpeg)

####「チェックアウトに進む」をクリックして進む
![Route53-08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/1a4a1d14-9a3c-886c-1cb9-8a30d33992e5.jpeg)

#### 必要情報を入力し、最後に「送信」ボタンを押す。
![Route53-09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/6484c8e9-7188-6561-db0e-459abb3a10d7.jpeg)

#### Route53/リクエスト画面
<font color="red">この時点で認証メールが届いているのでチェックを忘れずに！迷惑メールに届いてしまうことが多いぞ！</font>

この画面でしばらく待機。リロードして「ステータス: 成功」となればドメイン取得完了！
![Route53-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/1694866c-5573-6a03-08dc-3ed8157202f2.png)

# ACM
![ACM-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/ac2273e9-fa22-87d3-a70e-ab6aaa7688e9.png)
<font color="red">ACMは必ずリージョンを US East 1 にして取るべき</font>だ

![ACM-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/e251073a-b9bf-804e-e25c-2ad8fcfe5e56.png)

![ACM-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/6692365e-cc23-36c0-8180-36fe6abee992.png)

「パブリック証明書をリクエスト」にチェックが入っていることを確認し、次へすすむ。
![ACM-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/8a188f9b-50ab-bce3-486d-fddab413ae7e.png)


まずは「完全就職ドメイン名」に
<対象ドメイン>を入力。その後
「この証明書に別の名前を追加」ボタンをクリックし、
*.<対象ドメイン>
を取っておこう。

これで stg.<対象ドメイン> や
dev.<対象ドメイン>でも証明書が効くようになるぞ！
![ACM-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/0283dc28-3b5b-df63-e6fd-d0e78acef4f9.png)


「Route53でレコードを作成」をクリック。
![ACM-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/4109a92a-336d-4a8e-1bc3-de054cf95eae.png)

対象のドメインが選択されていることを確認して「レコードを作成」をクリック、次へ進む
![qiita-your-domain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/f138624e-0433-4727-8810-055b001485a7.png)


「DNSレコードが正常に作成されました」と出る。
証明書のステータス、ドメインのステータスが「保留中の検証」となっている。これが変化するまで待機。

![ACM-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/1be8896b-6fe6-4150-ad00-b3eeb9faf53f.png)

証明書のステータスが「発行済み」
ドメインのステータスがそれぞれ「成功」に
なったら完了！
![ACM-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/f9399e7a-2f77-298b-a2ce-e28a7568abe2.png)


# S3
### バケットをつくろう
バケットとは？: ファイルを置いておく場所

#### 「S3」を検索
![スクリーンショット 2025-04-27 13.16.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/8f6d0fe0-e206-4445-b545-27b5e3e094f3.png)

#### バケットを作成
![qiita-howto-s3-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/3935a356-4f80-4c71-bd74-f12aba61ab56.png)

#### バケット作成画面に移動したらおすすめ設定
##### 一般的な設定
- **AWSリージョン:** アジアパシフィック(東京)ap-northeast-1
- **バケットタイプ:** 「汎用」で良い。「ディレクトリ」は2023年に登場した高スペックサービス。単一 AZ にのみ配置され、遅延が数ミリ秒短縮。ストレージクラスは S3 Express One Zone 限定。可用性 99.95 %、価格は Standard より高め過剰。 
- **バケット名:** わかりやすければなんでもOK
![スクリーンショット 2025-04-27 13.21.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/c7b1306d-678f-43f4-b730-c085ba99002c.png)

##### オブジェクト所有者
- **ACL:** ACL無効
![スクリーンショット 2025-04-27 13.31.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/11cc86dc-f8b5-4373-8532-eda21e69c267.png)

##### このバケットのブロックパブリックアクセス設定
- **パブリックアクセスをすべてブロック:** チェックが入ったままで良い。
- **バケットのバージョニング:** 有効にする を選択（迷う場合は無効でも稼働は可。あとから有効化できる）
- **タグ:** そのままでよい。
![スクリーンショット 2025-04-27 13.35.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/a7c70a8b-c95d-4c55-884d-b41500d9b6f3.png)


#####  デフォルトの暗号化
- **暗号化タイプ:** SSE-S3で良い。他は過剰スペック
![スクリーンショット 2025-04-27 13.38.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/5b979156-2f86-41f0-a970-4b3ebd3183ab.png)
- **詳細設定:** デフォルトでよい

##### 「バケットを作成」をクリックでページ遷移
正常に作成された旨、緑色の通知がでてくる。先ほど作成したS3バケットが表示されるのでクリック
![qiita-s3-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/e5d8d809-a37b-4276-8b8e-ffe81b26a350.png)

##### 「アップロード」をクリックする
![スクリーンショット 2025-04-27 13.44.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/3e4b1359-5617-4118-8017-4919a92c3e85.png)

##### 適当なファイルをアップロードする。
「あ」ってかいたファイルでもアップロードしてみよう。
ファイルをドラッグ&ドロップしたら、「アップロード」ボタンを押せば完了。
```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>あ</p>
</body>
</html>
```
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/64e2d4be-565f-4c95-a121-09ae94877fb2.png)

アップロード完了時の表示
![スクリーンショット 2025-04-27 13.48.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/5eabaff6-3f21-4f77-a284-ffc493650635.png)

# CloudFront

#### 検索バーからCloudFrontを検索してCloudFrontコンソールに遷移しよう

## OACを作成する

![スクリーンショット 2025-04-27 13.50.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/e2811542-0260-4d8d-acd6-789702a0041b.png)

##### セキュリティ - オリジンアクセスをクリック
![オリジンアクセス.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/910e1372-91ea-47e8-8b45-55e885d074c9.png)

##### 「コントロール設定を作成」をクリック
![スクリーンショット 2025-04-27 14.02.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/b2146505-100c-4980-930c-ede8a9f63323.png)

##### 必要項目を入力したら「Create」をクリック
- **名前:** 一意ならなんでもよい
- **説明:** なんでもよい
- **署名動作:** CloudFront → S3 のリクエストに署名ヘッダーを付ける方式。推奨設定なのでそのまま選択で OK。
- **認証ヘッダーを上書きしない:** ほとんどの静的サイトでは不要なので未チェックで OK。
- **オリジンタイプ:** S3
![スクリーンショット 2025-04-27 14.03.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/01191b1f-b61f-41d4-82a1-0d64701f0933.png)

## ディストリビューションを作成
先ほどのCloudFrontトップ画面に戻り「ディストリビューションを作成」をクリックする
![qiita-dist.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/d8f8395d-7158-4b76-bdbc-483808456136.png)

##### Origin domain
- 最初に作成したドメインを選択
![スクリーンショット 2025-04-27 14.12.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/9f285ab5-b41a-440f-959a-2e8bd35e524e.png)

##### Origin path

##### 名前
- 自動入力される

##### オリジンアクセス
- **Origin access control settings (recommended):**先ほど作成したOACを選択する

##### デフォルトのキャッシュビヘイビア
- **ビューワープロトコルポリシー:** Redirect HTTP to HTTPS

##### WAF
セキュリティ設置。有効にすると高額になりがちなので任意
![スクリーンショット 2025-04-27 14.19.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/b9d99994-4dd1-4af4-9d36-2b6fc0129d61.png)

![スクリーンショット 2025-04-27 14.22.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/b73a93f4-4b2e-4d89-8af6-c40d082e9f51.png)

##### Custom SSL certificate - optional
最初に作ったACMを設定

##### 代替ドメイン名 (CNAME) - オプション
Route53で取得したドメインを設定する

##### デフォルトルートオブジェクト - オプション
index.htmlでよい。

##### ほかはデフォルトで「ディストリビューションを作成」をクリック。

# S3 バケットポリシーを追加
バケットの Permissions → Bucket policy に、次のテンプレートを貼り付けて <YOUR-OAC-ID> と <YOUR-DIST-ID> を置き換えます。


![スクリーンショット 2025-04-27 14.33.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/d9f63b9c-d3bf-4606-ba4a-8f9fd084cad2.png)

```
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowCloudFrontRead",
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::<YOUR BUCKET ID>/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::<YOUR AWS ID>:distribution/<YOUR DIST ID>"
        }
      }
    }
  ]
}

```

##### 「変更を保存」をクリックして、以下の表示が出れば成功
![スクリーンショット 2025-04-27 14.39.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/052e8c99-d521-4936-9fda-2eb08adb9ef4.png)


# Route53でDNSを切り替える
ホストゾーンに A レコード (Alias) と AAAA レコード (Alias) を追加して CloudFront ディストリビューションを選択すれば完了

↓実際にアクセスしてみると、このような表示が出れば成功！「あ」って書かれたホームページをつくることができたね。

![スクリーンショット 2025-04-28 22.43.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/a38a488b-5e8b-4ee2-b687-01b321807931.png)


# このあとの設定
いまのままだと、S3のファイルを更新しても、キャッシュがCloudFront側に残ってしまう。
つまり、「あ」を「い」に変えたファイルをサーバーにアップロードしても、表示が「あ」から変わr。
そこで、以下の設定を行うことを推奨する。

https://qiita.com/GeneLab_999/items/0fc120d863228d19f081

##### このあとにおすすめの記事
画像生成AI Bedrockも超低料金で使えるのでWEBサイトのヘッダー画像などに使ってみよう

https://qiita.com/GeneLab_999/items/c0d94ed6a0278b059940