重写pushState-URL的nginx

时间:2012-02-07 22:26:19

标签: nginx backbone.js rewrite pushstate

我正在尝试让nginx使用pushState基于backbone.js的JavaScript处理来处理我在Javascript应用中为我管理的内容。

现在正在访问一个级别的URI,例如。 example.com/users效果很好,但不是两级或更深的URI,例如example.com/users/all中提到的rewrite ^ /index.html;

  

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

因此,我不太了解nginx的重写选项,我仍然确信我可以执行类似index.html的操作,将所有内容重定向到我的server { listen 80; server_name example.com; location / { root /var/www/example.com; try_files $uri /index.html; } } ,但丢失任何最终的静态文件(图像) ,javascript& css)存储在我需要能够访问的同一台服务器上。

那么我应该怎样做以下所示的当前配置,以使其工作?

{{1}}

5 个答案:

答案 0 :(得分:32)

我最终选择了这个解决方案:

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错误。

答案 1 :(得分:19)

这是我对我的申请所做的。每条路线以' /'结尾(除了自己的根)将提供index.html

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

您也可以在路线前加上:

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

然后:

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

或为每个案例定义一条规则。

答案 2 :(得分:15)

我这样设法:

#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;
   }
}

答案 3 :(得分:7)

使用客户端应用程序路径:

/
/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's answer适用于根级别的根和路径,但在位置上下文中使用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。< / p>

对于目录深度超出第一级别的情况,例如/foo/bar/baz,请注意@rootfiles指令中声明的目录的顺序:最长的路径需要先行,然后是下一个较浅的路径{{ 1}},最后是/foo/bar

答案 4 :(得分:0)

由于可能存在ajax请求api,以下适合此情况,

String newLine = System.getProperty("line.separator");
enterText.setText("\"First line.\"");
enterText.addBreak();
enterText.setText("\"Second line.\"");
enterText.addBreak();
enterText.setText("\"Third line.\"");
enterText.addBreak();