前端静态页面如何通过Nginx部署到Linux服务器？

将前端静态页面通过 Nginx 部署到 Linux 服务器，通常分为以下核心步骤：

一、准备阶段

1. 构建前端项目

# 假设使用 Vue/React 等框架
npm run build
# 生成 dist 或 build 目录（包含 index.html, js/css 等资源）

2. 安装 Nginx（如未安装）

# Ubuntu/Debian
sudo apt update
sudo apt install nginx

# CentOS/RHEL
sudo yum install nginx

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

二、上传静态文件

方式 1：SCP 命令（推荐）

# 本地打包后上传
tar -czf frontend.tar.gz dist/
scp frontend.tar.gz user@your-server:/tmp/

# 在服务器上解压
ssh user@your-server
cd /tmp
tar -xzvf frontend.tar.gz
sudo mv dist /var/www/html/myapp  # 移动到 Nginx 默认目录

方式 2：SFTP 工具

使用 FileZilla、WinSCP 等图形化工具直接拖拽 dist 文件夹到服务器指定目录。

三、配置 Nginx

1. 创建站点配置文件

sudo nano /etc/nginx/sites-available/myapp

2. 写入配置示例

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;

    root /var/www/html/myapp;
    index index.html;

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

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

    # 可选：Gzip 压缩
    gzip on;
    gzip_types text/plain application/json application/javascript text/css;
}

✅ 关键点：try_files $uri $uri/ /index.html; 支持 Vue/React 等单页应用的路由刷新问题。

3. 启用站点

# 创建软链接
sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/

# 测试配置
sudo nginx -t

# 重载配置
sudo systemctl reload nginx

四、验证部署

# 检查 Nginx 状态
sudo systemctl status nginx

# 访问域名或 IP 测试
curl http://your-domain.com
# 或直接浏览器访问

五、进阶优化建议

# 修复权限（避免 403 错误）
sudo chown -R www-data:www-data /var/www/html/myapp
sudo chmod -R 755 /var/www/html/myapp

常见问题排查

• 404 Not Found → 检查 root 路径是否正确，文件是否存在
• 403 Forbidden → 检查目录权限和 SELinux（CentOS）
• 路由刷新 404 → 确认 try_files 配置已生效
• Nginx 不生效 → 执行 sudo nginx -t 检查语法错误

需要我提供具体框架（如 Vue3、React）的完整部署脚本模板吗？