Docker部署Vue React项目
刚写完前端项目，却不知道怎么部署到服务器？
用Docker可以一键打包你的Vue或React应用，环境隔离、迁移方便。
本文按步骤教你完成，不需要懂Docker原理也能上手。
准备条件
- 一台安装了Docker的服务器（推荐CentOS 7+或Ubuntu 20.04+），执行
docker --version确认版本。 - 一个能正常构建的Vue或React项目（例如用Vue CLI或Create React App创建）。
- 本地已安装Node.js（用于构建项目），但服务器上不需要Node。
编写Dockerfile：多阶段构建，镜像更小
在项目根目录创建名为Dockerfile的文件（无后缀）。
下面是一个通用模板，同时适配Vue和React（构建命令不同时只需改构建步骤）：
# 第一阶段：构建项目
FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 如果是Vue项目，执行 npm run build
# 如果是React项目，执行 npm run build
RUN npm run build
# 第二阶段：运行环境
FROM nginx:stable-alpine
COPY --from=build /app/dist /usr/share/nginx/html
# 复制自定义nginx.conf（可选，用于处理路由历史模式）
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]注意： Vue和React的构建输出目录默认都是dist/；
如果你用Vite，输出目录可能是dist/或build/，请根据实际修改COPY --from=build的路径。
如果使用Vue Router的history模式或React Router，需要配置Nginx处理前端路由。
在项目根目录创建nginx.conf：
server {
listen 80;
server_name _;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
}然后Dockerfile中需要把nginx.conf复制进去（上面已包含）。
构建镜像并运行容器
打开终端，进入项目目录（Dockerfile所在位置），依次执行：
# 构建镜像，标签设为my-frontend:latest
docker build -t my-frontend:latest .
# 运行容器，映射本机8080端口到容器80端口
docker run -d -p 8080:80 --name my-app my-frontend:latest-d后台运行，--name给容器取个名字方便管理。
现在访问http://服务器IP:8080就能看到你的前端页面。
常见问题与避坑
1. 容器启动后页面白屏或404
原因通常是构建输出路径不对或Nginx未正确配置。检查COPY路径：进入容器docker exec -it my-app sh，查看/usr/share/nginx/html下是否有index.html。若没有，修改Dockerfile中的构建输出目录。
2. 端口冲突
如果8080被占用，换一个端口再docker run，例如-p 3000:80。
3. 环境变量问题
前端项目通常通过VUE_APP_*或REACT_APP_*传递环境变量。在Docker多阶段构建中，这些变量需要在构建阶段传入。例如：
docker build --build-arg VUE_APP_API_URL=https://api.example.com -t my-frontend .并在Dockerfile中添加ARG：
ARG VUE_APP_API_URL
ENV VUE_APP_API_URL=$VUE_APP_API_URL注意：React的环境变量必须在构建时硬编码进代码，所以必须通过--build-arg传入。
4. 镜像体积过大
尽量使用alpine版本镜像，并清理不必要的文件。多阶段构建已经大幅减小体积，但还可以在构建阶段加上RUN npm prune --production删除dev依赖。
效果验证
访问http://服务器IP:映射端口，页面正常显示且路由跳转无404即成功。
可以在浏览器打开开发者工具查看网络请求，确认静态资源加载正常。
如果要更新代码，只需重新构建镜像并启动新容器：
docker stop my-app
docker rm my-app
docker build -t my-frontend:latest .
docker run -d -p 8080:80 --name my-app my-frontend:latest最后提醒
- 服务器防火墙要放行对应端口（如8080），例如CentOS执行
firewall-cmd --add-port=8080/tcp --permanent && firewall-cmd --reload。 - 如果使用宝塔面板，可以在“安全”中添加端口规则，或在“Docker”管理器里直接管理容器。
- 对于生产环境，建议使用
docker-compose编排后端API和数据库，并配置反向代理。
现在动手试试吧！
如果你在部署中遇到其他报错，欢迎在评论区留言一起排查。
