如何使用 nginx 从子目录提供单页应用程序？答案

【问题标题】：How do i serve up a single page application from a sub-directory using nginx?如何使用 nginx 从子目录提供单页应用程序？
【发布时间】：2018-05-15 20:40:55
【问题描述】：

我正在尝试将 nginx 配置为从应用程序唯一的子路径提供 Angular 应用程序。我已经修改了应用程序以使用fish 的基本href，并且我可以正确地提供根页面及其资产。

我无法在子路由上重新加载页面。我得到一个 404。

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
  worker_connections  1024;
}


http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;

  log_format  main  '$request_uri --- $remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

  access_log  /var/log/nginx/access.log  main;

  sendfile        on;
  keepalive_timeout  65;


    upstream docker-backend-stream {
      server fish-api:80;
    }

    server {
      listen 80;
      autoindex off;

      location / {
            rewrite ^ http://www.google.com redirect;
      }

      location /fish {
        alias /app;
        index index.html;
        try_files $uri $uri/ /index.html;
      }

      location /fish/api {
            proxy_pass http://docker-backend-stream;
            auth_basic          off;
            client_max_body_size  0;
        }
    }
}

为什么没有向 index.html 提供对 http://localhost:80/fish/foo 的 GET 请求？它收到 404 Not Found。

日志：

as-web_1       | 2017/12/01 18:16:14 [error] 8#8: *2 open() "/etc/nginx/html/index.html" failed (2: No such file or directory), client: 172.24.0.1, server: , request: "GET /fish/foo HTTP/1.1", host: "localhost"
as-web_1       | /fish/foo --- 172.24.0.1 - - [01/Dec/2017:18:16:14 +0000] "GET /fish/foo HTTP/1.1" 404 571 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36" "-"

正如您在上面看到的 - 位置指令不匹配，因此 nginx 正在 /etc/nginx/html 的默认根位置中查找资产。

【问题讨论】：

try_files 语句的最后一个元素应该是 URI 或响应代码。使用 /fish/index.html，因为那是正确的 URI。见this link
@RichardSmith 即使使用 /app/index.html 设置它在全局根中查找。我认为这与trac.nginx.org/nginx/ticket/97 有关

标签： angular nginx

【解决方案1】：

似乎有一个历史性的 nginx 错误会阻止 root 和 alias 正确地控制位置指令。

http://trac.nginx.org/nginx/ticket/97

我的解决方法是使用条件检查，然后使用正则表达式和重写：

  location /fish {
    alias /app;
    if (!-e $request_filename) {
      rewrite ^[^.]*$ /fish/index.html last;
    }
  }

注意：这绝对可以改进以检查文件扩展名

【讨论】：