前端静态页面如何通过Nginx部署到阿里云Linux服务器？-PHPWP博客

将前端静态页面部署到阿里云 Linux 服务器并通过 Nginx 提供服务，主要包含以下五个关键步骤：

第一步：准备前端项目

在本地开发环境中，你需要先构建（Build）你的前端项目。大多数现代前端框架（如 Vue、React）都需要打包生成静态文件。

安装依赖并构建：
```
npm install
npm run build
```
获取构建产物：
构建完成后，通常会在项目根目录下生成一个 dist 或 build 文件夹。这个文件夹内包含了所有 HTML、CSS、JS 和静态资源文件。后续部署只需上传这个文件夹的内容。

第二步：连接阿里云服务器

使用 SSH 工具（如 Xshell、Putty 或终端）登录到你的阿里云 ECS 实例。

ssh root@<你的公网IP>
# 输入密码后进入系统

第三步：安装并配置 Nginx

如果服务器上尚未安装 Nginx，需要先进行安装。

安装 Nginx (以 CentOS/Alibaba Cloud Linux 为例)：
```
yum update -y
yum install nginx -y
systemctl start nginx
systemctl enable nginx
```
如果是 Ubuntu/Debian 系统，请使用 apt install nginx
检查 Nginx 状态：
```
systemctl status nginx
```
创建部署目录：
建议创建一个专门存放项目的目录，例如 /var/www/my-frontend。
```
mkdir -p /var/www/my-frontend
```

配置 Nginx 站点：
编辑 Nginx 配置文件。通常主配置文件是 /etc/nginx/nginx.conf，但推荐新建一个站点配置文件以减少干扰。

vim /etc/nginx/conf.d/frontend.conf

填入以下内容（请根据实际情况修改 root 路径）：

server {
    listen 80;
    server_name your-domain.com; # 如果没有域名，可暂时留空或填 IP

    # 指向你刚才创建的目录
    root /var/www/my-frontend;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html;
        # 注意：对于 Vue/React 等 SPA 应用，必须添加此行解决刷新 404 问题
    }

    # 可选：开启 Gzip 压缩以提升加载速度
    gzip on;
    gzip_types text/plain application/javascript application/json;
}

测试并重启 Nginx：

nginx -t          # 检查配置语法是否正确
systemctl reload nginx

第四步：上传静态文件

将本地的 dist 文件夹内容上传到服务器的 /var/www/my-frontend 目录。推荐使用 scp 命令或 SFTP 工具（如 FileZilla）。

方法 A：使用 SCP 命令（推荐）
在项目本地目录执行（假设本地 dist 文件夹在当前目录）：

# 将当前目录下的 dist 文件夹内容复制到服务器对应目录
scp -r ./dist/* root@<你的公网IP>:/var/www/my-frontend/

方法 B：使用 FTP/SFTP 工具

打开 FileZilla 等工具，连接服务器 IP。
导航到 /var/www/my-frontend 目录。
将本地 dist 文件夹内的所有文件拖拽上传至该目录。

第五步：配置安全组与验证

这是最容易被忽略的一步，如果端口未放行，将无法访问。

配置阿里云安全组：
- 登录阿里云控制台 -> 云服务器 ECS -> 实例列表 -> 点击实例 ID。
- 进入 网络与安全 -> 安全组 -> 配置规则。
- 添加入站规则：
  - 协议类型：TCP
  - 端口范围：80
  - 授权对象：0.0.0.0/0 (允许所有 IP 访问)
验证部署：
在浏览器中访问 http://<你的公网IP> 或 http://your-domain.com。
- 如果看到前端页面，说明部署成功。
- 如果看到 "Welcome to Nginx" 默认页，说明文件未上传正确或 root 路径配置错误。
- 如果无法连接，请检查安全组是否放行了 80 端口。

常见问题排查

SPA 路由刷新 404：确保 Nginx 配置中 location / 下加了 try_files $uri $uri/ /index.html;。
权限问题：如果上传后 Nginx 无法读取文件，尝试运行 chown -R nginx:nginx /var/www/my-frontend 并重启服务。
HTTPS：如果需要 HTTPS，需申请 SSL 证书并在 Nginx 配置中监听 443 端口及配置证书路径。