はじめに
- 前提として、Dockerとnodeとnpmをインストールしておく必要があります。
- ホットリロードの設定も行っているので、リアルタイムで開発できます。
最終フォルダ構成
手順
reactプロジェクトの作成
- Reactアプリケーションを作成するためのコマンドです。
- react-appというのがプロジェクト名(なんでもいい)で、react-appというディレクトリが作成されます。
- プロジェクト名：react-app
#typescriptの場合
npx create-react-app react-app --template typescript
#jsvascriptの場合
npx create-react-app react-app
プロジェクト内に移動
-
cd react-appで先ほど任意の名前で作成したディレクトリに移動します。
Dockerfileの作成
-
npm installを行う前に、package.jsonとpackage-lock.jsonをコピーしています。 - これは、キャッシュを有効に活用するうえで大事です。
- こうすることで、パッケージの追加変更がない場合は、
npm inatallをスキップしてくれます。
FROM node:20-alpine
ENV NODE_ENV=development
WORKDIR /usr/src/app
COPY package.json package-lock.json .
RUN npm install
COPY . .
docker-compose.ymlの作成
- バインドマウントなどを設定します。
- 開発用の場合、バインドマウントを設定しないとコンテナとローカルが同期しないので、コードの変更がすぐに反映されません。
- もし過去に、
ports:3000:3000で作ったことがある人はports:3001:3000にしてみてください。 -
ports:3001:3000だと、localhost:3001でアクセスできるようになります。 - サービス名は、なんでもいいです。プロジェクト名と同じにしました。
- サービス名：react-app
version: "3"
services:
react-app: #サービス名
build: .
volumes: #バインドマウント
- ./:/usr/src/app
command: npm start
ports:
- "3000:3000"
- ちなみに、DockerDesktopだと、こんな感じで構成されます。
.dockerignore ファイルの作成
- これは、やらなくても動きます。ビルド時間を高速、イメージサイズの縮小を行いたい場合は、やってください。
- node_modulesを含めずイメージを作成してくれます。
node_modules
- ちなみに、.dockerignoreを作った場合と、作らなかった場合のイメージサイズの差は以下です。
my_image without_ignore e81679e750c2 35 seconds ago 887MB ←作らなかった場合
react-app-react-app latest 3b4226fc0f36 33 minutes ago 601MB ←今回(作った場合)
コンテナの作成と立ち上げ
docker compose up --build -d-
localhost:3000にアクセスして、無事reactっぽい画像が出たらOK。 - コンテナ名(NAMES)：プロジェクト名-サービス名-連番で自動作成されていることが確認できます。
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
55db0e4caff9 react-app-react-app "docker-entrypoint.s…" 38 minutes ago Up 26 minutes 0.0.0.0:3000->3000/tcp react-app-react-app-1
ホットリロードを有効化
-
Package.jsonに、以下を追加
"scripts": {
"start": "WATCHPACK_POLLING=true react-scripts start",
- 変更が即反映されるようになる
まとめ
- 今回は、開発用の環境開発を行いました。
- Dockerfileとdocker-compose.ymlは、開発用と本番用に分けたほうがいいらしいです。
- 開発用は、バインドマウントの設定、開発に便利なパッケージなど、本番用では不必要なものも含みます。
- 本番環境では、マルチビルドを用いて、ビルドに必要なものだけを含め最小化することが大事です。
ちなみに
今回は、プロジェクト名、サービス名、コンテナ名は以下になっています。
- プロジェクト名：react-app
- サービス名：react-app
- コンテナ名：プロジェクト名-サービス名-連番
名前についてもっと知りたい方は以下を参考にしてください