记录将 Vue 前端项目部署到阿里云 ECS 服务器的流程，包括 Nginx 安装配置、静态文件托管、API 反向代理和自动化部署脚本。
一、服务器准备
前提：已有一台 ECS，公网 IP（例如 47.xx.xx.xx），后端 jar 已部署在 8080 端口。
安装 Nginx
ssh root@47.xx.xx.xx
yum install -y nginx
systemctl enable nginx
systemctl start nginx
配置安全组
在阿里云控制台 → 安全组规则，开放：
| 端口 | 用途 |
|---|---|
| 80 | HTTP（前端） |
| 443 | HTTPS |
二、Vue 项目打包
在本地前端项目目录执行：
npm run build
# 生成 dist/ 目录
上传到服务器：
scp -r dist/ root@47.xx.xx.xx:/opt/app/frontend/
三、Nginx 配置
创建 /etc/nginx/conf.d/myapp.conf：
server {
listen 80;
server_name 47.xx.xx.xx; # 改为你的公网 IP 或域名
# 前端静态文件
location / {
root /opt/app/frontend/dist;
index index.html;
try_files $uri $uri/ /index.html; # Vue Router history 模式
}
# 后端 API 反向代理
location /api/ {
proxy_pass http://127.0.0.1:8080/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
关键配置说明：
try_files $uri $uri/ /index.html：Vue Router history 模式必须配置，否则刷新页面会 404proxy_pass http://127.0.0.1:8080/：将/api/请求转发到本地后端，解决跨域问题proxy_set_header：传递原始请求头，后端可以获取真实客户端 IP
重载 Nginx：
nginx -t # 检查配置语法
systemctl reload nginx # 重载生效
四、验证部署
- 访问前端：浏览器打开
http://47.xx.xx.xx，应看到 Vue 页面 - 测试 API：
curl http://47.xx.xx.xx/api/xxx
# 应返回后端 JSON 数据，说明代理配置正确
- 验证 history 模式：在页面内导航到其他路由，刷新页面不 404
五、常见问题
前端页面空白
F12 打开开发者工具 → Network 面板：
- 静态文件加载失败 → 检查 Nginx
root路径 - API 请求 404 或跨域报错 → 检查
proxy_pass和location /api/
刷新后 404
try_files 配置错误或未配置。确保有 try_files $uri $uri/ /index.html。
Nginx 启动失败
nginx -t # 检查配置语法
journalctl -u nginx -n 20 # 查看错误日志
常见原因：端口被占用、配置文件语法错误。
静态资源缓存问题
部署新版本后浏览器仍显示旧页面，可配置 Nginx 缓存策略：
location / {
root /opt/app/frontend/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
# JS/CSS 资源长期缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf)$ {
root /opt/app/frontend/dist;
expires 30d;
add_header Cache-Control "public, immutable";
}
注意：index.html 不要缓存，否则新版本不生效。
六、自动化部署脚本
本地项目根目录创建 deploy.sh：
#!/bin/bash
SERVER="root@47.xx.xx.xx"
REMOTE_DIR="/opt/app/frontend"
# 前端打包
echo "==> 构建前端..."
npm run build
# 上传到服务器
echo "==> 上传到服务器..."
scp -r dist/ $SERVER:$REMOTE_DIR/
# 也可以将后端部署整合在一起
# mvn clean package -DskipTests
# scp target/myapp.jar $SERVER:/opt/app/
# ssh $SERVER "systemctl restart myapp"
echo "==> 部署完成: http://47.xx.xx.xx"
使用：
chmod +x deploy.sh
./deploy.sh
总结
前端部署核心流程：
Vue build → scp 上传 dist → Nginx 配置 → 反向代理后端 → 验证
Nginx 扮演两个角色：静态文件服务器 + API 反向代理。try_files 解决 Vue Router history 模式刷新 404，proxy_pass 解决前后端跨域问题。