阿里云Alibaba Cloud Linux 3.2104 LTS 64位部署前端项目？-PHPWP博客

在阿里云 Alibaba Cloud Linux 3.2104 LTS 64位系统上部署前端项目，通常涉及以下几个核心步骤：准备环境、安装必要软件、上传代码、配置服务、以及优化安全与性能。

以下是详细的操作指南（以常见的 Nginx + Vue/React 静态资源 为例）：

📌 前提条件

服务器已启动，并拥有 SSH 访问权限。
安全组规则已开放端口：
- 80（HTTP）或 443（HTTPS）
- 22（SSH）
本地前端项目已构建完成（例如通过 npm run build 生成 dist/ 目录）。

✅ 步骤一：更新系统 & 安装基础工具

# 更新系统包
sudo yum update -y

# 安装常用工具（如 curl, wget, git 等）
sudo yum install -y curl wget git vim net-tools

✅ 步骤二：安装 Nginx（推荐用于托管静态文件）

Alibaba Cloud Linux 3 基于 RHEL/CentOS 体系，使用 yum 包管理器。

# 安装 Nginx
sudo yum install -y nginx

# 启动 Nginx 并设置开机自启
sudo systemctl start nginx
sudo systemctl enable nginx

# 检查状态
sudo systemctl status nginx

💡 如果希望使用最新稳定版，可添加官方源：

sudo rpm -Uvh http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.24.0-1.el7.ngx.x86_64.rpm
# 注意：Alibaba Cloud Linux 3 兼容 CentOS 7/8 部分包，但建议优先使用系统自带版本或通过源码编译

✅ 步骤三：上传前端项目到服务器

方法1：使用 SCP 命令（从本地终端执行）

scp -r ./dist root@<your-server-ip>:/usr/share/nginx/html/

方法2：使用 SFTP / FTP 工具（如 FileZilla、WinSCP）

将 dist/ 文件夹内容上传至 /usr/share/nginx/html/

方法3：Git 拉取（适合 CI/CD 流程）

cd /usr/share/nginx/html
git clone https://github.com/your-repo/frontend.git .
# 或直接复制 dist 内容

✅ 步骤四：配置 Nginx

编辑 Nginx 配置文件：

sudo vim /etc/nginx/nginx.conf

或使用站点配置（推荐）：

sudo mkdir -p /etc/nginx/conf.d
sudo vim /etc/nginx/conf.d/frontend.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;  # 支持 Vue/React 路由
    }

    # 可选：开启 Gzip 压缩
    gzip on;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png;
}

测试配置并重启 Nginx：

sudo nginx -t
sudo systemctl reload nginx

✅ 步骤五：配置防火墙与安全组

1. 阿里云控制台 → 安全组

确保入方向规则允许：

TCP 80
TCP 443（如需 HTTPS）
TCP 22（SSH）

2. 系统防火墙（firewalld）

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

✅ 步骤六（可选）：配置 HTTPS（Let’s Encrypt）

使用 Certbot 免费申请 SSL 证书：

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

# 自动配置 HTTPS
sudo certbot --nginx -d your-domain.com

按提示操作即可完成 HTTPS 配置。

✅ 步骤七（可选）：PM2 管理 Node.js 后端（如有 SSR 或 API）

如果你的前端是 Next.js/Nuxt.js 等需要 Node.js 运行的框架：

# 安装 Node.js（推荐 v18+）
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

# 验证
node -v
npm -v

# 安装 PM2
sudo npm install -g pm2

# 启动应用
cd /path/to/your/project
pm2 start npm --name "frontend-app" -- start

# 保存进程列表
pm2 save

# 设置开机自启
pm2 startup

然后修改 Nginx 反向X_X配置：

location / {
    proxy_pass http://localhost:3000;  # Next.js 默认端口
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

✅ 步骤八：监控与维护

查看 Nginx 日志：

sudo tail -f /var/log/nginx/access.log
sudo tail -f /var/log/nginx/error.log

定期更新系统：
```
sudo yum update -y
```
备份配置和项目文件。

🔒 安全建议

禁用 root 直接登录，创建普通用户并使用 sudo。
启用 SSH 密钥认证，禁用密码登录。
定期更新系统和软件。
使用 WAF（Web 应用防火墙） 或云盾防护。
限制访问频率（Nginx limit_req_zone）。

🧪 验证部署

浏览器访问：

http://<your-server-ip>
https://your-domain.com

应能看到前端页面正常加载。

如你有特定的前端框架（Vue3、React、Next.js 等）或需要 Docker 部署方案，也可以告诉我，我可以提供对应配置！