前端项目用Docker部署的核心是打包静态资源后交由Nginx容器托管，关键三步：编写Dockerfile（推荐多阶段构建）、配置nginx.conf（解决history路由404及缓存）、构建并运行容器；全程不依赖本地环境，可复现、易迁移。
前端项目用 Docker 搭建，核心是把静态资源打包后放进 Nginx 容器运行，关键在三步：写好 Dockerfile、配对 nginx.conf、构建并启动容器。不依赖本地环境，也不手动装 Nginx，整套流程可复现、易迁移。
准备构建产物（dist 文件夹）
确保项目已本地验证通过，再执行构建命令生成生产级静态文件：
- Vue 项目：运行
npm run build或yarn build，输出默认在dist/ - React/Vite 项目：同理，
npm run build，确认dist/目录存在且含index.html等文件 - 检查 dist 内容是否完整（尤其图片、字体、JS/CSS 路径），避免因 public 资源未正确引用导致上线后 404
编写多阶段 Dockerfile
推荐用多阶段构建，分离构建环境与运行环境，最终镜像轻量、安全：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 第一阶段用
node:16-alpine安装依赖并执行npm run build - 第二阶段基于
nginx:alpine，只复制dist和自定义配置，不带 Node 环境 - 示例关键片段：
FROM node:16-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm install --production=false COPY . . RUN npm run build <p>FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
配置 nginx.conf 解决常见问题
默认 Nginx 配置不支持 Vue/React 的 history 模式路由，需手动补全关键项：
立即学习“前端免费学习笔记（深入）”；
-
try_files $uri $uri/ /index.html;—— 解决刷新页面 404 -
location ~* \.(js|css|png|jpg|gif|ico)$ { expires 1y; }—— 启用静态资源强缓存 - 如需代理 API，加
location /api/ { proxy_pass http://backend; }，并在upstream块定义后端地址 - 务必把该文件放在项目根目录，和 Dockerfile 同级，确保 COPY 能正确覆盖
构建与运行容器
在项目根目录执行以下命令即可完成部署：
- 构建镜像：
docker build -t my-frontend . - 运行容器：
docker run -d -p 80:80 --name frontend-app my-frontend - 验证服务：
curl http://localhost或浏览器访问服务器 IP - 查看日志：
docker logs frontend-app，排查 404 或配置加载失败
