目录：
机器上没有 Nodejs 运行环境，或者已安装的 Nodejs 版本不符合要求，使用 Docker 创建 node 容器来运行项目代码，并且需要支持热更新，方便开发调试。
以 dumi 项目为例进行介绍，其它脚手架比如 create-react-app 思路都是类似的。
安装 dumi 项目：
$ npx @umijs/create-dumi-lib
根目录下创建 Dockerfile 文件并写入如下内容：
如果项目根目录下已经有 package-lock.json 文件，可以将 npm install 改为 npm ci 这样安装依赖会更快。
# 使用官方Node.js镜像作为基础，选择与项目兼容的版本（如18、20）
FROM node:20.19.6-alpine
# 在容器内设置工作目录，所有后续命令将在此目录下执行
WORKDIR /app
# 首先复制依赖定义文件，利用Docker层缓存优化构建速度
COPY package*.json ./
# 安装项目依赖。在开发环境中，通常安装所有依赖（包括devDependencies）
RUN npm install --registry=https://registry.npmmirror.com/
# 复制项目所有源代码到容器（注意：运行时将通过挂载覆盖此拷贝，此步骤主要为初始化）
COPY . .
# 暴露React开发服务器默认端口
EXPOSE 8000
# 启动开发服务器。使用npm start，其背后通常是react-scripts start，支持热模块替换（HMR）
CMD ["npm", "start"]
构建镜像并创建容器：
# 构建镜像
$ docker build -t my-react-app .
# 创建容器
$ docker run -it -p 8000:8000 --name my-react-app-dev -v .:/app -v /app/node_modules my-react-app
-it 将容器内的打印信息在宿主机上显示出来；-p 8000:8000 将容器的端口8000映射到宿主机的8000端口；--name my-react-app-dev 定义容器名称，方便后续重启容器；-v .:/app 将当前目录与容器内 /app 目录进行挂载，实现代码同步；-v /app/node_modules 防止宿主机 node_modules 覆盖容器内的 node_modules；my-react-app 镜像名称；容器跑起来之后，在浏览器中访问 http://localhost:8000/ 即可访问项目。在宿主机中修改文件，可以看到网站上也会实时更新，方便开发调试。
如果不开发了，Ctrl + C 退出容器即可。之后想要继续开发，启动容器即可。
$ docker start my-react-app-dev
如果要删除容器，最好加上 -v 参数，会删除容器相关数据卷，卷里面有 node_modules 文件，会占用磁盘空间。
$ docker rm -v my-react-app-dev
机器上没有 Nodejs 运行环境，或者已安装的 Nodejs 版本不符合要求，有一个前端项目，需要使用 Docker 创建 node 容器运行代码，执行 npm run build 构建项目代码，并且构建产物 dist 目录在宿主机上也要存在。
$ docker run -it \
--name my-react-app-prod \
-v .:/app \
-v /app/node_modules \
-w /app \
node:20.19.6-alpine \
sh -c "npm install && npm run build"
说明：项目根目录下如果存在 package-lock.json 文件，可以将 npm install 改为 npm ci 这样安装依赖会更快。
之后再要编译只需要执行
$ docker start my-react-app-prod
如果想要在终端中看到编译过程，可以加上 -a 参数。
$ docker start -a my-react-app-prod
机器上没有 Nodejs 运行环境，或者已安装的 Nodejs 版本不符合要求，使用 Docker 创建 node 容器来运行项目代码，并且需要支持热更新，方便开发调试。
以 dumi 项目为例进行介绍，其它脚手架比如 create-react-app 思路都是类似的。
安装 dumi 项目：
$ npx @umijs/create-dumi-lib
项目根目录下创建 Dockerfile 文件并写入如下内容：
如果项目根目录下已经有 package-lock.json 文件，可以将 npm install 改为 npm ci 这样安装依赖会更快。
# 使用官方Node.js镜像作为基础，选择与项目兼容的版本（如18、20）
FROM node:20.19.6-alpine
# 在容器内设置工作目录，所有后续命令将在此目录下执行
WORKDIR /app
# 首先复制依赖定义文件，利用Docker层缓存优化构建速度
COPY package*.json ./
# 安装项目依赖。在开发环境中，通常安装所有依赖（包括devDependencies）
RUN npm install --registry=https://registry.npmmirror.com/
# 复制项目所有源代码到容器（注意：运行时将通过挂载覆盖此拷贝，此步骤主要为初始化）
COPY . .
# 暴露React开发服务器默认端口
EXPOSE 8000
# 启动开发服务器。使用npm start，其背后通常是react-scripts start，支持热模块替换（HMR）
CMD ["npm", "start"]
项目根目录下创建 docker-compose.yml 文件并写入如下内容：
services:
react-dev:
build:
context: . # 使用当前目录下的Dockerfile构建镜像
dockerfile: Dockerfile
container_name: my-react-app-dev
ports:
- "8000:8000" # 将宿主机的3000端口映射到容器的3000端口
volumes:
# 绑定挂载：将宿主机当前目录挂载到容器的/app目录，实现代码同步
- .:/app
# 重要：防止宿主机node_modules覆盖容器内的node_modules
- /app/node_modules
# 可选：设置环境变量，确保文件系统监听在Docker内正常工作
environment:
- CHOKIDAR_USEPOLLING=true
- WATCHPACK_POLLING=true
# 保持容器在前台运行，便于查看日志
stdin_open: true
tty: true
启动容器后在浏览器中访问 http://localhost:8000/ 即可访问项目。在宿主机中修改文件，可以看到网站上也会实时更新，方便开发调试。
$ docker-compose up --build
第一次运行时添加 --build 参数，在容器启动之前会构建 Docker 镜像，这个过程会安装依赖，后续运行就不需要再加 --build 参数了，除非 package.json 文件有更改，需要再加 --build 参数重新构建镜像。
$ docker-compose up --build
$ docker-compose up
$ docker-compose down -v # 移除容器并删除所有相关数据卷
↶ 返回首页 ↶