如何编写Vite生产构建的Docker运行脚本（替代vite preview）

vite preview只是开发环境的预览工具，完全不适合生产环境——它没有优化性能、稳定性，也不具备生产级服务器的防护能力。Vite执行yarn build后会生成dist目录，里面是编译好的静态资源，生产环境需要用静态文件服务器来托管这些资源，下面是两种常用的实现方案：

方案1：用Node.js的serve包（轻量易上手） #

serve是专门用于托管静态资源的Node.js包，支持SPA路由重定向，适合快速部署。

修改后的Dockerfile（多阶段构建，缩小镜像体积）：

# 第一步：构建静态资源
FROM node:18 as build
WORKDIR /app
# 先复制依赖文件，利用Docker缓存优化构建速度
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
# 复制项目源码
COPY . .
# 执行构建命令（已包含tsc + vite build）
RUN yarn build

# 第二步：生产环境运行
FROM node:18-alpine
WORKDIR /app
# 从构建阶段复制编译好的dist目录
COPY --from=build /app/dist ./dist
# 全局安装serve包
RUN yarn add --global serve
# 暴露端口
EXPOSE 3001
# 启动静态服务器，-s参数适配SPA路由，-l指定端口
CMD ["serve", "-s", "dist", "-l", "3001"]

方案2：用Nginx（生产环境首选，性能最优） #

Nginx是专业的高性能静态服务器，比Node.js服务更稳定、资源占用更低，适合高流量场景。

步骤1：修改Dockerfile #

# 构建阶段
FROM node:18 as build
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
COPY . .
RUN yarn build

# 生产运行阶段
FROM nginx:alpine
# 将dist目录复制到Nginx默认的静态文件目录
COPY --from=build /app/dist /usr/share/nginx/html
# （可选）自定义Nginx配置，适配SPA路由和端口
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 3001
# 启动Nginx前台进程（Docker容器需要前台运行）
CMD ["nginx", "-g", "daemon off;"]

步骤2：创建Nginx配置文件（nginx.conf） #

如果需要修改端口为3001，或者处理SPA路由刷新404的问题，创建以下配置文件：

server {
    listen 3001;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # 适配SPA路由：所有路径都重定向到index.html，解决刷新404问题
    location / {
        try_files $uri $uri/ /index.html;
    }
}

关键说明 #

• 多阶段构建的核心是：构建阶段用完整的Node环境编译代码，运行阶段只保留必要的运行资源（dist目录 + 服务器），大幅缩小镜像体积。
• 如果你的项目不是SPA（比如多页面应用），可以去掉-s参数（serve方案）或try_files配置（Nginx方案）。

内容的提问来源于stack exchange，提问作者asi hej