为pushState-URL重写nginx

Question

我正在尝试让 nginx 与基于 pushState 的 URI 处理配合使用，backbone.js 在 Javascript 应用程序中为我管理。

现在使用一级访问 URI，例如。 example.com/users 效果很好，但不适用于两级或更深的 URI，例如 example.com/users/all “http://documentcloud.github.com/backbone/#Router-navigate">主干文档：

例如，如果您的路由为 /documents/100，则您的 Web 服务器 如果浏览器访问该 URL，则必须能够提供该页面 直接

因此，尽管我对 nginx 的重写选项还很不熟悉，但我仍然确信我可以做类似 rewrite ^ /index.html; 的事情来将所有内容重定向到我的 index.html。 html，但丢失了存储在我需要能够访问的同一服务器上的任何最终静态文件（图像、javascript 和 css）。

那么，我应该如何使用下面显示的当前配置来完成这项工作呢？

server {
    listen   80;
    server_name  example.com;

    location / {
        root   /var/www/example.com;
        try_files $uri /index.html;
    }

}

Answer 1

我最终采用了这个解决方案：

server {

    listen 80;
    server_name example.com;
    root /var/www/example.com;

    # Any route containing a file extension (e.g. /devicesfile.js)
    location ~ ^.+\..+$ {
        try_files $uri =404;
    }

    # Any route that doesn't have a file extension (e.g. /devices)
    location / {
        try_files $uri /index.html;
    }

}

这样，如果找不到文件，至少我仍然会收到正确的 404 错误。

Answer 2

这是我对我的应用程序所做的事情。每条以“/”结尾的路由（除了根本身）都将提供 index.html ：

  location ~ ^/.+/$ {
    rewrite .* /index.html last;
  }

您还可以为路由添加前缀 :

Backbone.history.start({pushState: true, root: "/prefix/"})

，然后为 :

  location ~ ^/prefix/ {
    rewrite .* /index.html last;
  }

或为每种情况定义一个规则。

Answer 3

我是这样管理的：

#set root and index
root /var/www/conferences/video/;
index  index.html;

#route all requests that don't serve a file through index.html
location / {
   if (!-e $request_filename){
      rewrite ^(.*)$ /index.html break;
   }
}

Answer 4

对于客户端应用程序路径：

/
/foo
/foo/bar
/foo/bar/baz
/foo/bar/baz/123
/tacos
/tacos/123

使用：

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

    gzip_static on;

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

    # Attempt to load static files, if not found route to @rootfiles
    location ~ (.+)\.(html|json|txt|js|css|jpg|jpeg|gif|png|svg|ico|eot|otf|woff|woff2|ttf)$ {
      try_files $uri @rootfiles;
    }

    # Check for app route "directories" in the request uri and strip "directories"
    # from request, loading paths relative to root.
    location @rootfiles {
      rewrite ^/(?:foo/bar/baz|foo/bar|foo|tacos)/(.*) /$1 redirect;
    }
}

虽然 @Adam-Waite 的答案 适用于根级别的根和路径，但在位置上下文中使用 if 被视为反模式，在转换 Apache 样式指令时经常出现。请参阅：http://wiki.nginx.org/IfIsEvil。

其他答案没有涵盖我在使用react-router和启用HTML5 PushState的类似React应用程序中的用例的具有目录深度的路由。当在“目录”（例如example.com/foo/bar/baz/213123）中加载或刷新路由时，我的index.html文件将引用相对路径处的js文件并解析为<代码>example.com/foo/bar/baz/js/app.js而不是example.com/js/app.js。

对于目录深度超出第一级的情况，例如 /foo/bar/baz，请注意 @rootfiles 指令中声明的目录顺序：首先需要走最长的可能路径，然后是接下来是较浅的路径 /foo/bar ，最后是 /foo 。

Answer 5

由于可能存在ajax请求api，因此以下适合这种情况，

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

    # Any route containing a file extension (e.g. /devicesfile.js)
    location ~ ^.+\..+$ {
        try_files $uri =404;
    }

    # Any route that doesn't have a file extension (e.g. /devices)
    location / {
        try_files $uri /index.html;
    }

    # The location block above provides the shortest prefix, of length one, 
    # and so only if all other location blocks fail to provide a match, 
    # this block will be used.

    # Ajax api starts with /v1/ will be proxied
    location /v1/ {
        proxy_pass http://proxy;
    }
}

Answer 6

我尝试使用 try_files $uri /index.html; 但 nginx 在内部重定向到“/index.html”时不断抱怨错误重写或内部重定向循环。

我喜欢 Arthur Xu 提出的解决方案，但通过将所有没有 . 的 URL 重写为 /index.html 来简化它。

  location / {
    rewrite ^[^.]+$ /index.html last;
    proxy_pass http://web:8080;
    ...

上面将所有不带 . 的 URL 重写为 /index.htm'。