在阿里云Alibaba Cloud Linux 3.2104 LTS上如何部署Vue或React前端应用？-CLOUD云枢

在阿里云 Alibaba Cloud Linux 3.2104 LTS（基于 CentOS Stream/Rocky Linux 生态）上部署 Vue 或 React 前端应用，推荐采用 构建 + Nginx 静态托管 的方式。以下是完整、可落地的步骤：

✅ 一、环境准备

1. 安装 Node.js（推荐 v18+ LTS）

Alibaba Cloud Linux 3 默认仓库可能版本较旧，建议通过 nvm 或官方源安装：

# 方式一：使用 nvm（推荐，便于多版本管理）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc  # 或重新登录终端

# 安装并切换至 LTS 版本
nvm install --lts
nvm use --lts
node -v  # 应输出类似 v18.x.x
npm -v   # 应输出对应版本

💡 若需系统级全局安装（不推荐用于生产），也可用 yum install nodejs npm，但版本可能偏旧。

✅ 二、项目构建与上传

方案 A：本地构建后上传（适合 CI/CD 或手动发布）

在本地开发机完成项目构建：

cd my-vue-app
npm install
npm run build  # Vue: vite build / create-react-app build; React: same

生成 dist/ 或 build/ 目录。

将构建产物上传至服务器：

scp -r dist/* root@your-server-ip:/var/www/my-app
# 或使用 rsync 更稳定
rsync -avz dist/ root@your-server-ip:/var/www/my-app/

方案 B：在服务器上直接构建（适合自动化流水线）

ssh root@your-server-ip
cd /opt
git clone https://github.com/your-org/your-repo.git
cd your-repo

npm ci  # 优先用 package-lock.json 保证一致性
npm run build

✅ 三、配置 Nginx 静态服务

1. 安装 Nginx

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

2. 创建站点配置

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

填入以下内容（以 Vue/React 为例，支持 SPA 路由）：

server {
    listen 80;
    server_name example.com www.example.com;  # 替换为你的域名或 IP

    root /var/www/my-app;  # 或 /opt/your-repo/dist
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # 关键：SPA 路由回退到 index.html
    }

    # 可选：Gzip 压缩
    gzip on;
    gzip_types text/plain application/json application/javascript text/css image/svg+xml;

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

🔔 注意：若使用 HTTPS，需配置 SSL（可用 Let’s Encrypt 自动申请）。

3. 测试并重载 Nginx

sudo nginx -t
sudo systemctl reload nginx

✅ 四、安全与优化建议

项目	建议
防火墙	开放 80/443，关闭其他端口： `firewall-cmd --permanent --add-service=http` `firewall-cmd --reload`
权限控制	确保 `/var/www/my-app` 属主为 `nginx` 或只读用户： `chown -R nginx:nginx /var/www/my-app` `chmod -R 755 /var/www/my-app`
日志监控	查看访问/错误日志： `tail -f /var/log/nginx/access.log`
CI/CD 集成	推荐使用 GitHub Actions + SSH/SFTP 自动部署；或结合阿里云 CodePipeline
HTTPS	使用 `certbot` 免费证书： `yum install -y certbot python3-certbot-nginx` `certbot --nginx -d example.com`

✅ 五、验证部署

curl -I http://your-server-ip
# 应返回 HTTP/1.1 200 OK

# 测试路由跳转（如 /about）是否仍加载 index.html
curl http://your-server-ip/about

📌 补充：Docker 部署（可选进阶方案）

若偏好容器化，可编写 Dockerfile：

FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

然后用 Docker Compose 或 Podman 启动即可（Alibaba Cloud Linux 3 原生支持 Podman）。

需要我为你生成一个完整的 nginx.conf 模板、Dockerfile 示例，或提供阿里云 CDN + OSS 提速部署方案吗？