はじめに
Dockerの学習をしてReactの環境構築をしたので忘備録としてまとめます。
実装環境
- mac
- VScode
- Docker Desktop
環境構築手順
今回はプロジェクト名をreact-docker-devcontainerとしています。
フォルダ構成
.
├── .devcontainer # devcontainer構成用のフォルダ
│ └── devcontainer.json
├── Dockerfile
├── docker-compose.yml
└── app # viteで構成したReactファイルを格納するフォルダDocker環境構築
まずは、作成したプロジェクトディレクトリに移動します。
cd react-docker-devcontainer次に、Dockerに必要なファイルを作成します。
Dockerfile
FROM node:22-alpine
WORKDIR /workspace
COPY ./package*.json ./
CMD ["/bin/sh"]
COPY . .docker-compose.yml
services:
app:
container_name: app
build: ./
tty: true
volumes:
- ./app:/workspace:cached
ports:
- 5173:5173Dockerコンテナの起動
Docker Desktopを起動して以下のコマンドでDockerコンテナを起動します。
docker compose up コマンド実行後、画像赤枠のようにコンテナが立ち上がっていたら成功です。
ViteでReactプロジェクトの作成
以下のコマンドで起動したコンテナ内に入ります
docker compose exec app shターミナル上に画像のように/workspace #とでていたら起動しているDockerコンテナ内に入れていて成功です。
この/workspaceはDockerfileで設定したWORKDIR /workspaceになります。
次に、以下のコマンドでReactプロジェクトを作成します。
npm create vite@latest . -- --template reactプロジェクト作成後、画像のようになったらnpm installを実行します。
npm run dev実行前にvite.config.jsを以下のように変更します。
これはコンテナでviteを立ち上げるためのお作法だと思っていただければと思います。
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vite.dev/config/
export default defineConfig({
server: {
host: true,
},
plugins: [react()],
});ファイル変更後、npm run devを実行します。
画像の様な画面になったら成功です。
以上でdocker + Viteでの環境構築は完了です。
次はdevcontainerの環境を構築します。
一度docker compose downでdockerを止めましょう。
VS code拡張機能DevContainersのインストール
devcontainerを起動するにはVScodeの拡張機能DevContainersをインストールする必要があります。
インストールしてなければしましょう。
必要ファイルの作成
トップで.devcontainerというディレクトリを作成して、devcontainer.jsonというファイルを作成して以下をコピペで保存してください。
{
"name": "app-container",
"service": "app",
"workspaceFolder": "/workspace",
"dockerComposeFile": "../docker-compose.yml",
"customizations": {
"vscode": {
"extensions": [
"dsznajder.es7-react-js-snippets",
"formulahendry.auto-rename-tag",
"formulahendry.auto-close-tag",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"ms-ceintl.vscode-language-pack-ja",
"oderwat.indent-rainbow"
]
}
}
}ファイル内の”extensions”はvs codeの拡張機能です。
例えば、ES7+ React/Redux/React-Native snippetsを利用したいときは画像右下の識別子を”extensions”に含めます。
これで準備は完了です。
devcontainerで環境を立ち上げる
VS code 左下の青いボタンを押下後、コンテナーで再度開くを選択します。
左下の青いボタンが開発コンテナーと表示されれば成功です。
docker Desktopを確認してもコンテナが立ち上がっていると思います。
また、拡張機能を確認すると開発コンテナーにインストールされた拡張機能が表示されていると思います。これは開発コンテナー内にのみインストールされている拡張機能なので開発コンテナーの接続を終了するとこの拡張機能も消えます。これで複数言語で開発をする方もローカル環境の拡張機能を汚さずに開発することができます。
おまけ
Dockerfileを以下のよう修正することでDevcontainer起動時に自動でnpm rnu devを実行してサーバーを立ち上げることもできます。
FROM node:22-alpine
WORKDIR /workspace
COPY ./package*.json ./
CMD ["/bin/sh", "-c", "npm install && npm run dev"]
COPY . .修正したら必ずdocker compose buildでbuildし直してください。
Devcontainerを立ち上げてhttp://localhost:5173/に接続すると同じようにViteの画面が表示されると思います。
まとめ
いかがでしたでしょうか？今回はVite + Docker + DevcontainerでReactの環境構築をしてみました。devcontainerはローカルの開発環境を汚さないために重宝すると思うのでぜひ試してみてください。