首页/Nginx/如何用 Nginx 部署 React/Vue SPA 应用？

如何用 Nginx 部署 React/Vue SPA 应用？

前端 SPA 应用部署到 Nginx 后，刷新页面 404

解决方案

配置 try_files 回退 推荐 

server {
    listen 80;
    server_name app.example.com;
    root /var/www/app/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location ~* \.(css|js|jpg|png|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

try_files 先尝试匹配真实文件，找不到就回退到 index.html，让前端路由接管。静态资源单独设置长期缓存。

适用场景：所有 SPA 应用（React、Vue、Angular）

Docker 多阶段构建部署 

# Dockerfile
FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

第一阶段构建前端，第二阶段用 Nginx 托管。最终镜像只有 Nginx + 静态文件，体积小。

适用场景：容器化部署、CI/CD 流水线