nginx静态站点配置

发表于 2026-05-03 分类于自动化运维， Nginx 阅读次数： Waline：阅读次数：

Nginx 静态站点配置

这份文档只讲 Nginx 的静态站点配置，统一使用多站点方式，不使用单文件大杂烩配置。

静态站点的特点就是：

NGINX 直接提供 HTML、JS、CSS、图片等静态资源
响应快，占用少
不需要额外应用层转发

这里默认的目录结构是：

/etc/nginx/sites-available/
    ├── example.com
    ├── another-site.com
    └── default

实际写配置时，通常就是先新建一个站点文件：

sudo vim /etc/nginx/sites-available/自己取的名字

例如：

sudo vim /etc/nginx/sites-available/example.com

0. 静态站点配置流程图

flowchart TD
    A[开始] --> B[准备站点目录]
    B --> C[写 /etc/nginx/sites-available/站点名]
    C --> D[配置 server_name root index]
    D --> E[静态 location 用 try_files]
    E --> F[创建软链接到 sites-enabled]
    F --> G[执行 nginx -t]
    G --> H{配置是否通过}
    H -- 否 --> I[修正站点配置]
    I --> G
    H -- 是 --> J[reload nginx]
    J --> K[完成]

1. 你要怎么写

推荐用下面这种方式：

每个域名一个配置文件
配置文件放到 /etc/nginx/sites-available/
再通过软链接启用到 /etc/nginx/sites-enabled/

也就是：

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/example.com

这样做的好处是：

一个站点一个文件
后面站点多了也清楚
方便单独停用某个站点

2. 最基础的静态站点配置

假设域名是 example.com，站点目录是：

/var/www/example.com

先建目录：

sudo mkdir -p /var/www/example.com

然后写配置：

sudo vim /etc/nginx/sites-available/example.com

示例内容：

server {
    listen 80;
    listen [::]:80;
    server_name example.com www.example.com;

    root /var/www/example.com;
    index index.html;

    access_log /var/log/nginx/example.com.access.log;
    error_log /var/log/nginx/example.com.error.log warn;

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

3. 这几个关键配置是什么意思

listen 80
监听 HTTP 端口
server_name
这个站点对应的域名
root
站点根目录
index index.html
默认首页文件
try_files $uri $uri/ =404
按真实文件和目录去找，找不到就返回 404

4. 写完了怎么检查和启用

写好后创建软链接：

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/example.com

先检查配置：

sudo nginx -t

通过后重载：

sudo systemctl reload nginx

5. 静态站点常用增强配置

如果你想顺手加一点基础优化，可以写成这样：

server {
    listen 80;
    listen [::]:80;
    server_name example.com www.example.com;

    root /var/www/example.com;
    index index.html;

    access_log /var/log/nginx/example.com.access.log;
    error_log /var/log/nginx/example.com.error.log warn;

    client_max_body_size 20m;

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

    location ~* \.(jpg|jpeg|png|gif|ico|svg|css|js)$ {
        expires 7d;
        access_log off;
    }
}

这里主要增加了：

client_max_body_size
控制上传大小
静态资源缓存
让图片、CSS、JS 这些资源缓存一段时间

6. 如果是前端单页应用

如果你的站点是前端打包出来的单页应用，比如 Vue、React 的前端静态包，通常不能直接用 =404。

这时更常见的是：

server {
    listen 80;
    listen [::]:80;
    server_name example.com www.example.com;

    root /var/www/example.com;
    index index.html;

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

这表示：

先找真实文件
找不到就回退到 /index.html

这样前端路由才不会刷新就 404。

7. 常见目录和命令

常见目录：

主配置：/etc/nginx/nginx.conf
站点配置：/etc/nginx/sites-available/
启用站点：/etc/nginx/sites-enabled/
日志：/var/log/nginx/

常用命令：

检查配置：

sudo nginx -t

重载配置：

sudo systemctl reload nginx

重启服务：

sudo systemctl restart nginx

查看状态：

sudo systemctl status nginx

8. 使用时要注意的事

一个域名一个文件，不要所有站点都揉在一起
配置写到 sites-available 后，记得软链接到 sites-enabled
改完配置先 nginx -t
静态站点和前端单页应用的 try_files 写法不一样
日志建议每个站点单独分开
80、和443端口可以放多个服务，区分就单单靠子域名就ok了。