首先

• 前提として、Dockerとnodeとnpmをインストールしておく必要があります。

 

• ホットリロードの設定も行っているので、リアルタイムで開発できます。

 

キャッシュや.dockergitgnoreを使って出来るだけ最適化しました。(つもり)

最终的文件夹结构

操作步骤

创建一个react项目

• Reactアプリケーションを作成するためのコマンドです。

 

• react-appというのがプロジェクト名(なんでもいい)で、react-appというディレクトリが作成されます。

 

プロジェクト名：react-app

#typescriptの場合
npx create-react-app react-app --template typescript
#jsvascriptの場合
npx create-react-app react-app

在项目中转移

(Note: The translation provided is in Simplified Chinese)

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:3001:3000だと、localhost:3001でアクセスできるようになります。

 

• サービス名は、なんでもいいです。プロジェクト名と同じにしました。

 

サービス名：react-app

version: "3"

services:
  react-app: #サービス名
    build: .
    volumes: #バインドマウント
      - ./:/usr/src/app
    command: npm start
    ports:
      - "3000:3000"

创建.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

 

コンテナ名：プロジェクト名-サービス名-連番

如果您想更多了解我的名字，请参考以下内容。