Vue 项目 Docker 多阶段构建部署指南（阿里云）

Vue 项目 Docker 多阶段构建部署指南（阿里云）

1. 核心配置文件

为了实现高效、小体积的部署，我们采用了 Docker 的**多阶段构建（Multi-stage Build）**方案。

1.1 nginx.conf (Nginx 配置)

解决 Vue 单页应用（SPA）刷新页面 404 的问题。

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # 核心配置：支持 Vue Router History 模式
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

1.2 Dockerfile (多阶段构建)

# --- 阶段一：构建阶段 ---
FROM node:20-alpine AS build-stage
WORKDIR /app
COPY package*.json ./
# 使用国内镜像源加速
RUN npm config set registry https://registry.npmmirror.com && npm install
COPY . .
RUN npm run build

# --- 阶段二：运行阶段 ---
FROM nginx:stable-alpine AS production-stage
# 从构建阶段拷贝打包后的静态文件
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 拷贝自定义 Nginx 配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

1.3 .dockerignore (忽略文件)

注意： 务必确保不要在 .dockerignore 中忽略 nginx.conf。

node_modules
dist
.git
# nginx.conf <-- 绝对不能写这一行，否则构建会报错找不到文件

---

2. 部署流程

2.1 构建镜像

在项目根目录下执行：

docker build -t ai-web .

2.2 运行容器

# 停止并删除旧容器（如果有）
docker stop ai-web-container || true && docker rm ai-web-container || true

# 启动新容器，建议先尝试非 80 端口（如 8080）以排除备案干扰
docker run -d -p 8080:80 --name ai-web-container ai-web

---

3. 故障排查手册（重点）

在部署过程中，我们遇到了从"文件缺失"到"网络 502"的典型问题，以下是解决方案：

问题 A：构建报错 nginx.conf: not found

• 原因 ：.dockerignore 文件中错误地过滤了配置文件。
• 解决 ：检查并删除 .dockerignore 中关于 *.conf 或 nginx.conf 的过滤规则。

问题 B：浏览器访问报错 502 Bad Gateway

• 关键发现 ：通过浏览器 F12 查看 Remote Address 为 127.0.0.1:17890。
• 原因 ：本地代理软件（如 Clash/VPN） 拦截了对服务器 IP 的请求。
• 解决：关闭本地代理软件，或将服务器 IP 加入代理白名单。

问题 C：服务器内部 curl 成功，外部访问超时

• 原因 1：阿里云安全组未开放 。
  • 解决：在阿里云 ECS 控制台 -> 安全组规则 -> 入方向，添加 TCP 80 或 8080 端口的允许规则（0.0.0.0/0）。
• 原因 2：80 端口被备案系统拦截 。
  • 解决 ：阿里云中国内地地域对 80 端口监管严格。若未备案，建议更换为 8080 等非标准端口。

---

4. 验证部署是否成功的标准步骤

1. 内部验证 ：在服务器执行 curl -I http://127.0.0.1:80。返回 200 OK 说明容器正常。
2. 公网验证 ：
   • 关闭本地 VPN/代理。
   • 使用手机 5G 网络（非 WiFi）访问 http://服务器IP:端口。
3. 日志检查 ：若有问题，执行 docker logs ai-web-container 查看 Nginx 实时错误。

---

5. 后续建议

• 域名与备案：若想使用 80 端口并绑定域名，需尽快完成阿里云 ICP 备案。
• HTTPS：生产环境建议配合阿里云 SSL 证书，将 Nginx 端口改为 443。
• 自动化：可以考虑使用阿里云"云效"或 GitHub Actions 实现代码提交即自动构建镜像并部署。