【備忘録】EC2でWebアプリを動かそうとした話

## 背景
作成したWebアプリを公開のため、以下のサイトを参考にEC2のIISを使用したがWebアプリとIISでポートが競合していた

https://tech.willserver.asia/2022/04/25/ec2-iis-2022/

## 結論
リバースプロキシを使用することで、Webアプリのポートに転送してくれる。

## ざっくり環境
・net Framework 8.0
・Blazor Web App
・EC2
・MySQL(今回関係ない)

## ローカル環境での動作確認
Webアプリをローカル環境のIISで動作確認を行った際、localhost:80にアクセスしても開くことができなかった。
これは、Webアプリがlocalhost:5000に接続しないと開くことができないようになっていた為だったので、IISのHTTPリダイレクトでlocalhost:5000に接続するようにして動作確認を行っていた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/8bd72c6b-c5ab-9592-b5a1-3755fe62d512.png)



ローカル環境で動作が確認できたので、「セキュリティグループ」や「Elastic IP」を設定しEC2のインスタンスにIISを立てデプロイ環境で動作確認に移った。

## デプロイ環境での動作確認
デプロイ環境でもローカル環境と同様にやれば、EC2のIPアドレスに接続すればWebアプリが開けると考えていた。
しかし、localhostにリダイレクトする為クライアント端末のlocalhostを開こうとしてしまうことが判明した。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/0494dc48-c475-e2a9-f8ff-e6bbf5a3f42d.png)


IISのポートを5000に変更すると今度はWebアプリと競合している為、Webアプリが開けなくなってしまうことも判明。

## リバースプロキシの存在と設定
IISのポートを同じにしてもダメならWebアプリ側のポートを80にしてもIISが開けないと外部接続ができない為、
ChatGPTに対応策があるかと聞いたところ、**リバースプロキシ**という機能がIISに存在するらしい。
これは、ユーザーがHTTPの標準ポート80でアクセスしても、IISが内部でポート5000にリクエストを転送してくれる機能で標準的に備わっていない為インストールする必要がある。

以下に別の方が書いた記事に設定とダウンロードサイトについて記載があるためこちらをご参考に

https://qiita.com/ExtremeCarvFJ/items/134012d0af00f6355e16#%E3%83%AA%E3%83%90%E3%83%BC%E3%82%B9%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7%E3%81%AE%E8%A8%AD%E5%AE%9A

簡略なシステム図は以下の通り。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/2c638f84-8a4c-add5-480a-123df2bfc2f6.png)

## まとめ
IISで外部からWebアプリに接続するときは、リバースプロキシを使用することが必要。
　
　
　
### おまけ
ChatGPTにリバースプロキシを聞いた際、
「ARR（Application Request Routing）をインストールし、リバースプロキシ設定してください」とあったが先ほどの記事にはARRをインストールしないでできている為、そちらを推奨します。
もし、ARRを使ったリバースプロキシを設定する場合は以下のダウンロードサイトからダウンロードして
perplexityとchatGPTで確認した方法ですが、インストールと設定を試してみてください。
※私は、こちらの方法で行いました。。。先ほどの記事に出会う前だったので。。。

インストーラー配布サイト

https://www.iis.net/downloads/microsoft/application-request-routing#additionalDownloads

### ARR インストールする手順
この手順は、perplexityで教えてもらったインストール方法です。
1. ARRのインストーラーをダウンロードする
    32ビット版: ARRv2_setup_x86.EXE
    64ビット版: ARRv2_setup_x64.EXE

     
2. 管理者権限でコマンドプロンプトを開き
WASとWMSVCプロセスを停止する
    ```
    net stop was /y
    net stop wmsvc /y
    ```
    
3. ダウンロードしたインストーラーを実行する
    ``` 
    ARRv2_setup_x64.exe
    ```
    (64ビット版の場合) 

4. 使用許諾契約に同意する
5. インストールが完了するまで待つ
    ・URL Rewrite Module
    ・Web Farm Framework
    ・Application Request Routing
    ・External Cache
    の4つのコンポーネントがインストールされます
6. インストール結果を確認する
    %TEMP%\arr_setup.logファイルで全てのコンポーネントが「成功」と表示されていることを確認
7. WASとWMSVCプロセスを再起動する
    ``` 
    net start was
    net start wmsvc
    ```

### ARRを用いたリバースプロキシの設定
この手順は、ChatGPTに教えてもらった設定方法です。
1. Application Request Routing (ARR) のインストール

    * IISマネージャーを開き、左側のサーバー名を選択します。
    * 右側の「Web プラットフォーム インストーラー」から「Application Request Routing (ARR)」を検索し、インストールします。

2. ARRのプロキシ設定を有効化
    * ARRをインストールしたら、IISマネージャーに戻ります。
    * サーバー名をクリックして、中央の「Application Request Routing Cache」をダブルクリックします。
    * 右側の「サーバープロキシの設定」をクリックし、「Enable proxy」のチェックをオンにします。
    * 設定を保存します。

3. URL Rewriteの設定
    * IISマネージャーで再度サーバー名を選択し、「URL Rewrite」をダブルクリックします。
    * 右側の「ルールの追加」をクリックし、「空のルール」を選択します。
    * ルールに名前（例: ReverseProxyRule）を付けます。
4. ルールの条件を設定
    * パターンの設定
        * 「一致するURL」セクションで「正規表現」を選択し、「パターン」欄に .*（すべてのURLにマッチするため）を入力します。
    * アクションの設定
        * 「アクションタイプ」を「リバース プロキシ」に設定します。
        * 「プロキシするURL」に、http://localhost:5000/{R:0} と入力します。
            * {R:0} は、転送するURLのパス部分を維持するために使用します。
        * アクションを保存します。
5. ファイアウォールとセキュリティグループの確認
    * AWSのセキュリティグループで、ポート80（HTTP）がインバウンドルールで許可されているか確認します。
    * Windowsファイアウォールでもポート80へのアクセスが許可されているか確認してください。
6. 確認
    * 設定が完了したら、ブラウザでドメイン名またはElastic IPアドレスにアクセスして、IISがWebアプリに転送されることを確認します。