C# blazor server .net8 アプリを Visual Studio からdockerコンテナにビルド

## 動かすアプリ

https://github.com/arisaEN/kajiApp_blazor

## visual studio 操作
プロジェクト右クリして追加、Dockerサポート選べば勝手にDockerファイル作られます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/cb647029-a785-4f61-bd8d-a385b65273a3.png)

visual studioのdockerfileを右クリしてdockerfileをビルド

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/5996715c-58bc-47da-a69f-4522ed93bd41.png)

### docker見てみる

イメージもできてる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/0814b96e-7817-4c7f-85ee-dc697fffbc50.png)

### 実行ボタンをContainerにして押す。
visual studio のコンテナーログにコンテナのログが流れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/e607f593-722c-4290-803f-2aeead85cc7c.png)

コンテナ立ち上がった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/64329bf1-e120-4dc3-b8c7-28331aa96a22.png)

コンテナの中見る
32774:8080⁠ クリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/534a1d3f-4832-4977-adf4-6f4d8ca6a040.png)

接続できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/867aa8fc-f815-4526-bc52-648f66808b8d.png)

## 手動でdockerimageを作る方法。
↑のコンテナ起動方法ではvisual studioを落としたらコンテナも落ちちゃうので、手動でイメージを作り、手動でコンテナを作ってみます。

dockerfileを右クリックで作った後、コマンドプロンプトでcdコマンドを使いslnファイルのある位置までいく。
※右クリで作ったdockerfileはslnファイルから見たファイル構成となっているので、slnの位置から実行しないと層がズレます。
次のコマンドを実行
```
docker build --no-cache -t kajid . -f kajiApp_blazor/Dockerfile
docker run -d -p 2000:2001 --name kajid kajid
```

コンテナが立ち上がった。visual studioを落としてもコンテナが落ちずにwebアプリに接続できていることを確認してください。

## dockerfileちょっと説明
コメントの通りです。
dockerはdockerfile(dockerimage)とdocker run コマンドもしくはdocker-composeに依存してコンテナを立上げます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/1d4396a7-06da-4a54-8ae1-41cbee080b6b.png)

#### docker run コマンドについても少し説明
```
docker run -d -p 2000:2001 --name kajid kajid
```
docker run
→ 新しいコンテナを作成して実行するコマンド。
-d
→ デタッチドモード（バックグラウンドで実行）。
-p 2000:2001
→ ホストのポート 2000 をコンテナ内のポート 2001 にマッピング。
つまり、ホスト側の localhost:2000 にアクセスすると、コンテナ内の 2001 ポートへリクエストが転送される。
--name kajid
→ 作成するコンテナに kajid という名前を付ける。
kajid
→ 使用する Docker イメージの名前。kajid というイメージが事前に存在している必要がある。


## ハマりポイント①
他の端末からdockerコンテナで動かしているアプリへ接続できない。

IPアドレスで接続できない。
http://localhost:32774/ で接続できるけど、
http://100.64.16.151:32774/ で接続できない。 これで接続できないとホストマシン以外からwebアプリケーションに接続できない。

#### 調べてみると。
ASP.NET Core では、デフォルト設定のままだと localhost 以外のホスト名でアクセスするとエラー になります。
例えば、別のPCやスマホから http://100.64.16.151:5086/ にアクセスしようとすると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/254da36f-4e98-436e-83fa-2c68c5c8b516.png)

Bad Request Invalid Hostname(HTTP Error 400)

というエラーが出てしまいます。

この問題を解決するために必要なのが appsettings.json の AllowedHosts 設定 です。


## 【解決策】
appsettings.jsonの"AllowedHosts"を変更した。
 "AllowedHosts": "localhost", 
 から 
 "AllowedHosts": "*",
 に変更した。

◉リクエストの「ホスト名」を制限する設定 です。
◉これが設定されていないと、localhost 以外のリクエストを拒否 します。




 ### appsettings.json の AllowedHosts とは？


|設定値  |説明  |
|---|---|
|"*"  |すべてのホストを許可（どこからでもアクセス可能）  |
|"localhost"  |ローカルPC（localhost）からのみアクセス可能  |
|"100.64.16.151"  |特定のIPアドレスだけ許可   |


AllowedHosts は、リクエストの "Host" ヘッダー をチェックしてアクセスを制限する仕組み

## ハマりポイント②
visual studioからビルドしたアプリは意図した通り動くけど、dockerfileからビルドしてrunしたアプリは意図した通り動かない。

↓dockerfileからビルドしてrunしたもの。
設定ページ、管理者ページは動く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/e2827dbe-5ef3-448c-8820-6bd07685eed9.png)

Home、食費、生活費は動かない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/076cfffb-aa4d-48fa-be4f-0b95a03d5f38.png)


dockerログ見てみるとエラーでてる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/e57f95b6-9180-4bd9-bc89-732931115235.png)

## 解決策
現状の把握

親コンポーネント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/d386fb01-93bd-444d-8acc-e6d04a92f407.png)

子コンポーネント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/1f3f43d9-0abc-4924-ac7a-50599288f303.png)

この場合、 子コンポーネントがeatrecordで親から待ち受けているのに、 
親が<EatRecordList EatRecord="eatrecord" /子どもに EatRecordを渡そうとしているからです。

#### ここの大文字小文字は揃えないとエラーになります。

visual studioはパラメータエラーを黙認してくれることもあるらしいけど、dockerは厳しい。