EC2でドメインつけてSSL設定して公開する

# この記事は？
個人的なシステムを作るにあたってEC2上にWebサーバを作ったものの、SSL対応していないと保護されていないサイト扱いされて制約が大きいので、SSL化することにした。

それにあたって、様々な記事を調べたが、AWSの画面が古いものが多く、最新の画面と照合するのに苦労をしたので備忘を兼ねて記事にすることにした。

# 前提

EC２は既に作成済みで、Webアプリも公開されている状態からスタートします。
ドメインはお名前.comで取得済みです。

# Index

1. ドメインを取得してEC2と紐付ける
1. SSL証明書を作成する
1. ロードバランサーの作成
1. Aレコードの変更
1. EC2のセキュリティグループを変更
1. ブラウザで確認する

# 手順

## ドメインを取得してEC2と紐付ける
AWSの管理画面で「Route53」を検索して、開きます。
![スクリーンショット 2021-12-28 15.59.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/d562ee5a-c5de-b698-39f1-e48724d73cec.png)

Route53のダッシュボードが開くので、「ホストゾーン」を選択します。
![スクリーンショット 2021-12-28 16.02.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/b40f716f-bca5-7bb1-7218-6ea7841f3e1c.png)

ホストゾーンのリストが表示されるので、「ホストゾーンの作成」を選択します。
![スクリーンショット 2021-12-28 16.04.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/7568ef88-d8ea-ffee-e1ed-f489d321a282.png)

作成画面が表示されるので、必要事項を入力して画面一番下の「ホストゾーンの作成」をクリックして作成完了です。
![スクリーンショット 2021-12-28 16.05.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/28bf998c-a56e-46f1-f87b-a3695d33c0aa.png)

| 項目名 | 入力内容 |
|:-----------|:------------|
| ドメイン名 | 取得しておいたドメイン名 |
|説明 | 必要に応じて説明文を入力 |
| タイプ | 「パブリックホストゾーン」を選択 |
作成が完了すると、リストに戻るのでリストから作成したホストゾーンを選択します。
![スクリーンショット 2021-12-28 16.13.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/b1b8563d-7ff5-305d-be89-f6d42b540636.png)
ホストゾーンの情報が表示されます。ネームサーバ情報（タイプがNSのレコード）を後の手順で使用するので覚えておいてください。
![スクリーンショット 2021-12-28 16.17.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/95ae2d4d-b2f2-db6f-01fe-fe3b8565825c.png)
お名前.comの管理画面でドメイン設定>ネームサーバの変更と進む。
![スクリーンショット 2021-12-28 16.22.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/8f3853e6-3b16-3259-8fd4-d878c8d1c5f1.png)
該当のドメインにチェックを入れ、ネームサーバの選択で「その他のサービス」のタブに切り替え、ネームサーバの欄に先ほど作成したホストゾーンのネームサーバ情報を設定します（そのままコピーすると末尾の「.」が入りますが、必要ないので削除してください）
![スクリーンショット 2021-12-28 16.24.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/211ce093-820e-c282-3311-ee2044c7bfc7.png)
入力したら確認、設定すると進み設定を完了させます。
設定後、反映までに時間がかかることがあるとありますが、今回の場合は数分で完了メールが届きました。

ネームサーバの変更が反映されるまでに、EC2のElasticIPとVPCを調べておきましょう。
該当のEC2インスタンスの情報欄から取得できます。
![スクリーンショット 2021-12-28 18.31.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/2a5b2a3e-7b8d-aaf6-dfcc-55937d30faed.png)

ネームサーバの変更が反映されたら、ドメインのEC2のIPアドレスを紐付けます。
Route53→作成したホストゾーンと進み、「レコードを作成」を選択します。
![スクリーンショット 2021-12-28 16.32.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/237b6f3b-af5b-8554-5dcf-ef85173b1c66.png)
レコードの作成画面が開くので、各項目を入力して「レコードを作成」をクリックしてレコードの作成を完了します。
![スクリーンショット 2021-12-28 16.35.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/62bad1a8-728c-edd9-1cff-910d563a461d.png)

| 項目名 | 入力内容 |
|:-----------|:------------|
| レコード名 | 空欄でOK |
|レコードタイプ | A |
| 値 | EC2のElasticIP |
| TTL | デフォルトでOK |
| ルーティングポリシー | デフォルトでOK |
完了すると、Aレコードがレコード一覧に表示されます。
![スクリーンショット 2021-12-28 16.40.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/21685e2d-4ca0-550a-be8e-04751be2a66e.png)
これでEC2とドメインの紐付けが完了したので、ブラウザからドメイン名でアクセスをして、Webサイトが表示されることを確認してください。
## SSL証明書を作成する
AWSの管理画面で「ACM」を検索し、検索結果から「Certificate Manager」を選択する。
![スクリーンショット 2021-12-28 16.50.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/289ed22b-7f50-1089-1c42-81905c69b7e6.png)
リクエストを選択して証明書を作成していきます。
![スクリーンショット 2021-12-28 16.51.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/f699b11c-e7c2-30c2-7c9d-fba66fe569a4.png)
「パブリック証明書をリクエスト」を選択して、「次へ」
![スクリーンショット 2021-12-28 16.53.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/4098d9c0-5715-e1a2-ed0a-422e35e9e015.png)
各項目を入力して次に進みます。
![スクリーンショット 2021-12-28 16.54.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/0d0526df-5ab1-5e7f-c767-933e4d17f9f7.png)

| 項目名 | 入力内容 |
|:-----------|:------------|
| 完全修飾名 | 取得したドメインを設定 |
| 検証方法 | DNS検証 |
最後に確認画面が表示されるので、内容を確認して証明書の作成を完了してください。

完了したら、リストから作成した証明書を選択し、「Route53レコードを作成」を選択します。
![スクリーンショット 2021-12-28 16.58.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/668588ff-2a1a-ea7a-7d99-34c0f7ec3b3f.png)
レコード作成画面でSSL証明書を紐付けるドメインを選択して、「レコードを作成」をクリックして作成を完了します。
![スクリーンショット 2021-12-28 17.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/a093d26b-8f6c-1604-bcb7-6bfb3389fdae.png)
作成が終わると検証が開始されます。下記のようにステータスが「成功」になれば検証完了です。
![スクリーンショット 2021-12-28 17.06.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/b09af10c-b4bd-afd9-034c-6f9ced996fd4.png)
## ロードバランサーの作成
まずはターゲットグループを作成するので、EC２の管理画面のメニューから「ターゲットグループ」を選択する。
![スクリーンショット 2021-12-28 17.10.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/e7d51a6d-7fab-0af2-23d6-c737eb66525a.png)
「Create target group」を選択する。
![スクリーンショット 2021-12-28 17.12.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/a19b1a92-4957-102b-4efa-5273063b19d5.png)
各項目を入力して次へ。
![スクリーンショット 2021-12-28 17.14.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/37387fd0-80ad-8d71-13fe-cf771e671f0e.png)
![スクリーンショット 2021-12-28 17.14.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/a07e452a-86cb-57ff-d3d0-56b54770e9cc.png)
![スクリーンショット 2021-12-28 17.15.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/3523326e-1790-7803-23d1-27a00fa44b48.png)

| 項目名 | 入力内容 |
|:-----------|:------------|
| Choose a target type | Instances |
| Target group name| 任意の名称を入力 |
| Protocol| HTTP |
| Port| 80 |
| VPC| 該当のEC2のVPCを選択 |
| Protocol version | HTTP1 |
| Health check protocol | HTTP |
| Health check path | / |
ターゲットに含めるEC2インスタンスを選択し、「Include as pending below」をクリックすると「Review targets」に追加されるので、「Create target group」をクリックして作成を完了します。
![スクリーンショット 2021-12-28 17.21.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/1f3767c0-00d1-df26-c6ed-30bbae48e850.png)
![スクリーンショット 2021-12-28 17.22.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/5872d5d0-3f8a-aaf2-56c5-05c339096bec.png)
次のセキュリティグループを作成します。
EC2のメニューからセキュリティグループを選択します。
![スクリーンショット 2021-12-28 17.32.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/bd42ea45-138d-6a11-6011-da6dfcae69c8.png)
「セキュリティグループを作成」を選択する。
![スクリーンショット 2021-12-28 17.33.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/0d41b7d2-d4d1-ba65-23bd-04e97b3f503b.png)
各項目を入力してセキュリティグループを作成します。
![スクリーンショット 2021-12-28 17.35.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/351905ec-c3c9-5772-a4a9-7e3450cd7949.png)

| 項目名 | 入力内容 |
|:-----------|:------------|
| セキュリティグループ名 | 任意の名称 |
| 説明 | 任意の説明文 |
| VPC | 該当のEC2のVPCを選択 |
インバウンドルールとアウトバウンドルールは下記を追加します（ここでは最低限のものを記載しているので、必要に応じて追加してください）。

| タイプ | ソース | 値 | 
|:-----------|:------------|:------------|
| HTTP | カスタム | 0.0.0.0/0,::/0 |
| HTTPS | カスタム | 0.0.0.0/0,::/0 |

次にロードバランサーを作成します。
EC2のメニューからロードバランサーを選択します。
![スクリーンショット 2021-12-28 17.27.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/4e6d5031-2179-f03c-6b9a-1567fda86da6.png)
「ロードバランサーの作成」を選択します。
![スクリーンショット 2021-12-28 17.27.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/54ba2aa3-882e-accb-3a5e-ddac577ef527.png)
タイプを選択する画面になるので「Application Load Balancer」を選択します。
![スクリーンショット 2021-12-28 17.29.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/58decee2-f277-5c8e-dfcd-1092a799d670.png)
各項目を入力してロードバランサーの作成を完了します。
![スクリーンショット 2021-12-28 17.30.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/f9e50f8a-4037-1729-b526-ff2315a01b64.png)
![スクリーンショット 2021-12-28 17.30.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/9e931587-30dc-c536-0072-cdf54689cc08.png)
![スクリーンショット 2021-12-28 17.30.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/b983f010-ffb7-d8da-55fe-65daa35f31f5.png)
![スクリーンショット 2021-12-28 17.30.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/2338fbb7-78dd-5b53-efb9-d7b8bf5ae346.png)

| 項目名 | 入力内容 |
|:-----------|:------------|
| Load balancer name | 任意の名称 |
| Scheme | Internet-facing |
| Internet-facing | IPv4 |
| VPC | 該当のEC2のVPCを選択 |
| Mappings | ３つとも選択 |
| Security groups | 作成したSecurity groups |
| Listeners and routing | 次の項で説明します |
「Listeners and routing」はHTTPとHTTPSの両方を追加します（HTTPSだけでもいいのですが、HTTPにアクセスした場合にHTTPSにリダイレクトする仕掛けをするのが一般的だと思うので、両方を追加しています）。

| Protocol | Port | Default action |
|:-----------|:------------|:------------|
|HTTP|80|作成したターゲットグループ|-|
|HTTPS|443|作成したターゲットグループ|
HTTPSのリスナーを追加すると、「Secure listener settings」が表示されるので各項目を入力する。
![スクリーンショット 2021-12-28 17.57.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/8a824e12-b379-3fe5-10ff-20c34089c786.png)

| 項目名 | 入力内容 |
|:-----------|:------------|
| Security policy | デフォルトのままでOK |
|Default SSL certificate| From ACM / 作成したSSL証明書 |
あとは「Create Load Balance」をクリックし、確認できたら作成完了です。
## Aレコードの変更
Route53で作成したホストゾーンのAレコードをロードバランサー経由になるように変更をします。
Aレコードを選択して、「レコードを編集」を選択します。
![スクリーンショット 2021-12-28 18.03.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/ab570d55-8da4-2c14-f656-b8741a2ed3b2.png)
各項目を入力して保存します。
![スクリーンショット 2021-12-28 18.07.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/04b10638-bad6-698a-0b9f-6e5baa6b56c8.png)

| 項目名 | 入力内容 |
|:-----------|:------------|
| レコード名 | 空欄でOK |
| レコードタイプ | A |
| ルーティング先 | Application Load Balancer〜 / ロードバランサーがあるリージョン / 作成したロードバランサー |
| ルーティングポリシー | シンプルルーティング |
## EC2のセキュリティグループを変更
EC2のインスタンス一覧で該当のインスタンスのセキュリティグループを変更します。
![スクリーンショット 2021-12-28 18.15.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/e664ec69-76ab-4833-6b11-2ceb81d8d60a.png)
「セキュリティグループを編集」で作成したセキュリティグループを選択し、追加をします。
![スクリーンショット 2021-12-28 18.17.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/098788c2-bd89-e57f-01e5-d9a8f65bfe9a.png)
## ブラウザで確認する
これでSSLの設定が完了したので、ブラウザからhttps://(作成したドメイン)でアクセスをして、設定が反映されていることを確認してください。
![スクリーンショット 2021-12-28 18.21.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207121/d9fe0c3e-3e78-bc86-38fe-0cf9c30fb6f1.png)