# 实战：部署前端静态资源（Nginx）

前端项目（Vue/React 打包后的 dist）非常适合用 Nginx 静态托管，再通过 Docker 一键部署。

# 场景目标

使用多阶段构建生成前端产物
用 Nginx 托管静态文件
支持前端路由（history 模式）

# 项目目录示例

demo-web
├─ src
├─ public
├─ package.json
├─ Dockerfile
└─ nginx.conf

1
2
3
4
5
6

# Dockerfile（多阶段构建）

# 1) 构建阶段
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 2) 运行阶段（Nginx）
FROM nginx:1.27-alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# nginx.conf

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    # 解决 SPA 刷新 404（history 路由）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存策略（按需调整）
    location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff2?)$ {
        expires 7d;
        add_header Cache-Control "public, max-age=604800";
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 构建镜像

docker build -t demo-web:1.0 .

# 运行容器

docker run -d --name demo-web -p 8080:80 demo-web:1.0

浏览器访问：http://localhost:8080

# 常见问题

# 1）页面空白或资源 404

通常是前端打包 publicPath/base 与部署路径不一致。
确认前端构建配置和 Nginx 访问路径一致。

# 2）刷新子路由 404

没有配置 try_files $uri $uri/ /index.html;，补上即可。

# 3）修改后不生效

可能命中浏览器缓存，强刷或调整缓存策略后再验证。

# 小结

这个方案适合绝大多数前端站点部署：

Node 镜像负责构建
Nginx 镜像负责运行
镜像体积更小、启动更快、职责更清晰

← 实战：部署 Node 服务