如何优化Nginx配置，简化重复规则并解决配置拆分失效问题

拆分配置失效原因 #

你拆分后的两个配置都定义了监听80端口、无指定server_name的server块，Nginx启动时会默认将按文件名排序靠前的server块作为80端口的默认匹配服务，另一个server块的配置完全不会被命中，自然无法正常运行。同域名下的前端、后端服务不需要拆分到两个独立server块，反而会造成端口匹配冲突。

简化方案 #

方案1：单配置文件精简版 #

通过正则匹配合并重复的代理路由，删除冗余的重复代理配置，精简后配置如下：

upstream docsapp {
    server app:8000;
}

server {
    listen 80;
    client_max_body_size 8M;

    # Vue前端路由
    location / {
        # 原alias配置可替换为root更规范，效果完全一致
        root /usr/share/nginx/html/;
        # 如果Vue使用history路由模式，可补充下方配置避免刷新404
        # try_files $uri $uri/ /index.html;
    }

    # 合并所有需要转发到DRF的路由，仅需写一次代理配置
    location ~ ^/(admin|api|api-token-auth|docs)/ {
        proxy_pass http://docsapp;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location /media/ {
        add_header Access-Control-Allow-Origin *;
        alias /usr/local/src/app/media/;
        internal;
    }

    location /static/ {
        alias /usr/local/src/app/static/;
    }
}

方案2：合法的多文件拆分方案 #

如果需要按业务拆分配置，不拆分server块，而是将不同业务的location配置拆分为片段，通过include引入到同一个server块中即可：

1. 主配置文件default.conf

upstream docsapp {
    server app:8000;
}

server {
    listen 80;
    client_max_body_size 8M;
    
    # 引入拆分的业务配置片段
    include /etc/nginx/conf.d/vue.conf;
    include /etc/nginx/conf.d/drf.conf;
}

2. Vue前端配置片段vue.conf

location / {
    root /usr/share/nginx/html/;
    # 按需补充history路由配置
    # try_files $uri $uri/ /index.html;
}

3. DRF后端配置片段drf.conf

location ~ ^/(admin|api|api-token-auth|docs)/ {
    proxy_pass http://docsapp;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_redirect off;
}

location /media/ {
    add_header Access-Control-Allow-Origin *;
    alias /usr/local/src/app/media/;
    internal;
}

location /static/ {
    alias /usr/local/src/app/static/;
}

内容的提问来源于stack exchange，提问作者przemekk