如何将打包后的Vue项目部署到Alibaba Cloud Linux 3.2104 LTS的Web服务器？-CLOUD云枢

在 Alibaba Cloud Linux 3.2104 LTS 上部署 Vue 项目，核心逻辑是将 Vue 打包生成的静态资源（dist 目录）通过 Web 服务器（通常选择 Nginx）进行托管。Alibaba Cloud Linux 3 基于 CentOS/RHEL 体系，命令习惯与 RHEL 8/9 一致，且默认启用 firewalld 和 SELinux。

以下是标准化、生产环境可用的部署流程：

一、前置准备

本地构建
在你的开发机上执行：
```
npm run build
# 或 yarn build / pnpm build
```
生成 dist 文件夹，确保其中包含 index.html, js/, css/, assets/ 等文件。
服务器基础环境检查
- 登录阿里云 ECS 控制台，确保实例安全组已开放 80 (HTTP) 和 443 (HTTPS) 端口。
- 确认系统版本：
```
cat /etc/os-release
# 应显示 Alibaba Cloud Linux release 3.2104 LTS
```

二、安装 Web 服务器（Nginx）

Alibaba Cloud Linux 3 推荐使用官方源安装 Nginx，避免使用过时的 yum 仓库。

# 更新系统包
sudo dnf update -y

# 安装 Nginx
sudo dnf install nginx -y

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

# 检查状态
sudo systemctl status nginx

注意：如果访问 http://<公网IP> 出现 "Forbidden" 或空白页，通常是 SELinux 或权限问题，见后文“常见问题”部分。

三、部署 Vue 静态文件

1. 创建部署目录

sudo mkdir -p /usr/share/nginx/html/vue-app

2. 上传文件

将本地 dist 文件夹内的所有文件上传至服务器该目录。推荐使用 scp 或 rsync：

# 从本地终端执行（替换为你的实际路径和服务器IP）
scp -r dist/* root@<你的ECS公网IP>:/usr/share/nginx/html/vue-app/

或使用 SFTP 工具（如 FileZilla）直接拖拽。

3. 设置权限

确保 Nginx 工作进程用户（nginx）有读取权限：

sudo chown -R nginx:nginx /usr/share/nginx/html/vue-app
sudo chmod -R 755 /usr/share/nginx/html/vue-app

四、配置 Nginx 支持 Vue Router History 模式

Vue Router 如果使用 history 模式，刷新页面会返回 404。必须配置 Nginx 将所有请求回退到 index.html。

1. 编辑配置文件

sudo vi /etc/nginx/conf.d/vue-app.conf

2. 写入以下配置

server {
    listen 80;
    server_name <你的域名或公网IP>; # 如果没有域名，可留空或使用 IP

    root /usr/share/nginx/html/vue-app;
    index index.html;

    # 关键配置：支持 history 模式
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：缓存静态资源以提升性能
    location ~* .(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    # 可选：禁止访问隐藏文件
    location ~ /. {
        deny all;
    }
}

3. 测试并重载 Nginx

# 测试配置文件语法
sudo nginx -t

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

五、处理防火墙与安全组

1. 放行防火墙（firewalld）

Alibaba Cloud Linux 3 默认启用 firewalld。

# 永久添加 HTTP 服务
sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https

# 重新加载防火墙规则
sudo firewall-cmd --reload

验证是否生效：

sudo firewall-cmd --list-all

2. 阿里云安全组

确保在 ECS 控制台的“安全组”规则中，入方向已允许 TCP 协议的 80 和 443 端口。

六、（可选）配置 HTTPS（Let’s Encrypt）

生产环境强烈建议使用 HTTPS。可使用 Certbot 自动申请免费证书。

# 安装 EPEL 和 Certbot
sudo dnf install epel-release -y
sudo dnf install certbot python3-certbot-nginx -y

# 申请证书（需先配置好 DNS 解析到你的服务器 IP）
sudo certbot --nginx -d <你的域名>

# 按提示操作，Certbot 会自动修改 Nginx 配置并重定向 HTTP 到 HTTPS

若未绑定域名，仅使用 IP 访问，则无法通过 Certbot 自动获取证书，建议至少绑定一个域名或使用自有证书手动配置。

七、常见问题排查

现象	可能原因	解决方案
访问 IP 显示 “Welcome to nginx!”	Nginx 默认配置未覆盖	检查 `/etc/nginx/conf.d/` 下是否有其他 `.conf` 文件冲突，或删除默认 `default.conf`
访问页面显示 403 Forbidden	权限不足或 SELinux 阻止	1. 执行 `chown -R nginx:nginx /usr/share/nginx/html/vue-app` 2. 临时关闭 SELinux 测试：`setenforce 0`，若正常则需配置 SELinux 上下文：`sudo restorecon -Rv /usr/share/nginx/html/vue-app`
刷新页面报 404	Nginx 未配置 `try_files`	检查 `vue-app.conf` 中是否正确添加了 `try_files $uri $uri/ /index.html;`
CSS/JS 加载失败（404）	静态资源路径错误	检查 Vue 项目中 `vite.config.js` 或 `vue.config.js` 的 `base` 配置是否为 `'/'`；检查浏览器 Network 面板中的请求 URL 是否正确
连接超时	安全组或防火墙未放行	双重检查：① 阿里云控制台安全组 ② 服务器内部 `firewall-cmd --list-all`

八、高级优化建议（可选）

Gzip 压缩
在 Nginx 主配置 /etc/nginx/nginx.conf 的 http 块中添加：

gzip on;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png;
gzip_min_length 1000;

使用 PM2 + Node.js 反向X_X（如需 SSR）
如果你的 Vue 项目使用了服务端渲染（SSR），则需要安装 Node.js 并运行 npm run build:ssr，然后用 PM2 管理 Node 进程，并通过 Nginx 反向X_X到 localhost:3000。但纯 SPA 项目无需此步骤。

监控与日志
查看 Nginx 访问日志排查问题：

sudo tail -f /var/log/nginx/access.log
sudo tail -f /var/log/nginx/error.log

总结

部署 Vue 到 Alibaba Cloud Linux 3 的核心步骤：

构建：npm run build 得到 dist。
安装 Nginx：dnf install nginx。
上传文件：放入 /usr/share/nginx/html/vue-app。
配置 Nginx：添加 try_files 支持 history 路由。
放行端口：安全组 + firewalld 开放 80/443。
测试访问：浏览器输入公网 IP 或域名。

整个过程无需复杂依赖，Nginx 作为静态资源服务器即可满足绝大多数 Vue 项目需求。

一、 前置准备

二、 安装 Web 服务器（Nginx）

三、 部署 Vue 静态文件