【AWS】 Route53+ACM+CloudFront+S3で静的Webサイトの構築

## 今回の意義
AWSへの知見を深める
代表的なサービスに触れるため

## 使用サービス
【AWS】
･AWS Certificate Manager
･Amazon CloudFront
･Amazon S3
･Amazon Route53
･AWS　CLI(VSCODE)

## 参考資料
https://pages.awscloud.com/JAPAN-event-OE-Hands-on-for-Beginners-StaticWebsiteHosting-2022-confirmation_254.html


## 構成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/307886cd-f6da-9a93-b043-435a71468d31.png)

## S3の設定
・バケットの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/40080bbb-8cfc-4c22-aa93-e951d4d764ba.png)

・バケット名を指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/25424447-5729-f533-8504-284ea031f70e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/f0283dca-3dd6-960f-c195-2e0a466310f6.png)

パブリックアクセス設定のチェックを外す。
※S3バケットへの直接アクセスではなく、CloudFront経由の独自ドメインでアクセスするように設定するため後ほどONにはするが、この段階ではOFFにする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/4d7152a0-aadc-3c93-a7a5-98af3e300edc.png)

その他はデフォルト設定のままバケットを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/0f174efd-b048-c747-fe9c-2df5c431406d.png)

バケット名を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/777be469-8a8b-ba38-442e-d8ee44c3b457.png)

プロパティ→静的ウェブサイトホスティング→編集
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/f64033d1-5c36-b8f9-4c61-d1f2c9189eb4.png)

有効･indexhtmlを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/a88f8524-de8c-3028-3ea5-ae9c95c372f1.png)

次にアクセス許可→バケットポリシー
※先ほどパブリックアクセスを許可するようにチェックを外したが、ポリシーを設定しないとパブリックアクセスは許可されない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/4ad39100-ad5b-1393-0d40-b3000f4d7d0c.png)
以下を記述
Getオブジェクト(バケット内の情報は誰でも取得可能)を許可
```json
{
  "Version": "2012-10-17",
  "Statement": [
      {
          "Sid": "PublicReadGetObject",
          "Effect": "Allow",
          "Principal": "*",
          "Action": [
              "s3:GetObject"
          ],
          "Resource": [
              "arn:aws:s3:::test26.co.jp/*"
          ]
      }
  ]
}
```

次にファイルの追加を実行
以下ページに戻り、アップロードを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/485649b7-b5a5-1d81-25cc-675f5e828d3a.png)

事前に準備したindex.htmlファイルを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/a4e0dfec-3ca8-6ca3-3ee0-e70fc618d55f.png)

※プロパティ→静的ウェブサイトホスティングに行くとURLがあるのでそこで正しくつながるかを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/c4eaaa13-8e2c-3fe0-f2ff-d68ece0a6107.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/09a3135a-1750-c929-5713-3d56972db424.png)

## ここまでの構成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/ae35ae2c-abed-27e5-bdb3-c70b16bf5f90.png)

### 次にVSCODE(AWS CLIインストール済み)でファイルを編集し、デプロイする

先ほどのindex.htmlファイルをVSCODE上で開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/edf7a893-19af-9b90-a60a-56c29508dd96.png)

これを以下のように変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/10227a72-b3df-d2f0-00a8-4b22f1008552.png)

実行すると以下のように
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/280bf2ba-f65f-f9c9-3b1b-5e62eaadb11f.png)

ターミナルへ行き、ファイルのあるディレクトリへ移動しローカルからS3へ保存
```bash
aws s3 cp index.html s3://test26.co.jp
```

先ほどと同様にS3のウェブサイトホスティングのURLから開いても下記のようになっていることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/339eff38-4055-2314-6c57-aa040cc63d3e.png)

## ここまでの構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/148cd991-3b4d-0a93-0244-95098f267ec5.png)
※Cloud9→vscode(AWS CLIインストール済み)

### ファイルの作成
cssとimageファイルをそれぞれ作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/eb63ee18-8f48-6e67-9d03-76e7359528d3.png)

AWSファイルにfavicon(ICOファイル)、CSSにはソースファイル(空)，イメージには画像ファイルを挿入（今回はLamdbaのマーク)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/7a4c6ea0-9f6f-a65b-2317-ee0eda8efc23.png)

そしてindex.htmlファイルを再度開き、下記のように変更
```html
<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>初めてのAWS</title>
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div>
  </div class="icon">
    <img src="image/lambda.png">
      このページではAWSについて学んだことを書いていきます。
    </div>
  </div>
</body>
</html>
```
先ほどのファイルらを使用するように明記

実行結果としては以下のようになる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/92fb3ee4-daae-d638-9bc2-2b97aed16981.png)

ちなみにCSSファイルに以下を書き込むと
```css
body {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}
```
配置場所が変わる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/24c75e64-da63-96b0-a840-787e94a864da.png)

これらのファイルをS3にコピーするためにファイルのあるディレクトリへ移動し、ターミナルで下記コマンドを実施(.で全ファイル。--recursiveで再帰的に）
```bash
aws s3 cp . s3://test26.co.jp --recursive
```
S3に追加されていることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/be4d9984-7ada-19f6-b464-6421b3741a0b.png)

## Cloudfrontの設置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/cd940d45-917e-b8a6-cae2-bd2920ae38d4.png)

オリジン名を上記のURLにして作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/efa95b36-0ac9-8aae-5968-c3d41bd90326.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/a6a9427c-88c9-3496-10be-2b3b0079ac95.png)
こちらのドメイン名で検索すると開けることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/645f1e32-b231-3d79-64cc-1b08d563eb9e.png)

キャッシュされていることを確認するためF12でdevelopertoolを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/b0737155-3093-48ae-5911-4f8f247b6ec2.png)
ネットワークを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/8250c49d-884a-ec12-83ec-6873bfc778cf.png)
サイトのリロードをするとファイルが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/a517a905-f589-3106-29a3-6de9dffd0c70.png)
lamdbaファイルのx-cacheにcloudfrontがある
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/2bbe1855-45f9-33a6-b885-2f0dcdb6d77d.png)
この状態でWindowsなのでForce Reload を実行
Windowsなのでshift + F5
※Force Reload 
Force Reload は Super Reload などとも呼ばれ、 Shift + Reload や DevTools の "Disable Cache" 相当の機能を有効にすると発生するものだ。
したがって、一般ユーザによる実行ではなく、開発者が実行するという意図で実装されている。

再度確認するとCloudfront(エッジ)からcacheされていることを確認
なのでわざわざオリジン(S3)から取りに行かなくて良いということを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/c9fe376b-cb19-2a50-f442-ee786568fc42.png)

## Route53で独自ドメインを取得しS3にHTTPアクセスをする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/e6827593-5246-b721-4603-98fb44e2f720.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/7a3e6dd5-a179-2021-390c-796171a5e55d.png)

※以前作成していたため作成方法は省略
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/a864c263-f1c8-d4de-7f9a-b2ab4eb8b325.png)

登録済みのドメイン名でホストゾーンを作成し、レコード作成を押下
と、ここで、、、
ドメイン名とS3バケット名が一致していないとエンドポイントと紐づけできないことに気づく。。。
S3をドメイン名と同じにして再度作成。（バケット、ドメイン名は以降伏せます。)

なので改めてS3を作成してレコード設定(エンドポイントとの紐づけ)を完了し下記のように
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/80f11bbf-542a-3623-fe63-05388468be1f.png)

しかし、ドメイン名が停止しており、時間がかかるため以下よりハンズオン動画の内容を抜粋していく。

本来はドメイン名で検索をかけると同様の画面が表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/3d967ce7-df06-5874-25c4-cabf4baa207f.png)

## 最終的な構成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/4ab96a51-36bb-54bf-e3b4-9dfc3c86d07c.png)
ユーザーが直接S3バケットを除くことを防ぎ、HTTPS経由でS3バケットへアクセスできるようにACMで証明書を発行する。

### ACMを開きドメイン名を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/ed5e7a78-3ccc-7c9a-2852-d6fb9f4cfa66.png)

続いてドメインの検証をする。方法は任意
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/054e7e0d-65f8-cd5b-3a5b-cb8b32e3ecb1.png)

※以下はDNSでの検証方法でCNAMEを作成し検証する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/2ee0903d-16ec-65cd-3187-46d03e313fcf.png)

証明が完了したらCloudFrontへ戻る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/33e3938b-18bd-584a-eae7-136a70949a91.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/aa7a04d0-5f2f-2e5d-6a89-7f6442e80dab.png)

HTTPをHTTPSにリダイレクトするように設定を変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/79f25ac2-d735-4c63-4cc9-3cd1f292e556.png)

次にGenelalで編集
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/31fc3511-8070-bf6a-d867-76646398725c.png)

ここではCNAMEの変更(先ほど追加したもの)とカスタム証明書を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/2cb09af6-09e8-5440-0ccc-0ed6f9423006.png)

そしてRoute53のホストゾーン編集で先ほどS3エンドポイントを指定していたAレコードのものをCloudFrontディストリビューションを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/2f86eb3a-da28-7341-91e5-d93b95ed5a17.png)

これでHTTPSでの通信を確認できる！！

### S3への外からのアクセスを制御

S3へ戻りバケットポリシーを変更,削除する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/325d7059-74db-c6e5-c095-41dd3e6ab2fa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/5ff0e552-f220-0ea5-276a-0fe722dd70c5.png)

ウェブサイトホスティングも無効化する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/f6ca7d4f-4173-e6fe-2a10-90e42f81a848.png)

続いてCloudFrontへ戻りオリジンの編集
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/c3416cf8-66c9-5b70-25b8-ac00ecd79a51.png)
オリジンドメイン名の再入力等
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/5fb63a39-0bf8-b261-afe6-2297c5a3bdfc.png)

以降、S3の静的ホスティングで使用していたURLではアクセス不可になる。
S3のバケットポリシーを見てもCloudFront経由でのみアクセス可能な記述に変更されている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557022/99f41196-5df6-6a40-bf09-76af04731b78.png)


## 学習点
#### S3バケット名とドメイン名
S3バケットとドメイン名が一致していないとS3への紐づけができないということを認識できた。
Route53以外で作成したドメイン名だとどういう設定をする必要があるかは要勉強。。

#### S3の仕組み
S3への理解は資格勉強時にあったが、どういった形でウェブサイトとして機能するのかを認識できる良い機会となった。またAWS CLIを使用することでバケット間のコピーなども出来ることを認識でき、効率よく作業出来る方法も学ぶこともできた。