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

在阿里云服务器上部署 Vue 或 React 前端项目，通常分为 构建打包、上传文件、配置 Web 服务器（如 Nginx）三个核心步骤。以下是完整、实用的部署流程：

✅ 一、本地构建项目

1. 安装依赖并打包

在项目根目录执行：

npm install        # 或 yarn install / pnpm install
npm run build      # 生成 dist/ 或 build/ 目录
# Vue: 默认输出到 dist/
# React (create-react-app): 默认输出到 build/

💡 注意：确保 .env 中的 VUE_APP_ 或 REACT_APP_ 环境变量已正确配置生产环境地址（如 API 域名）。

✅ 二、上传前端文件到阿里云 ECS

方法一：使用 SCP/SFTP（推荐）

# 将本地构建目录上传到服务器
scp -r ./dist/* root@your_server_ip:/var/www/html/my-frontend
# 或根据实际路径调整，例如 /home/user/project/dist

方法二：使用 Git + CI/CD（进阶）

• 将代码推送到 GitHub/GitLab
• 配置阿里云云效（CloudFlow）或自建 Jenkins 自动构建 + 部署

✅ 三、配置 Nginx 服务器（关键步骤）

1. 安装 Nginx

sudo yum install nginx -y          # CentOS/RHEL
# 或
sudo apt update && sudo apt install nginx -y   # Ubuntu/Debian

启动并设置开机自启：

sudo systemctl start nginx
sudo systemctl enable nginx

2. 配置 Nginx 站点

创建配置文件（示例 /etc/nginx/conf.d/frontend.conf）：

server {
    listen 80;
    server_name your_domain.com;  # 替换为你的域名或 IP

    root /var/www/html/my-frontend;  # 与上传路径一致
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # ✅ 解决 SPA 路由刷新 404 问题
    }

    # 可选：Gzip 压缩
    gzip on;
    gzip_types text/plain application/json application/javascript text/css;
}

🔑 try_files 是单页应用（SPA）部署的关键：当访问 /user/profile 时，Nginx 会回退到 index.html，由前端路由处理。

3. 测试并重载配置

sudo nginx -t              # 检查语法
sudo systemctl reload nginx

✅ 四、开放安全组端口（阿里云控制台操作）

1. 登录 阿里云 ECS 控制台
2. 找到你的实例 → 安全组 → 配置规则
3. 添加入方向规则：
   • 协议：TCP
   • 端口范围：80（HTTP）或 443（HTTPS）
   • 授权对象：0.0.0.0/0（或限制为特定 IP）

✅ 五、（可选）启用 HTTPS

方案 A：使用 Let’s Encrypt（免费）

sudo yum install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your_domain.com

按提示完成验证，自动配置 HTTP→HTTPS 重定向。

方案 B：使用阿里云 SSL 证书服务

• 购买/申请免费证书 → 下载 .crt 和 .key

• 修改 Nginx 配置启用 SSL：

  server {
  listen 443 ssl;
  server_name your_domain.com;
  
  ssl_certificate     /path/to/cert.pem;
  ssl_certificate_key /path/to/key.pem;
  
  # ... 其他配置同上
  }

✅ 六、验证部署

访问：http://your_server_ip 或 https://your_domain.com
✅ 应看到首页；点击路由链接（如 /about）后刷新页面不应出现 404。

📌 常见问题排查

需要我为你生成一个完整的 docker-compose.yml 部署方案（含 Nginx + Node 热更新），或提供 Vue CLI / Vite / Create React App 的专属配置模板吗？