如何在阿里云服务器上部署Vue或React前端项目？

在阿里云服务器（ECS）上部署 Vue 或 React 前端项目，本质上是将构建后的静态文件（HTML/CSS/JS）通过 Web 服务器（如 Nginx）对外提供服务。以下是完整、安全、生产就绪的部署流程（以 Ubuntu 22.04 为例，也适用于 CentOS/Rocky Linux）：

✅ 一、前提准备

1. 已购买并启动阿里云 ECS 实例

   • 推荐配置：2核4G（轻量级项目）、系统镜像：Ubuntu 22.04 LTS（或 CentOS 7+/Rocky 8+）
   • 安全组开放端口：80（HTTP）、443（HTTPS，可选但强烈推荐）、22（SSH）

2. 本地开发环境已构建好项目

   • Vue：运行 npm run build（Vue CLI）或 pnpm build（Vite），输出目录默认为 dist/
   • React：运行 npm run build（CRA）或 pnpm build（Vite/Next.js 静态导出），输出目录默认为 build/ 或 dist/

✅ 二、服务器初始化（SSH 登录后执行）

# 更新系统
sudo apt update && sudo apt upgrade -y  # Ubuntu/Debian
# 或 CentOS/Rocky：
# sudo dnf update -y

# 安装必要工具
sudo apt install -y nginx curl wget git gnupg2

# 启动并开机自启 Nginx
sudo systemctl enable nginx
sudo systemctl start nginx

✅ 验证：浏览器访问 http://你的ECS公网IP，应看到 Nginx 欢迎页。

✅ 三、上传构建产物（3 种推荐方式）

✅ 方式 1：SCP（最简单，适合小项目）

# 本地终端执行（替换为你的服务器信息）
scp -r ./dist/ ubuntu@<ECS公网IP>:/var/www/my-vue-app/
# 或 React 的 build/ 目录
scp -r ./build/ ubuntu@<ECS公网IP>:/var/www/my-react-app/

✅ 方式 2：Git + 钩子（适合团队协作 & 自动化）

• 在服务器创建裸仓库，配置 post-receive 钩子自动部署（进阶，略，需要时可补充）

✅ 方式 3：使用 rsync（增量同步，推荐）

# 本地执行（更高效、支持断点续传）
rsync -avz --delete ./dist/ ubuntu@<ECS公网IP>:/var/www/my-vue-app/

⚠️ 注意权限：确保 Nginx 可读取文件

sudo chown -R www-data:www-data /var/www/my-vue-app
sudo chmod -R 755 /var/www/my-vue-app

✅ 四、配置 Nginx（关键！处理路由 & SPA 问题）

Vue/React 是单页应用（SPA），直接访问 /about 会 404（Nginx 找不到该文件）。需配置 try_files 回退到 index.html。

创建站点配置文件：

sudo nano /etc/nginx/sites-available/my-app

✅ 粘贴以下配置（适配 Vue/React）：

server {
    listen 80;
    server_name your-domain.com;  # 替换为你的域名（或留空用 IP 访问）
    root /var/www/my-vue-app;     # ✅ 指向你上传的 dist/build 目录
    index index.html;

    # 关键：SPA 路由回退（所有非静态资源请求都指向 index.html）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存优化
    location ~* .(js|css|png|jpg|jpeg|gif|ico|svg|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 禁止访问敏感文件
    location ~ /.ht {
        deny all;
    }
}

启用站点：

# 创建软链接启用
sudo ln -sf /etc/nginx/sites-available/my-app /etc/nginx/sites-enabled/

# 测试配置语法
sudo nginx -t

# 重载 Nginx（不中断服务）
sudo systemctl reload nginx

✅ 验证：访问 http://<ECS公网IP> 或 http://your-domain.com，应正常加载页面，且前端路由（如 /about）可直接访问。

✅ 五、【强烈推荐】配置 HTTPS（免费 SSL）

使用 Certbot（Let’s Encrypt）自动签发证书：

# 安装 Certbot
sudo apt install -y certbot python3-certbot-nginx

# 获取证书（需已绑定域名并解析到 ECS 公网 IP）
sudo certbot --nginx -d your-domain.com

# ✅ 自动配置 HTTPS + HTTP 强制跳转（Certbot 会自动修改 Nginx 配置）
# 后续自动续期（Certbot 已配置定时任务）

🔐 此时访问 https://your-domain.com 将启用绿色锁标志，提升安全性与 SEO。

✅ 六、（可选）环境变量与 API X_X处理

前端项目通常调用后端 API，注意：

• ❌ 不要在 vue.config.js/vite.config.ts 中配置 proxy（仅开发环境有效，部署后无效）
• ✅ 正确做法：
  • 方式1（推荐）：API 请求使用相对路径（如 /api/users），Nginx 反向X_X到后端：

    location /api/ {
    proxy_pass http://127.0.0.1:3000/;  # 后端服务地址
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    }

  • 方式2：构建时通过 VUE_APP_API_BASE_URL 或 REACT_APP_API_URL 注入（需重新构建）

✅ 七、常见问题排查

✅ 附：一键部署脚本（可选）

将以下保存为 deploy.sh，上传后运行：

#!/bin/bash
APP_NAME="my-vue-app"
DIST_DIR="./dist"
SERVER_PATH="/var/www/$APP_NAME"

rsync -avz --delete "$DIST_DIR/" ubuntu@<IP>:"$SERVER_PATH/"
ssh ubuntu@<IP> "sudo chown -R www-data:www-data $SERVER_PATH && sudo systemctl reload nginx"
echo "✅ Deployed!"

✅ 总结：最佳实践清单

• ✅ 本地构建，上传静态文件（不推荐服务器构建）
• ✅ 使用 Nginx 提供服务（轻量、稳定、高性能）
• ✅ 必配 try_files $uri $uri/ /index.html; 解决 SPA 路由
• ✅ 强制 HTTPS（Let’s Encrypt + Certbot）
• ✅ API 请求走 Nginx 反向X_X，避免跨域
• ✅ 设置静态资源缓存 & 权限控制
• ✅ 域名解析 + 安全组放行 80/443

需要我为你生成：

• 📄 完整的 nginx 配置模板（含 HTTPS/X_X/API 重写）？
• 🐳 Docker 部署方案（Nginx 容器化）？
• 🔄 GitHub Actions 自动化部署流水线？
• 🌐 Vue Router / React Router v6 的具体 base 配置示例？

欢迎随时告诉我，我可以为你定制！🚀