如何配置Nginx实现单域名下同时托管前端页面与API接口

解决方案 #

正确配置参考 #

server {
    listen 80;
    server_name localhost;
    root /var/www/public;

    # 匹配/api前缀的请求，^~ 修饰符确保该规则优先级高于正则匹配的PHP location
    location ^~ /api/ {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    # PHP请求处理逻辑
    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_buffer_size 128k;
        fastcgi_buffers 4 256k;
        fastcgi_busy_buffers_size 256k;
    }

    # 所有非/api请求统一返回前端入口文件
    location / {
        # 如果需要支持前端静态资源（js/css/图片等）的直接访问，替换成下方注释的try_files规则即可
        # try_files $uri $uri/ /frontend/index.html$is_args$args;
        rewrite ^ /frontend/index.html last;
    }
}

旧配置失效原因 #

• 第一种配置：两个监听相同端口、相同server_name的server块同时存在时，Nginx只会匹配第一个加载的server块，第二个负责返回前端文件的server块完全不会生效
• 第二种配置：/api/的location没有加优先级修饰符，可能被其他正则规则拦截，同时location /的try_files规则只有遇到不存在的路径时才会返回前端index.html，不符合所有非/api请求都返回该文件的需求

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