Route53+ALB+EC2(WEB/AP分離構成)でHTTPS接続したらエラー出たので対処してみた

まいど！

作成したアプリをHTTPS接続させたいなぁと思って、AWSのインフラ構成を見直してよりセキュアなものに作り直す機会があったのですが、その際にいくつかのエラーと遭遇したので忘れないように対処等をまとめました！

##構成図
![Route53+ALB+EC2(web)+EC2(ap)+RDS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867277/b6974078-3095-83e3-9d71-33620c3cdaf1.png)


- ALBに証明書を割り当てる
- EC2は全てプライベートサブネットへ
- WEBサーバーとAPサーバーを分離
- WEBサーバーはキャッシュの読み込みとリバースプロキシ設定
- APサーバーは投稿画像をS3へアーカイブ
- メンテやエラー用の踏み台サーバー

##ALBを設定した際のunhealthy

ALBとターゲットグループの設定を行っていた所、状態がいつまでたってもunhealthyだったので見直しも兼ねて構築手順をまとめます。

###ALB設定手順

①EC2のナビゲーションペインからターゲットグループを選択し、右側の「ターゲットグループの作成」を選択します。
![資料１.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867277/21e3fd3a-89f3-9a03-9c81-9596f0bd75e7.png)

②ターゲットはインスタンスを選び、ターゲットグループ名、プロトコル、ポート、VPC、プロトコルバージョンを画像のように選択します。
![Inked資料２_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867277/828609fa-c6b0-0c3c-1b8d-bef660148a63.jpeg)


③ヘルスチェックの設定をします。私はここで成功コードを「200」に設定していました。本来はこれで問題ないのですが、リバースプロキシ設定を行っていたWEBサーバー側のNGINXから302リダイレクトが出ており、ALBがヘルスチェックの際にそれをキャッチし、結果としてunhealthy状態となっていました。解消策として、成功コードに302を記述し、リダイレクトの際もhealthyとしました。ちなみに、ターゲットグループに登録されたインスタンスが1台の場合は、ヘルスチェックの結果を問わず必ず転送するという仕様らしく、シンプルに作る場合はこういったunhealthy状態になることは稀です。

![資料３.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867277/63d4f05b-15d3-ef1f-7bf5-07ac68a0ceae.png)

④使用可能なインスタンスからWEBサーバーを選び、「保留中として以下を含める」を選択します。すると、ターゲットに保留中のWEBサーバーが追加されるので保存を選択します。
![Inked資料４_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867277/4d6ec695-962d-67c1-dd64-90caa6113754.jpeg)

⑤すると、ターゲットグループに登録されます。
![Inked資料５_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867277/13a07f32-0231-3872-5c3f-dfc4e9221e4d.jpeg)

⑥ALB用のセキュリティグループを作ります。HTTPSの443を開けます。忘れずに！
![InkedInked資料６_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867277/792e75f6-b765-f3e7-ce5d-ffc8d81ea2c3.jpeg)

⑦ナビゲーションペインからロードバランサーを選択し、名前とIPアドレスタイプ、ロードバランサーのプロトコル、AZをそれぞれ入力していきます。パブリックサブネットを２つ選択しておきましょう。
![Inked資料７_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867277/aa69d6c9-dd45-f861-7abc-c54cbf9b322b.jpeg)

⑧事前に用意しておいた証明書を選択します。
![Inked資料８_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867277/84feb849-31f4-cb94-7859-b1a8fd96a728.jpeg)

⑨セキュリティーグループとルーティングのターゲットグループは先ほど設定しておいたものを選択します。
![資料９.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867277/2489f1af-1653-8963-dbfb-8ada002c00c0.png)

⑩ターゲットの登録は済ませてあるのでそのまま進んで、作成を選択します。これでALBの設定は終わりです。

##Route53の設定

こちらは準備しておけば後はポチポチするだけなので簡単です。

①「レコードを作成」を選択します。
![Inked資料１１_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867277/c2bedac5-962d-647e-bf90-4344a3a26e50.jpeg)

②シンプルルーティングのAレコードでエイリアスを選択し、トラフィックのルーティング先はALBを選択し、レコードを作成します。
![資料１２.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867277/834ee1bc-6d2a-fdf3-b864-61c76f47a1e0.png)

設定は以上！

##なんかつながらない……

なぜだろう。繋がらない。

そんな時はログを見てみましょう。ひとまず、WEBサーバー側（NGINX)に踏み台サーバーから入って、ログをチェックしてみます。
すると、

```
 "POST /users/sign_in HTTP/1.1" 422 1705 "
```

これっぽいですね。

422エラーが起きてることがわかります。

> The HyperText Transfer Protocol (HTTP) の 422 Unprocessable Entity 応答状態コードは、サーバーが要求本文のコンテンツ型を理解でき、要求本文の構文が正しいものの、中に含まれている指示が処理できなかったことを表します。
[422 Unprocessable Entity](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/422)

WEBサーバー側の問題っぽい。NGINXはHTTPSを受け取っているのでそこら辺の設定をすれば通るはず。

という事で以下のどれか１つを/etc/nginx/conf.d/○○○.confに追加します。

```/etc/nginx/conf.d/hoge.conf
#どれか１つ追加！！！
proxy_set_header    X-Forwarded-Proto: https
proxy_set_header    X-Forwarded-SSL on;
```

####説明

> X-Forwarded-Proto (XFP) ヘッダーは、プロキシまたはロードバランサーへ接続するのに使っていたクライアントのプロトコル (HTTP または HTTPS) を特定するために事実上の標準となっているヘッダーです。
[X-Forwarded-Proto](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/X-Forwarded-Proto)

これで無事、アプリにログインすることができました！

以上！