alibaba cloud linux 3.2104 lts vue项目部署？-云服务器

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

1. 环境准备

确保系统已安装必要的软件：

# 更新系统
sudo yum update -y

# 安装 Node.js（推荐使用 nvm 或直接安装 LTS 版本）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
source ~/.bashrc
nvm install --lts  # 安装最新 LTS 版本（如 18.x）
node -v  # 验证安装

# 安装 npm/yarn
npm install -g yarn

2. 构建 Vue 项目

假设项目代码已上传到服务器（或通过 Git 拉取）：

# 进入项目目录
cd /path/to/your-vue-project

# 安装依赖
npm install  # 或使用 yarn

# 构建生产环境代码
npm run build  # 默认生成 `dist` 目录

3. 配置 Web 服务器

选择 Nginx 或 Apache 托管静态文件（以 Nginx 为例）：

安装 Nginx

sudo yum install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx

配置 Nginx

编辑配置文件：

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

内容示例：

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

    root /path/to/your-vue-project/dist;
    index index.html;

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

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

测试并重载 Nginx：

sudo nginx -t
sudo systemctl reload nginx

4. 防火墙与安全组

开放端口：

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

阿里云安全组：确保实例的安全组允许入站流量（如 TCP 80/443）。

5. HTTPS 配置（可选）

使用 Let’s Encrypt 免费证书：

# 安装 certbot
sudo yum install epel-release -y
sudo yum install certbot python3-certbot-nginx -y

# 获取证书（需提前解析域名）
sudo certbot --nginx -d your-domain.com

# 自动续期测试
sudo certbot renew --dry-run

6. 自动化部署（可选）

PM2：用于管理 Node.js 服务（若 Vue 项目包含后端）。
CI/CD：通过 GitLab CI/CD 或 GitHub Actions 自动构建部署。

常见问题

路由 404：确保 Nginx 配置了 try_files 支持 Vue Router 的 history 模式。
权限问题：确保 Nginx 用户（如 nginx）有权访问 dist 目录：
```
sudo chown -R nginx:nginx /path/to/dist
```
端口冲突：检查是否有其他服务占用 80 端口（如 Apache）。

完成以上步骤后，访问服务器 IP 或域名即可看到部署的 Vue 应用。如有特殊需求（如 SSR），需额外配置 Node.js 服务。