在Alibaba Cloud Linux 3.2104 LTS上如何部署Vue.js项目？

在 Alibaba Cloud Linux 3.2104 LTS 上部署 Vue.js 项目，可以分为以下几个步骤：准备环境、构建项目、部署静态文件（通常通过 Nginx）、配置域名和 HTTPS（可选）。以下是详细的操作指南：

✅ 一、准备工作

1. 登录服务器

使用 SSH 登录到你的 Alibaba Cloud Linux 3.2104 LTS 实例：

ssh root@your_server_ip

2. 更新系统

sudo yum update -y

✅ 二、安装 Node.js 和 npm

Vue.js 项目需要 Node.js 来构建。

方法一：使用 NodeSource 安装较新版本的 Node.js

# 添加 NodeSource 仓库（以 Node.js 18.x 为例）
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -

# 安装 Node.js 和 npm
sudo yum install -y nodejs

# 验证安装
node -v
npm -v

推荐使用 Node.js 16 或 18 LTS 版本。

✅ 三、上传或克隆 Vue.js 项目

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

在本地开发环境中构建生产包：

npm run build

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

然后将 dist/ 文件夹上传到服务器，例如使用 scp：

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

方式2：在服务器上拉取源码并构建

# 安装 Git
sudo yum install -y git

# 克隆项目（替换为你的仓库地址）
git clone https://github.com/yourname/your-vue-project.git /opt/vue-project

cd /opt/vue-project

# 安装依赖并构建
npm install
npm run build

构建完成后，输出目录通常是 dist/。

✅ 四、安装并配置 Nginx

Vue.js 是单页应用（SPA），需通过 Web 服务器提供静态资源，并正确处理路由。

1. 安装 Nginx

sudo yum install -y nginx

2. 启动并设置开机自启

sudo systemctl start nginx
sudo systemctl enable nginx

3. 配置 Nginx 支持 Vue Router（history 模式）

编辑默认配置：

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

替换内容如下（根据实际路径调整）：

server {
    listen       80;
    server_name  your-domain.com;  # 替换为你的域名或公网 IP

    root         /usr/share/nginx/html;
    index        index.html;

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

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

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

关键点：try_files $uri $uri/ /index.html; 确保前端路由刷新时不会 404。

4. 将构建后的文件复制到 Nginx 目录

# 假设构建输出在 /opt/vue-project/dist
sudo cp -r /opt/vue-project/dist/* /usr/share/nginx/html/

或者如果你是上传的：

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

✅ 五、重启 Nginx 并测试

sudo systemctl restart nginx

打开浏览器访问服务器公网 IP 或域名，应能看到你的 Vue 应用。

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

1. 安装 Certbot：

   sudo yum install -y epel-release
   sudo yum install -y certbot python3-certbot-nginx

2. 获取 SSL 证书（需绑定域名并解析到服务器）：

   sudo certbot --nginx -d your-domain.com

3. 自动续期：

   sudo certbot renew --dry-run

添加定时任务自动续期：

sudo crontab -e

添加一行：

0 12 * * * /usr/bin/certbot renew --quiet

✅ 七、其他建议

• 使用 PM2 管理 Node 服务：仅当你的 Vue 项目包含 SSR（如 Nuxt.js）时才需要。
• 防火墙开放 80/443 端口：确保安全组允许 HTTP/HTTPS 流量。
• 日志查看：sudo tail -f /var/log/nginx/error.log

✅ 总结流程

如有疑问，欢迎提供你的部署方式（是否含后端？是否用 Docker？），我可以进一步优化方案。