Reactをdevcontainerで構築するまで：ゼロから始める環境構築

ども！今回は、ゼロからReactの環境をVisual Studio Codeのdevcontainerで開発できる環境を作る技術ログを作成しています。Nodeを扱う上で、node_modulesをコンテナ内に収めて快適な開発環境を実現しています。Dockerで環境を作るのは後続の開発者のためですぞ！！

1 ご挨拶
2 ゼロから始める環境構築
3 終わり

ご挨拶

どもども！週末にスノボをして体中がバッキバキになっている龍ちゃんです。体の痛みで目が覚めたのは久しぶりですね。程よく執筆に対してもギアを上げていきます。

さて、今回も環境構築系の記事になります。具体的には「Visual Studio CodeのdevcontainerでReactを開発する環境」を作る内容になります。基本的な流れは、先日執筆した「Nest.js『だけ』をdevcontainerで構築する：ゼロから始める環境構築」と同じ流れになります。Reactの環境構築はViteでサクサク行うことができます。それをDockerで構築するのは若干骨が折れる作業です。なるだけシンプルに構築していきたいと思います。

それでは初めて行きましょう。

ゼロから始める環境構築

環境構築の流れの説明を入れておこうと思います。ざっくりと4ステップになります。

Nodeが使えるDockerの環境を作成する
Docker上でReactの環境を作成する
快適な開発のためにちょこちょこ設定変更
devcontainerで起動する

目指すところは、Viteで作成した初期画面を表示するところになります。今回目指すディレクトリ構造は以下になります。

.
├── .devcontainer　　　　　　　# devcontainer構成用のファイル
│   └── devcontainer.json
├── Dockerfile
├── docker-compose.yml
└── frontend                  # viteで構成したReactのファイル
    ├── .eslintrc.cjs
    ├── .gitignore
    ├── README.md
    ├── index.html
    ├── node_modules
    ├── package.json
    ├── public
    │   └── vite.svg
    ├── src
    │   ├── App.css
    │   ├── App.tsx
    │   ├── assets
    │   │   └── react.svg
    │   ├── index.css
    │   ├── main.tsx
    │   └── vite-env.d.ts
    ├── tsconfig.json
    ├── tsconfig.node.json
    ├── vite.config.ts
    └── yarn.lock

Nodeが使えるDocker環境を作成する

ここで作成が必要なのは、Dockerfileとdocker-compose.ymlになります。まずは、Dockerfileになります。

ARG NODE_VER
FROM node:${NODE_VER}

USER node
WORKDIR /home/node/app

Nodeのバージョンはdocker composeから弄れるようにしています。

次にdocker-compose.ymlになります。

version: '3.7'
services:
  react:
    build:
      args:
        - NODE_VER=20.10.0
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - .:/home/node/app

Dockerfileの変数を渡して起動しているシンプルなものです。ここまでコピペが終了したら、あとはbuildしておきましょう。

docker compose build

無事成功したら、この節は終了です。

Docker上でReactの環境を作成する

すでに作成したイメージでは、Nodeが使えるようになっておりyarnもnpmが実行することができます。以下のコマンドを実行することでViteで環境を作成することができます。

docker compose run --rm react yarn create vite

プロジェクトネームは任意で大丈夫です。この後も使用するので、こだわりがなければ以下の条件で作成してください。

✔ Project name: … frontend
✔ Select a framework: › React
✔ Select a variant: › TypeScript

作成すると、frontendというファイルができます。—rmオプションは実行後、コンテナを破棄するオプションなので今回の環境構築に適任です。

ここから先の処理は最後のほうに影響するので忘れずに記載してください。frontendの中のvite.config.tsというファイルを編集してください。

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

// <https://vitejs.dev/config/>
export default defineConfig({
  server: {
    host: true
  },
  plugins: [react()],
});

これは、コンテナ内でViteベースのReactを開くために必要な設定になります。

快適な開発のために変更：node_modulesをコンテナ内に収める

このままでも開発は進めることができるのですが、ホットリロードが遅いなどの開発体験が悪い可能性があります。これは、コンテナ外にnode_modulesが入っていることにより変更反映が頻繁に走るといった問題があるためです。これの解消のためにnode_modulesをコンテナ内に収める処理を入れていきます。

まずは、node_modulesを作成します。もしすでにnode_modulesがある場合は、削除して作成しましょう。作成する理由としては、事前に作成しないとrootユーザーでWSL側にファイルが作成されてややこしいからです。

mkdir frontend/node_modules

次にdocker-compose.ymlに変更を加えます。

version: '3.7'
services:
  react:
    build:
      args:
        - NODE_VER=20.10.0
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - ./frontend:/home/node/app
      - node_modules:/home/node/app/node_modules
    ports:
      - 5173:5173

volumes:
  node_modules:

具体的な変更点としては、以下になります。

Bindマウントの先をfrontendに変更
node_modulesをマウント
portを接続

最後にDockerfileを変更します。

ARG NODE_VER
FROM node:${NODE_VER}

USER node
WORKDIR /home/node/app

RUN mkdir node_modules

CMD ["/bin/bash", "-c", "yarn install && yarn dev"]

変更した点としては、コンテナ内でnode_modulesを作成するための処理が走っています。コンテナ内で作成する処理ですね。

ここまで来て、やっとで起動することができます。buildしてからupしましょう。

docker compose build

docker compose up

これで、http://localhost:5173にアクセスして「Hello World！」と返答があれば成功しています。

面白いのがnode_modulesがからのまま起動できている点です。実際は、コンテナ内のnode_moduleにパンパンに詰まっています。もしこの状態で、Visual Studio Codeを起動したら大量のエラーが吐かれます。それを解消するために、devcontainerで開発環境を作成します。

devcontainerで開発環境を作る

作成自体は簡単です。まずは、Visual Studio CodeでRemote Developmentをインストールしましょう。

こちらをインストールしたら、トップで.devcontainerというディレクトリを作成して、devcontainer.jsonというファイルを作成してコピペで保存してください。

{
    "name": "procject-dev",
    "dockerComposeFile": [
        "../docker-compose.yml"
    ],
    "service": "react",
    "workspaceFolder": "/home/node/app",
    "customizations": {
        "vscode": {
            "extensions": [
                "esbenp.prettier-vscode",
                "dbaeumer.vscode-eslint",
                "dsznajder.es7-react-js-snippets",
                "VisualStudioExptTeam.vscodeintellicode",
                "christian-kohler.path-intellisense",
                "mhutchie.git-graph",
                "donjayamanne.githistory",
                "oderwat.indent-rainbow",
                "formulahendry.auto-rename-tag",
                "vscode-icons-team.vscode-icons",
                "MariusAlchimavicius.json-to-ts",
                "wix.vscode-import-cost"
            ],
            "settings": {
                "files.encoding": "utf8",
                "files.eol": "\\n",
                "editor.defaultFormatter": "esbenp.prettier-vscode",
                "": {
                    "editor.defaultFormatter": "esbenp.prettier-vscode"
                }
            }
        }
    },
    "forwardPorts": [5173],
    "remoteUser": "node"
}

設定自体は、完了です。あとは、画面クリック作業になります。まずは左下をクリックしましょう。