HTTPS化（Django+Gunicorn+Nginx+EC2編）〜前編：ロードバランサー作成

# 概要
ACMの機能で発行したSSL証明書をELBに適用することにより、インターネットからELBまでのトラフィックをHTTPS通信にすることが可能となります。
HTTPS通信はSSL/TLSプロトコルにより暗号化されたhttp通信のため、個人情報など秘匿性が求められる情報の盗聴や改ざんを防ぐことに役立ちます。

変更前、変更後の構成イメージは以下の通り。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/72716059-8e57-e1d4-d735-8235129d766e.png)


HTTPS化を行うにはそこそこの手順があり、間違えるとどう直せば良いのかわからなくなってしまいます。
何を、どこまでやったのか、確認しながら行うようにしてください。

まずは段階的にロードバランサーの作成から行っていきます。
※既にEC2インスタンス上にDjangoアプリケーションが動いている前提で進めていきます。

なお、以降では
・仮想環境名　：　venv_private_diary
・プロジェクト名　：　private_diary
・EC2ユーザ名　：　app_admin
としていますので、ご自身の環境と異なる箇所は読み替えを行って実行してください。

## ロードバランサーの作成
#### 1. AWSマネジメントコンソールにてEC2のダッシュボードに移動し、左側のメニューから「ロードバランサー」を選択。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/c347f88b-0945-1006-6b69-df40494fd76b.png)


#### 2. 「Create load balancer」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/2e214cc2-4a7d-d37b-18ce-3e7ecfa45220.png)


#### 3. ``Application Load Balancer``の「Create」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/1ac14bfc-eb65-4fdf-64e0-0a7eba9f3fae.png)


#### 4. Basic configurationの``Load balancer name``にロードバランサー名を入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/f6a2ba38-6cd7-7c98-baa8-b0d01a124fc1.png)


#### 5. Network mappingの``VPC``にEC2インスタンスのVPCを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/f4d85857-5bf3-ed68-2320-8914734e5b2f.png)


#### 6. Network mappingの``Mappings``でそれぞれのAZからパブリックサブネットを選択。
※「~subnet-public1」などとなっているものをそれぞれから選べばよい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/02a095f9-72ac-b8b4-689c-fd1f9e9d60c2.png)


#### 7. Security groupsの「Create new security group」リンクをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/79107f83-ae9f-66ea-6e40-144451218c53.png)


#### 8. セキュリティグループ作成
##### 8-1. 基本的な詳細で、``セキュリティーグループ名``と説明を入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/e277b109-f6fd-b0e1-943e-0bfa7b8c40f1.png)


##### 8-2. 基本的な詳細で、``VPC``からEC2インスタンスのVPCを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/e6fc06e0-2284-13c4-3701-11721aa28e1c.png)

##### 8-3. インバウンドルールで、``HTTP：80``を設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/63fd7ca0-576f-d160-2e45-496c301751e5.png)


##### 8-4. 「セキュリティグループを作成」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/4d1591ec-cf7d-d54a-8653-61d93c1743bb.png)


#### 9. ロードバランサー作成画面に戻り、Security groupsで作成したセキュリティグループを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/d98174bd-af24-5f3d-0bed-d4efc523a7d8.png)


#### 10. Security groupsで``Default``を削除。作成したセキュリティグループだけを残す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/d5339c44-f76f-88ff-004d-4ebbcc7ba6d6.png)


#### 11. Listeners and routingの「Create target group」リンクをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/541c2a89-a091-c1f0-b464-b13f27022570.png)


#### 12. ターゲットグループ作成
##### 12-1. ``Instances``を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/e4f4c0c4-a4a8-80c6-5617-8323c08947b6.png)

##### 12-2. ``Target group name``を入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/4e9dfd19-91fc-a226-fcb1-e532f79d3619.png)

##### 12-3. Protocolに``HTTP``を選択し、Portを``10080``に設定。VPCにはEC2インスタンスのVPCを選択。
※Portを10080にしている理由は、Nginxとの兼ね合いがあり、エラーとなることをふせぐため。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/10444a48-bdaa-3ce6-8d28-1ec1c2830f5c.png)

##### 12-4. その他はデフォルトのまま、「Next」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/b1da45ab-24e7-c921-5070-4dacecefc72f.png)

##### 12-5. Register targets画面で、対象のEC2インスタンスを選択し、「Include as pending below」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/271e5cb7-399f-f122-8c0c-3088eda0d711.png)


##### 12-6. Targetsの一覧に、対象のEC2インスタンスが追加されていることを確認し、「Create target group」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/83be7589-612e-c5f7-ff30-5afc703b0917.png)


#### 13. ロードバランサー作成画面に戻り、更新した後に作成したターゲットグループを選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/d0465a44-0ec0-1515-2602-8893849232f0.png)


#### 14. その他はデフォルトのまま、「Create load balancer」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/a63caf6c-2301-65ea-e4cd-f8b09a438ad0.png)


#### 15. 作成したロードバランサーのStateが``Active``になるまで待機。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/81394273-2e4b-24a1-eb41-61739bd9f61b.png)

アクティブになったことを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/785731c2-241c-fcbe-f5f0-50bbb57acf2c.png)


#### 16. AWSマネジメントコンソールにてEC2のダッシュボードに移動後、一覧から自身のEC2インスタンスのチェックボックスを選択し、セキュリティタブを開き、``セキュリティグループ``リンクをクリック。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/4c441481-2da5-44f3-9ac3-9f3aaf5c14c5.png)


#### 17.　「インバウンドのルールを編集」をクリック。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/0b04cdfe-0bfb-6391-a9b6-5c44c60c0e0c.png)


#### 18. 「ルール追加」をクリックし、以下のように、ポート：``10080``、ソース：``カスタム``＋``作成したALBのセキュリティグループ``を選択し、「ルールを保存」をクリック。※もともとあったhttp、httpsのルールは削除してよい。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/79ea7c49-0794-f4d7-753e-d712968a5e55.png)




## 環境変数の設定変更
#### 1. PuttyでEC2インスタンスにSSH接続を行う。

#### 2. .bash_profileをviエディタで編集し、環境変数ALLOWED_HOSTSを変更する
```bash:コマンド
# .bash_profileをviエディタで開く
sudo vi ~/.bash_profile
```

```bash:~/.bash_profile
# 変更：ALLOWED_HOSTSに＊（アスタリスク）を設定する
export ALLOWED_HOSTS='*'
```

#### 3. 変更を即座反映。
```bash:コマンド
source ~/.bash_profile
```

#### 4. 環境変数ALLOWED_HOSTSが変更されたか確認
```bash:コマンド
env | grep ALLOWED_HOSTS
```

#### 5. 変更後の環境変数を適用するため、Gunicornを再起動
```bash:コマンド
# gunicornプロセスの削除
pkill gunicorn
cd ~/venv_private_diary/private_diary/
# gunicorn起動
gunicorn --bind 127.0.0.1:8000 private_diary.wsgi -D
# gunicornプロセス確認
ps -ef|grep gunicorn
```

## Nginx設定ファイルの変更
#### 1. nginx.confのバックアップを作成。
```bash:コマンド
#　バックアップの作成
sudo cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf_bk
```
※バックアップは「nginx.conf_bk」という名前で作成されます。

#### 2. nginx.confをviエディタで編集し、listenのポートを10080に変更。
```bash:コマンド
#　nginx.confを修正
sudo vi /etc/nginx/nginx.conf
```

nginx.confの修正は下記の通り。
```bash:nginx.conf
    :(省略)
    server {
        listen       10080;    # 80 -> 10080 に変更
        listen       [::]:10080;    # 80 -> 10080 に変更
        :(省略)
```


#### 3. nginx.confの構文チェック
```bash:コマンド
sudo nginx -t
#下記のように出力されたらOK
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
```
※エラーが出た場合は、エラー内容にしたがってnginx.confを修正する。


#### 4. Nginxの再起動
```bash:コマンド
# nginx再起動
sudo systemctl restart nginx.service
# 状態の確認
sudo systemctl status nginx.service
```


## ロードバランサー経由での接続確認
#### 2. AWSマネジメントコンソールにてEC2のダッシュボードに移動し、左側のメニューから「ターゲットグループ」を選択。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/49bfb123-61bf-5e40-05dc-88964e7a0ec8.png)

#### 2. 自身が作成したターゲットグループのNameリンクをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/c289b2a4-4e05-893b-6fcc-7b14eeeccfe7.png)


#### 2. Health status が healthy となっていることを確認。Unhealthy の場合は、設定などに問題あり。先に進まずにセキュリティグループなどの設定を確認すること。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/04d2f8c4-eee4-4325-24bb-c899f1f0d7f1.png)


#### 2. EC2のダッシュボードに移動し、左側のメニューから「ロードバランサー」を選択。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/c347f88b-0945-1006-6b69-df40494fd76b.png)

#### 3. 自身が作成したロードバランサーの``DNS name``をコピー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/161261ba-3030-8581-91a8-a480f9ce0201.png)


#### 4. Chromeなどのブラウザにコピーした``DNS name``を入力しアクセス。画面が表示できればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427357/87fd72c4-5ce5-eb50-b604-7bfb28186248.png)

**■ページが表示されない場合**
PuttyでEC2インスタンスに繋ぎ、アクセスログを確認しましょう。

```bash:コマンド
# アクセスログ確認
sudo tail -f /var/log/nginx/access.log

10.0.17.60 - - [21/Nov/2022:09:52:54 +0900] "GET / HTTP/1.1" 200 3520 "-" "ELB-HealthChecker/2.0" "-"
```

ロードバランサー（ELB）のHealthCheckerによるログが記録されていれば、ロードバランサーからNginxに接続できていることが確認できます。
※接続されていない場合は、セキュリティグループなどの設定を確認しましょう。

**・ログの内容が``4xx``または``5xx``などのエラーコードを返している場合**
``"GET / HTTP/1.1" 500 ``のようにエラーコードを返している場合は以下のコマンドからDjangoのログを確認し、エラー内容から修正を行ってください。
※原因としては、Gunicornが起動していない、環境変数に誤りがある、といったものがありがち。

```bash:コマンド
# Djangoログ確認
sudo tail -f ~/venv_private_diary/private_diary/logs/django.log
```