【EC2 + Nginx】第2回 サブドメイン登録＆SSL化設定

## はじめに
本記事ではWebサイトやアプリケーションの開発段階でよく設定するサブドメイン登録とSSL化についてまとめます。
少しでも皆さんの参考になれば幸いです。

前回、EC2＋NginxでのWebホスティング手順についてまとめました。
続きの内容となりますので、まずは[【EC2 + Nginx】 第1回 Webホスティング](https://qiita.com/KoutaKawaguchi1101/items/46e414546ed651de3c1b)をご覧ください。

## こんな人に読んで欲しい
- Webサイトやアプリケーションを閲覧する環境を作りたい
- EC2 + Nginxを使った環境を作りたい
- (Let's encryptで)SSL化したい
- Route53にサブドメインを登録したい
- Nginxについて理解を深めたい

## 前提条件
- EC2インスタンス作成済みであること
- Nginxインストール済みであること
- Route53に有効なドメインが登録済みであること
    - ドメインが用意された状態で手順を進めていきます

## 解説内容
- [【EC2 + Nginx】 第1回 Webホスティング](https://qiita.com/KoutaKawaguchi1101/items/46e414546ed651de3c1b)
- [【EC2 + Nginx】 第2回 サブドメイン登録＆SSL化設定]() <- 今回
- [【EC2 + Nginx】 第3回 Basic認証設定](https://qiita.com/KoutaKawaguchi1101/items/33d7782daf6ebfd7d2ba)

## 実施手順
- index.htmlの配置
- サブドメイン登録
- SSL化
    - SSLサーバ証明書取得
    - 証明書自動更新設定

## index.htmlの配置
まずは現状確認のためWebサイトを確認しましょう。
EC2インスタンスの概要画面より「パブリック IPv4 アドレス」をコピーし、以下URLでページを開きましょう。
```
http://<パブリック IPv4 アドレス>
```
すると以下画面が表示されます。
![default.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952770/5f90a652-6069-92b5-4329-0915f56c9f2a.png)
前回、これはNginx内にデフォルトで配置されているHTMLが表示されていると説明しました。
ではNginxの設定ファイルを確認しましょう。

コンソールを開いてEC2へSSH接続します。

```
ssh -i <キーペア名>.pem ec2-user@<パブリックIP>
```

次のコマンドでファイルの中身を確認してください。
```
cat /etc/nginx/nginx.conf
```
次の記述(一部省略)箇所によりindex.htmlが参照されていることがわかります。
```
http {
    ~~~省略~~~
    server {
        ~~~省略~~~
        root         /usr/share/nginx/html;
    }
}
```
では記載されたパスにあるindex.htmlの中身も見てみましょう。
ページに表示される内容と同じであることがわかります。
```
cat /usr/share/nginx/html/index.html
```
つまり、この「root」の向き先や「index.html」の中身を書き換えることで表示を切り替えることができるわけです。

では向き先とindex.htmlの中身を書き換えてみましょう。
（今回viコマンド使っていますが、お好きなコマンドを使用してください。）
```
sudo vi /etc/nginx/nginx.conf
```
「nginx.conf」の中を以下のように書き換えます。
```
#root         /usr/share/nginx/html;
root         /usr/share/nginx/test;
```
次にindex.htmlの格納場所として「test」フォルダを作ります。
```
sudo mkdir /usr/share/nginx/test
```
さらに「index.html」を作成します。
```
sudo vi /usr/share/nginx/test/index.html
```
サンプルとして以下の中身を貼り付けて作成しましょう。
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>サンプルHTML</title>
</head>
<body>
  <h1>【EC2 + Nginx】SSL化＆Basic認証設定</h1>
  <p>正しく表示されました！</p>
</body>
</html>
```
最後にNginxを再起動しましょう。
何かNginxに対して変更加えた場合は必ず再起動しましょう。
```
sudo systemctl restart nginx
```
ページにアクセスしてみてください。先ほど作成したindex.htmlが表示されます。
![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952770/9b0091b5-f1c6-310c-a73a-dd27fa1b84ef.png)
これでindex.htmlの配置が完了しました。


## サブドメイン登録
Route53へドメインが登録済みであることを前提条件とします。
初めてドメインを取得する方は[お名前.com](https://www.onamae.com/campaign/lp/customize-domain/001/?utm_source=Google&utm_medium=paidsearch&banner_id=726_kwt_domain_bigdomain_domainbase_rsa003&waad=PI6KJY5R&keyword=%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%20%E5%8F%96%E5%BE%97&matchtype=e&flow=normal&gad=1&gclid=Cj0KCQjwm66pBhDQARIsALIR2zCHPTajbdfZE29jm5mjR87VUIYyamVAxRFkYlNqxKf9gCvYYi-sCsgaAl73EALw_wcB), [ムームードメイン](https://muumuu-domain.com/domain/search)などのサービスを用いてドメインを取得し、[Route53にドメインを登録する](https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/domain-register.html)を実行してください。
既にSSL化したいドメインを取得済みの方は、本セクションを読み飛ばしてください。

今回は登録済みドメインをもとにサブドメインを登録し、そちらをSSL化する手順を説明します。
それでは設定をしていきます。

AWSコンソールより「Route53」ダッシュボードを表示します。
「ホストゾーン」をクリックし、登録済みのドメインを選択します。
次に「レコードを作成」をクリックしましょう。
![hostzone.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952770/2ccd99ea-bf84-61ce-0921-ddd1ad28bb89.png)

「レコード名」に登録したいドメイン名を入力します。

「レコードタイプ」は「A」を選択します。
(Aレコードとは、ドメイン名またはホスト名が参照するIPアドレスの指定に使用するレコードです。)

「値」にはドメインに紐づけるIPアドレスを入力します。
対象のEC２インスタンスの概要ページに記載の「パブリックIPv4アドレス」をコピペしましょう。

右下の「レコードを作成」をクリックします。
![a-record.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952770/613e9f60-317b-310b-8812-5ff6fb84c7ba.png)
これでサブドメイン登録が完了しました。

## SSL化
次にHTTPSアクセスするための設定をしていきます。
ACM（AWS Certificate Manager）を使用して証明書発行することもできますが、以下2つのメリットから、今回は[Let's Encrypt](https://letsencrypt.org/ja/)を使用します。
- コマンド操作で簡単に発行可能
- ACMはリソースのリージョンを意識する必要がある(今回説明は省きます)


### SSLサーバ証明書取得
SSL化するためにはサーバ証明書を取得する必要があります。
まずは必要なパッケージをインストールします。
EC2にSSH接続した状態で次のコマンドを実行してください。
```
sudo dnf install -y python3 augeas-libs pip
```
「Complete!」が表示されたらインストール成功です。

次にPythonの仮想環境を`/opt`にセットアップし、「pip」の最新と「certbot」をインストールします。
「certbot」は無料かつ自動でSSLサーバ証明書を発行できるツールです。
```
sudo python3 -m venv /opt/certbot/
```
```
sudo /opt/certbot/bin/pip install --upgrade pip
```
```
sudo /opt/certbot/bin/pip install certbot certbot-nginx
```
`/usr/bin`にシンボリック・リンクを作成します。
```
sudo ln -s /opt/certbot/bin/certbot /usr/bin/certbot
```
Nginxを一度停止させます。
```
sudo systemctl stop nginx
```

それではSSL証明書を発行します。
まず、この後入力するコマンド実行にてcertbotがサーバー名の一致確認を行うため、nginx.confへサーバー名を登録します。
以下コマンドでnginx.confを編集します。
```
sudo vi /etc/nginx/nginx.conf
```

`server_name`へドメイン名を記載し上書きします。

![server_name.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952770/64b05fd2-b5dd-09c8-a6da-abccb180e81d.png)


次に証明書を取得します。
`--nginx`オプションは`nginx.conf`を自動編集してくれるもので、`-d`オプションはcertbot実行時に登録するドメインを指定しています。
その他のcertbotオプションについては[Let's Encrypt総合ポータル コマンド解説](https://free-ssl.jp/command/)をご覧ください。

次のコマンドを実行すると、Certbotから以下の内容を聞かれるのでそれに答えます。
```
sudo certbot --nginx -d {ドメイン名}
```
以下はその内容と回答例です。

```
① メールアドレスを入力してください(緊急の更新およびセキュリティ通知に使用されます)
　→ メールアドレス

② ACMEサーバーに登録します。同意しますか？（ACMEは証明書の管理を自動化するためのプロトコルです）
　→ Y（同意します）

③ メールアドレス情報を共有しますか？
　→ N（共有しません）
 ```

「Congratulations!」と表示されれば成功です。

`/etc/letsencrypt/live/{ドメイン名}`配下に証明書が作成されており、これが参照されるようnginx.confが更新されています。

![nginx-update.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952770/2d7ccb3e-81e0-0570-e1a7-fe3d3777e71f.png)

最後にNginxを再起動します。

```
sudo systemctl restart nginx
```

次のコマンドでNginxのステータスを確認し、「Active: active (running)」が表示されていれば再起動成功です。

```
sudo systemctl status nginx
```

ではHTTPSアクセス可能か確認してみましょう。
以下URLでページアクセスします。

```
https://<ドメイン>
```

ページが表示されれば成功です。
これでSSL化が完了しました。

### 証明書自動更新設定
Let's Encryptで取得した証明書の有効期限は**３ヶ月**です。
有効期限が近づくとメールが届きますが、都度更新するのは大変なので自動化しましょう。

Amazon Linux 2023にはcronが入っていないのでインストール&起動します。

```
sudo dnf install cronie-noanacron
sudo systemctl enable crond
sudo systemctl start crond
```

次に実際には証明書の更新を行わず、検証ができるシミュレーションコマンドがあるので実行してみましょう。

```
sudo certbot renew --dry-run
```

以下のようなメッセージが出力されれば成功です！

![スクリーンショット 2023-11-05 12.10.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952770/bcf869c1-59d5-fb75-aa2c-5c17b36fee91.png)

ではcron設定をしていきます。
以下コマンドで編集画面を開きます。
```
crontab -e
```

そして以下の内容をコピペして保存しましょう。
```
# 毎日1:30に更新
30  1  *  *  *  root    sudo certbot renew --post-hook "systemctl reload nginx" --no-self-upgrade # Nginx
```

最後にcronが設定されていることを確認します。
```
crontab -l
```

これで自動更新設定は完了です！

## まとめ
今回はindex.htmlとSSL化を設定しました。
特にNginxの設定について、少しでもみなさんの理解につながれば幸いです。

次回は「Basic認証設定」について解説します。

ここまで読んでくださりありがとうございました！

## 全体構成
ぜひこちらも併せてお読みください。
- [【EC2 + Nginx】 第1回 Webホスティング](https://qiita.com/KoutaKawaguchi1101/items/46e414546ed651de3c1b)
- [【EC2 + Nginx】 第2回 サブドメイン登録＆SSL化設定]() <- 今回
- [【EC2 + Nginx】 第3回 Basic認証設定](https://qiita.com/KoutaKawaguchi1101/items/33d7782daf6ebfd7d2ba)