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

在 Alibaba Cloud Linux 3.2104 LTS 上部署前端 Vue 项目，主要步骤如下。假设你已经有一个构建好的 Vue 项目（使用 npm run build 构建），并且希望通过 Nginx 提供静态文件服务。

✅ 一、准备工作

1. 登录 ECS 实例
   使用 SSH 登录到你的 Alibaba Cloud Linux 3.2104 LTS 服务器：

   ssh root@your_server_ip

2. 更新系统

   sudo yum update -y

✅ 二、安装必要的软件

1. 安装 Nginx（用于部署静态资源）

sudo yum install -y nginx

启动并设置开机自启：

sudo systemctl start nginx
sudo systemctl enable nginx

查看状态：

sudo systemctl status nginx

默认网站根目录：/usr/share/nginx/html

2. 安装 Node.js 和 npm（可选：如果需要在服务器上构建项目）

如果你希望在服务器上直接构建 Vue 项目（即上传源码后运行 npm run build），需要安装 Node.js。

推荐使用 NodeSource 源安装较新版本：

curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

验证安装：

node --version
npm --version

✅ 三、上传并部署 Vue 项目

方法一：本地构建后上传 dist 文件（推荐）

1. 在本地开发环境构建项目：

   npm run build

   生成 dist/ 目录。

2. 将 dist/ 目录内容上传到服务器（例如使用 scp）：

   scp -r dist/* root@your_server_ip:/usr/share/nginx/html/

3. （可选）清空原 html 内容：

   sudo rm -rf /usr/share/nginx/html/*

4. 上传文件：

   scp -r dist/* root@your_server_ip:/usr/share/nginx/html/

方法二：在服务器上拉取代码并构建（适合 CI/CD 场景）

1. 安装 Git：

   sudo yum install -y git

2. 克隆项目：

   cd /opt
   git clone https://github.com/yourname/your-vue-project.git
   cd your-vue-project

3. 安装依赖并构建：

   npm install
   npm run build

4. 将构建结果复制到 Nginx 目录：

   sudo cp -r dist/* /usr/share/nginx/html/

✅ 四、配置 Nginx 支持 Vue Router（history 模式）

如果使用了 Vue Router 的 history 模式，需配置 Nginx 将所有路由请求指向 index.html。

编辑 Nginx 配置文件：

sudo vi /etc/nginx/conf.d/default.conf

修改 location 块如下：

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # 如果有 API 需求，可添加反向
    # location /api/ {
    #     proxy_pass http://backend_server;
    # }
}

关键点：try_files $uri $uri/ /index.html; 确保前端路由能正常工作。

保存并退出，然后重启 Nginx：

sudo systemctl restart nginx

✅ 五、开放防火墙端口（如使用安全组 + firewalld）

Alibaba Cloud 使用安全组控制访问，确保在控制台开放 80 端口（HTTP）。

如果服务器启用了 firewalld，也需放行：

sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --reload

✅ 六、访问项目

打开浏览器，输入你的服务器公网 IP：

http://your_server_ip

应能看到你的 Vue 应用。

✅ 七、（可选）绑定域名 & HTTPS

1. 绑定域名：在 Nginx 中修改 server_name yourdomain.com，并解析域名到服务器 IP。
2. 启用 HTTPS：使用 Let’s Encrypt 免费证书（配合 Certbot）。

安装 Certbot：

sudo yum install -y certbot python3-certbot-nginx

申请并配置 SSL：

sudo certbot --nginx -d yourdomain.com

✅ 总结：关键步骤清单

如有需要，可以进一步结合 Jenkins、GitHub Actions 等实现自动化部署。

如需帮助写 Nginx 配置或 shell 脚本，欢迎继续提问！