Cloudflare+S3+CloudFrontでサブドメインを使ってHPを表示させる

# 経緯
ムームードメインからドメイン更新料値上げのお知らせが来て、よくよく見ると今まで3000円＋調整費だったものが3/3から5000円＋調整費になると書いてありたまげる。わたしは立て看板的なリンク用サイトをやっているだけなので、さすがに年間5000円かけてドメインを維持するのは割に合わない。とはいえlit.linkやpotofuのような無料のリンクサイトサービスを使うのは、このインターネットサービス戦国時代不安が募らんでもない（といいつつお財布事情でわたしのように急にサイトURLを変更する人もいるのだが・・・)

先日Misskeyの自鯖を建てた時に新しいドメインを取ったので、もうこのドメインに一元化してしまうか～ということで、HP用にサブドメインを作成してCloudflareでMisskeyサーバ同様にDNS設定をすることにした。

:::note info
やりたいこと
misskeyのサーバー用に取得したドメイン（salmonjerky.net）のサブドメインを作ってホームページを表示させる
:::

# 準備するもの
・HPのHTML（もうある）
・独自ドメイン（取得済）
・AWS S3、CloudFront、ACM
・Cloudflare

# 手順
## 新しいS3バケットを作り静的ウェブサイトホスティング設定
今までのサイトで使っていたものとは別のS3バケットを作成し（バケット名をそのまま予定されたサイトドメインと同じにした）、HTMLのデータをアップロードして、静的サイトホスティングを有効にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3903492/38ed720e-91c5-4853-8783-dc082e9768f2.png)
このバケットウェブサイトエンドポイントでやろうとしたがダメだった。詳しくは後述

とりあえずこの時点ではアクセス許可はすべて許可しない状態にしておく。あとでCloudFrontからのアクセスのみを許可するように自動で設定するため

## CloudFront経由でアクセスを許可
CloudFrontに移動し、ディストリビューションを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3903492/0299da7b-57f0-417f-b2b0-7ff3fb6fa663.png)
この時バケットエンドポイントではなくウェブサイトエンドポイントを使用しろと言ってくるがぜんぜんバケットエンドポイントのままいく

オリジンアクセスはLegacyを選んでオリジンアクセスアイデンティティを新しく発行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3903492/8345086e-0d11-44e6-8ce1-a587d696aef1.png)
この時に「はい、バケットポリシーを自動で更新します」を選ぶことで自動でS3バケットにアクセス許可ポリシーを付与してくれる

そのほかはデフォルトのキャッシュビヘイビアをHTTPS onlyにしたりするが基本特に変更はしなくてよい
（デフォルトルートオブジェクトをindex.htmlにするくらい）
SSL証明書はのちほど説明

## awsのACMでSSL証明書を発行
ディストリビューションの一般＞設定＞編集に入る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3903492/599f343f-6a4c-4d49-a320-357a51d39f2e.png)
CNAMEsと書いてあるところに今回使うサブドメインをいれる（`sub.domein.net`）
とりあえず入力したらそのまま下のCustom SSL certificateの赤枠のところをクリックしてSSL証明書をリクエスト

画面の通りに進む
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3903492/c51ecd2f-4e83-447e-959b-1889f680d09f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3903492/0ebf17eb-d789-4e65-9c48-4e9b653cf08c.png)
この「完全修飾ドメイン名」のところにさっきのサブドメインを入力`sub.domein.net`し
他はデフォルトのまま「リクエスト」を押す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3903492/69e4a2fb-e7dd-46aa-800f-0c67f620ea5a.png)
↑こういう画面になる（ステータスが保留中になる）

ドメインと書いてあるところを右の方にスクロールするとCNAMEの名と値が出るのでそれぞれコピーして、Cloudflareに移動し、DNSレコードを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3903492/8d164198-d6a0-4a6d-9d8e-7449133a8e08.png)
↑この「名前」にさっきACMで出てきた「CNAME名」そしてターゲットに「CNAME値」をいれる。プロキシステータスはオフ。保存を押す

しばらくおいてACMの画面をリロードし、ステータスが「発行済」になっていることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3903492/5e546328-e42a-40b2-a302-84c0d6fd0d50.png)

放置していたCloudFrontのディストリビューションの画面に戻ってきて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3903492/a3e53e0e-818c-4aab-bfc5-3d9a62529a77.png)
下矢印からカスタム証明書を選択。し、変更を保存する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3903492/6627b703-46f3-4cc0-9bb6-ff43a8a5b669.png)
ディストリビューションのトップに戻り、詳細のディストリビューションドメイン名をコピーしておく
（この時実際にディストリビューションドメイン名にアクセスしてサイトが表示されることを確認しておくとヨシ）

## CloudflareでDNSレコードを追加してディストリビューションとサブドメインを繋ぐ
Cloudflareに戻ってきてDNSレコードを追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3903492/e007f7ed-3fd8-4011-ba3b-a9dffa69dabb.png)
タイプはCNAME、名前に（ex:sub.domein.net）のsub部分、ターゲットにさっきのディストリビューションドメイン名の`https://`を除いた部分をペースト。プロキシステータスはオンにする

保存し、ブラウザのアドレスバーからサブドメイン（ex:sub.domein.net）にアクセスして表示されれば完了！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3903492/987de50f-9feb-44e8-9c7f-5487062ba6a3.png)
今回CloudFront経由にしたのはMisskeyサーバーの関係でCloudflareのSSL設定をフルにしているかららしい
（サイト側のSSL証明書を確認している）

# おわり
たいしたことはしてないが備忘録として残しておく