.netCore + Angular環境をDockerで構築

はじめに

バックエンド：.NetCore、フロントエンド：Angular で開発する機会があったのでどうせならDockerで作ろうと思いました。
そこそこネット上に情報あるのですが、実際にやってみたら結構手間取ったので手順を残しておきます。
（Docker自体はもともと入れていたので省略）

概要

やること

• .NetCoreのimageを取得
• imageからコンテナを作成
• プロジェクト作成
• いろいろ入れる
• サーバ起動

作業

.NetCoreのimageを取得

Microsoft公式のDockerHubからimageを取得しました
どれを入れれば良いのか迷いましたが dotnet/sdk で問題なさそうです。
docker pullでimageを取得します。

docker pull dotnet/sdk

imageからコンテナを作成

（知識不足もあって）ここでだいぶ嵌りました。。後工程でサーバ起動時にポート問題でホスト側からアクセスできず。
.NetCore起動時にhttp:5000, https:5001のポートを使っていてhttpsに自動的にリダイレクトするようです。
コンテナ作成時に5000と5001両方使えるようにしました。

docker run --name dotnet -it --mount type=bind,src=$(pwd)/dotnet,dst=/vol -p 5000:5000 -p 5001:5001 mcr.microsoft.com/dotnet/sdk

mountとかnameとかはお好みで

プロジェクト作成

適当にディレクトリ切って.NetCoreプロジェクトを作成します。
new の後にangularといれるとangular用のテンプレートプロジェクトが作成されます。
参考：https://docs.microsoft.com/ja-jp/aspnet/core/client-side/spa/angular?view=aspnetcore-5.0&tabs=visual-studio

dotnet new angular

いろいろ入れる

node

angularの実行にnode.jsが必須のためインストールします。
使用したimageはDebian環境でそのままnodeのインストールができなかったので下記参考にインストールしました。
参考：https://qiita.com/naoyukiyama/items/29054cff00923f9543ce

curl -sL https://deb.nodesource.com/setup_10.x | bash
apt install -y nodejs

Angular

入れていない状態でもAngular用プロジェクト作成はできるようです。
AngularCliのバージョンは使いたいものがあれば指定しておいた方が良いです。
（後からバージョンアップはできるがダウングレードは入れ直しになってしまうので）

npm install -g @angular/cli@11.1.0

サーバ起動

これで起動できるのですが、ホストから接続するためにもうひと手間
開発環境では.NetCore側でlocalhostからのアクセスしか許容していないのでそこを解放します。
参考：https://mseeeen.msen.jp/asp-net-core-3-allow-access-to-kestrel-from-outside-in-development-mode/

appsettings.jsonに「"urls": "http://:5000;https://:5001",」を追加

{
  "urls": "http://*:5000;https://*:5001",
  "Logging": {
      "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
      }
    },
"AllowedHosts": "*"
}

起動します。

dotnet run

実行時に下記のようにlistenできていればOK

ホスト側ブラウザからアクセス
http://localhost:5000

HelloWorld画面が表示されれば環境構築完了です！