使用Alibaba Cloud Linux 3.2104 LTS部署前端Vue项目有哪些步骤？

在 Alibaba Cloud Linux 3.2104 LTS（基于 RHEL/CentOS 8 兼容内核，使用 dnf 包管理器）上部署 Vue 前端项目，通常采用 静态文件 + Nginx 服务 的标准生产方案（不推荐直接用 vue-cli-service serve）。以下是完整、安全、可维护的部署步骤：

✅ 前提条件

• 已登录 Alibaba Cloud Linux 3.2104 LTS 实例（ECS）
• 已配置好安全组（开放 80/443 端口）
• 拥有 sudo 权限
• 项目已本地构建完成（或可在服务器构建）

📌 部署步骤详解

1️⃣ 安装必要工具（Nginx + 构建依赖可选）

# 更新系统
sudo dnf update -y

# 安装 Nginx（官方仓库默认可用）
sudo dnf install -y nginx

# 【可选】如需在服务器构建 Vue 项目（不推荐生产环境构建，建议本地构建后上传）
# 安装 Node.js 18.x（LTS，兼容 Vue 3）——推荐使用 NodeSource 源
curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -
sudo dnf install -y nodejs

# 验证
node -v  # v18.x.x
npm -v   # ≥ 9.x
nginx -v # ≥ 1.14（Alibaba Cloud Linux 3 默认提供 1.20+）

💡 最佳实践建议：
✅ 本地构建 + 上传 dist（更安全、可控、节省服务器资源）
❌ 避免在生产服务器运行 npm install && npm run build（存在权限、缓存、依赖风险）

2️⃣ 准备 Vue 项目静态文件

方式 A（推荐）：本地构建后上传

# 本地（开发机）执行：
cd your-vue-project
npm install
npm run build  # 生成 dist/ 目录

→ 将 dist/ 文件夹整体上传至服务器（如使用 scp 或 SFTP）：

# 示例：上传到 /opt/my-vue-app/
scp -r ./dist/ user@your-server-ip:/opt/my-vue-app/

方式 B（备用）：服务器构建（仅调试/小项目）

sudo mkdir -p /opt/my-vue-app
sudo chown $USER:$USER /opt/my-vue-app
cd /opt/my-vue-app
# 上传源码（如 git clone 或 tar.gz），然后：
npm install --production=false  # 注意：--production=false 才会安装 devDependencies（如 vue-cli-service）
npm run build
# 构建后确保输出在 dist/ 下

✅ 最终目录结构应为：

/opt/my-vue-app/dist/
├── index.html
├── assets/
├── favicon.ico
└── ...

3️⃣ 配置 Nginx 服务

创建站点配置文件

sudo vim /etc/nginx/conf.d/my-vue-app.conf

粘贴以下配置（支持 SPA 路由、gzip、缓存、HTTPS 重定向）：

server {
    listen       80;
    server_name  your-domain.com;  # 替换为你的域名（或注释掉，用 IP 访问）
    root         /opt/my-vue-app/dist;
    index        index.html;

    # 支持 Vue Router history 模式（关键！）
    location / {
        try_files $uri $uri/ /index.html;
    }

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

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

启动并启用 Nginx

# 测试配置语法
sudo nginx -t

# 若提示失败，请检查路径权限或语法错误（常见：root 路径不存在/权限不足）

# 设置目录权限（确保 nginx 可读取）
sudo chown -R root:root /opt/my-vue-app/dist
sudo chmod -R 755 /opt/my-vue-app/dist

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

# 查看状态
sudo systemctl status nginx

✅ 此时可通过 http://<ECS公网IP> 或 http://your-domain.com 访问应用。

4️⃣ 【进阶】配置 HTTPS（强烈推荐）

使用 Alibaba Cloud SSL 证书 + Nginx（免费证书可从 阿里云SSL证书服务 申请）：

# 上传证书到服务器（例如）：
# /etc/nginx/ssl/my-domain.pem（证书）
# /etc/nginx/ssl/my-domain.key（私钥）

# 修改 /etc/nginx/conf.d/my-vue-app.conf，添加 443 server 块：
server {
    listen 443 ssl http2;
    server_name your-domain.com;

    ssl_certificate     /etc/nginx/ssl/my-domain.pem;
    ssl_certificate_key /etc/nginx/ssl/my-domain.key;

    # 推荐 SSL 配置（可复用阿里云推荐配置）
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:...;
    ssl_prefer_server_ciphers off;

    root   /opt/my-vue-app/dist;
    index  index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

# 同时重定向 HTTP → HTTPS
server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$server_name$request_uri;
}

→ 再次 sudo nginx -t && sudo systemctl reload nginx

5️⃣ 【可选】配置反向X_X（如需对接后端 API）

若前端需跨域调用同服务器的后端（如 /api/xxx），在 Nginx 中X_X避免 CORS：

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

⚠️ Vue 项目中 API 请求应使用相对路径（如 axios.get('/api/users')），构建时无需修改 baseURL。

✅ 验证与排错清单

💡 提示：Alibaba Cloud Linux 3 默认启用 SELinux。若遇权限问题，推荐方案：

sudo semanage fcontext -a -t httpd_sys_content_t "/opt/my-vue-app/dist(/.*)?"
sudo restorecon -Rv /opt/my-vue-app/dist

🧩 补充：自动化部署建议（生产环境）

• 使用 GitHub Actions / GitLab CI 本地构建 → 自动上传 dist 到 ECS（SFTP/SCP）
• 结合阿里云 OSS + CDN：将 dist/ 上传至 OSS，通过 CDN 提速，Nginx 仅作回源或跳转
• 使用 PM2 管理（仅限 SSR 项目，如 Nuxt）；纯静态 Vue 不需要 Node 进程

✅ 总结流程图：
本地 npm run build
→ scp dist/ to /opt/my-vue-app/
→ 配置 /etc/nginx/conf.d/my-vue-app.conf
→ sudo nginx -t && sudo systemctl reload nginx
→ 访问 http(s)://your-domain

如需我为你生成：

• 完整的 vue.config.js（适配子路径/CDN）
• 自动化部署脚本（Bash/Ansible）
• Docker 部署方案（Nginx-alpine 多阶段）
• 阿里云 OSS+CDN+DNS 一体化配置指南
  欢迎随时提出 👍

是否需要我为你定制一份 nginx.conf 模板或部署检查脚本？