alibaba cloud linux 3.2104 lts vue项目部署？

在 Alibaba Cloud Linux 3.2104 LTS 上部署 Vue 项目，通常分为以下几个步骤：

✅ 一、环境准备

1. 登录服务器

使用 SSH 登录你的 Alibaba Cloud Linux 服务器：

ssh root@your-server-ip

2. 更新系统

sudo dnf update -y

3. 安装 Node.js 和 npm（推荐使用 nvm 或官方源）

方法一：使用 NVM（推荐）

# 下载并安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 重新加载 shell 配置
source ~/.bashrc

# 安装最新稳定版 Node.js
nvm install --lts
# 或指定版本，如：
# nvm install 18

# 检查是否安装成功
node -v
npm -v

方法二：使用 Alibaba Yum 源安装 Node.js

curl -sL https://rpm.nodesource.com/setup_lts.x | sudo bash -
sudo dnf install -y nodejs

✅ 二、构建 Vue 项目

1. 在本地开发机打包项目

确保你的 Vue 项目已通过 Vue CLI 或 Vite 构建。

# Vue CLI 项目
npm run build

# Vite 项目
npm run build

这会在 dist/ 目录生成静态文件。

✅ 三、上传构建文件到服务器

方法一：使用 scp 命令上传

scp -r dist/* root@your-server-ip:/usr/share/nginx/html/

注意：如果 Nginx 默认目录不存在，可先创建：

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

方法二：使用 Git + 自动拉取（适合 CI/CD）

cd /var/www/vue-app
git clone your-repo-url .
npm install
npm run build

✅ 四、安装并配置 Nginx（用于静态文件服务）

1. 安装 Nginx

sudo dnf install -y nginx

2. 启动并设置开机自启

sudo systemctl enable nginx
sudo systemctl start nginx

3. 配置 Nginx

编辑默认配置：

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

替换为以下内容（适配 Vue Router history 模式）：

server {
    listen       80;
    server_name  localhost;

    # 静态文件根目录（根据你上传的路径修改）
    root         /usr/share/nginx/html;
    index        index.html index.htm;

    # 所有请求尝试匹配静态资源，否则返回 index.html（支持 SPA）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 错误页面
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

4. 测试配置并重启 Nginx

sudo nginx -t
sudo systemctl reload nginx

✅ 五、开放防火墙端口（如启用 firewalld）

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

或者在阿里云控制台安全组中放行 80 (HTTP) 和 443 (HTTPS) 端口。

✅ 六、访问你的 Vue 应用

打开浏览器访问：

http://你的服务器公网IP

你应该能看到部署的 Vue 页面。

✅ 可选：配置 HTTPS（使用 Let’s Encrypt）

sudo dnf install -y certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com

注意：需要你拥有已解析到该服务器的域名。

✅ 总结流程图

本地开发 → npm run build → scp dist/ → 服务器 → Nginx 托管 → 访问

🛠️ 常见问题排查

如果你使用的是 Vue 3 + Vite + Nginx，以上方案完全适用。

如有后端 API，请确保后端服务也已部署（如 Node.js、Java、Python 等），并配置 Nginx 反向。

需要我提供一个完整的自动化部署脚本或配合 PM2 部署前后端分离项目吗？欢迎继续提问！