Nginx 是什么？如何部署一个静态网站

Nginx 负责接收和处理 HTTP 请求

Nginx 是常见的 Web 服务器和反向代理。对于静态站点，它可以直接返回 HTML、CSS、JavaScript 和图片；对于动态应用，它也可以将请求转发给本机应用进程。

部署前确认系统发行版、软件包来源和配置目录。不同发行版的默认站点目录、服务名称和配置加载方式可能不同，因此先阅读本机文档和现有配置。

sudo apt update
sudo apt install nginx
sudo systemctl status nginx --no-pager

准备构建产物与目录权限

先在本地完成生产构建，再将输出目录上传到服务器。Web 服务进程只需要读取网站文件，不需要拥有修改应用目录的权限。避免把 .env 文件、源码仓库元数据、备份压缩包放进公开目录。

1. 确认构建输出目录和入口文件。
2. 上传到独立的版本目录，先不要覆盖当前线上版本。
3. 检查目录可读性和文件权限，确认服务用户能读取静态文件。
4. 使用临时主机名或 IP 验证页面和资源路径。

配置站点并检查语法

为每个站点建立独立 server block，明确域名、根目录、默认文件和日志位置。配置文件应使用最小范围的权限，修改前先备份已有配置。

server {
    listen 80;
    server_name example.com www.example.com;
    root /var/www/example/current;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

不要直接覆盖默认配置

先确认 include 关系和当前线上站点，再修改独立配置文件。配置检查失败时不要 reload；恢复备份并重新检查。

验证后再加载配置

sudo nginx -t
sudo systemctl reload nginx
curl -I http://127.0.0.1/

如果页面返回错误，先查看 Nginx 错误日志和访问日志，检查根目录、权限、域名匹配和防火墙。发布完成后保留上一个可用版本，方便出现问题时快速切回。

单页应用的路由回退

部署 React、Vue 等单页应用的构建产物时有一个高频问题：首页正常，直接访问或刷新子路径（如 /list/42）返回 404。原因是这类应用整个站点只有一个 index.html，子路径并不对应真实文件，Nginx 按静态文件去找自然找不到。解法是让找不到的路径回退到入口文件，交给前端路由处理。

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

常见报错对照

症状	第一排查点	常见原因
403 Forbidden	error.log 中是否有 permission denied	目录或文件缺少读取权限；未配置 index 指令；部分发行版的安全模块限制 Web 进程读取特定目录
404 Not Found	root 路径与实际文件是否一致	root 写错、构建产物上传到错误目录、文件名大小写与链接不符
启动失败 Address already in use	端口占用情况	其他进程已占用 80/443；先确认旧服务已停止，或调整监听端口
reload 后行为不变	实际加载的配置文件	修改的文件没有被 include；或 nginx -t 通过后忘记 reload

共同的排查习惯：先用 curl -I 拿到状态码，再进 error.log 找对应时间点的记录。状态码定方向，日志给证据，两边对上再动手改。

下一步该读什么

相关教程

• 如何为网站配置 HTTPS 证书：静态站部署完成后的下一步
• 常见 HTTP 状态码：排查 403/404 前先读懂状态码
• 502 Bad Gateway 排查方法：配置反向代理转发到应用时的常见故障