zukucode
主にWEB関連の情報を技術メモとして発信しています。
Docker

ASP.NET Core + Reactの開発環境をDockerで作成する

ASP.NET Core+Reactのプロジェクトの開発環境をDockerで作成します。

前提として、dockerとdocker-composeはインストール済みとします。

Windows10 にdockerとdocker-composeをインストールする手順は以下で紹介しています。 - Windows10にWSL2をインストールする - Windows10のWSL2(Ubuntu)にDockerをインストールする

Dockerfile の作成

まずはDockerfileを作成します。

ベースイメージはASP.NET Core 6の公式イメージを使用します。

Dockerfileは以下の場所に作成します。

プロジェクトが大きくなればデータベースのコンテナなども追加することになるので、ASP.NETのソースコードを実装する開発環境はappコンテナとしてフォルダ分けしておきます。

  • docker
    • app
      • Dockerfile

Reactの開発環境も同じコンテナ内に作成するため、node.jsもインストールします。

コンテナ内での作業フォルダとして、codeという名前のフォルダを作成しておきます。

dockerというユーザー名でユーザーを作成して、このユーザーで作業を行うようにします。

最後のdotnet dev-certs https --trustで、開発環境でhttpsを使用できるようになります。

FROM mcr.microsoft.com/dotnet/sdk:6.0-focal

# install nodejs
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - \
    && apt-get install -y nodejs

# source
RUN mkdir /code
WORKDIR /code

# host user
ARG UID=1000
ARG GID=1000
RUN useradd -m -u ${UID} docker
USER ${UID}:${GID}

RUN dotnet dev-certs https --trust

docker-compose.yml の作成

docker-compose.ymlを作成します。

プロジェクトのルートフォルダに作成します。

  • docker
    • app
      • Dockerfile
  • docker-compose.yml ← 作成

ホスト側のプロジェクトルートと、作業コンテナ内のcodeフォルダをバインドさせます。

サービス名はappとします。

docker-compose.yml
version: "3.2"
services:
  app:
    build: ./docker/app
    tty: true
    environment:
      TZ: Asia/Tokyo
    volumes:
      - ./:/code

以下のコマンドでビルドが正常に行われることを確認します。

docker-composeのコマンドはインストール方法によって-がついたりつかなかったりします。

$ docker compose build
$ docker-compose build #環境によってはこっち

VSCode でコンテナを開く

上記で作成したappコンテナをVSCodeで開きます。

dockerコンテナをVSCodeで開く詳しい説明はDocker コンテナをVSCodeで開いて開発環境を構築するで紹介しています。

VSCodeで開くための設定ファイルを作成します。

プロジェクトルートに.devcontainerという名前のフォルダを作成し、.devcontainer.jsonという名前のファイルを作成します。

  • .devcontainer
    • .devcontainer.json ← 作成
  • docker
    • app
      • Dockerfile
  • docker-compose.yml
.devcontainer.json
{
  "name": "ASP.NET + React",
  "dockerComposeFile": [
    "../docker-compose.yml"
  ],
  "service": "app",
  "workspaceFolder": "/code",
  "remoteUser": "docker",
  "extensions": [
    "ms-dotnettools.csharp",
    "editorconfig.editorconfig",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

設定内容の説明です。

name
自由に設定します。
dockerComposeFile
上記で作成したdocker-compose.ymlのパスを指定します。
service
docker-compose.ymlで指定したサービス名を指定します。
workspaceFolder
VSCodeで開いた時のプロジェクトコードとなるコンテナ内でのフォルダパスです。
remoteUser
VSCode内（コンテナ内）でのユーザーを指定します。
extensions
VSCode内（コンテナ内）で使用する拡張機能を指定します。

extensionsには以下を指定しています。

拡張機能は後から個別にインストールすることが可能ですが、複数人で作業をする場合などは、開発環境を合わせるために、あらかじめ拡張機能は設定しておくと便利です。

ms-dotnettools.csharp
C#の開発環境
editorconfig.editorconfig
editorconfigを使用できるようにする
dbaeumer.vscode-eslint
eslintを使用できるようにする
esbenp.prettier-vscode
prettierを使用できるようにする

VSCodeの右下のエリアをクリックすると、メニューが表示され、「Reopen in Container」という項目があるので、それを選択すると、コンテナが起動され、コンテナの中身を VSCode で開くことができます。

確認

VSCodeでctrl+@を押すとターミナルを起動して、dotnet --versionとnode -vのコマンドを実行し、それぞれバージョンが表示されることが確認できます。

$ dotnet --version
6.0.403
$ node -v
v16.18.1

以上で開発環境の作成は完了です。

ASP.NET Core + Reactのプロジェクトを作成するで実際にプロジェクトを作成していきます。

Docker

関連記事