Question

我已经创建了一个简单的Nginx配置文件来服务Angular，如下所示：

server {
  listen 80;
  listen [::]:80;

  root /path/to/apps/myapp/current/dist;
  access_log /path/to/apps/myapp/current/log/nginx.access.log;
  error_log /path/to/apps/myapp/current/log/nginx.error.log info;

  index index.html;

  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }

  location / {
    try_files $uri $uri/ =404;
  }
}

所有工作都按预期正常。因为我正在使用Angular UI Router，所以我希望将所有网页转发到index.html，以便Angular接管（因此对example.com/users/new的请求将由Nginx重定向到用于页面重新加载，链接等的index.html，用于Angular UI处理它。

我怎样才能做到这一点？

我正在玩这样的选项：

server {
    #implemented by default, change if you need different ip or port
    #listen *:80 | *:8000;
    server_name test.com;
    return 301 $scheme://www.test.com$request_uri;
}

正如this回答中所述。但根据所有要求，我无法完成类似工作。

建议将不胜感激。

Answer 1

您需要将路由器添加到try_files指令的末尾，如下所示：

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

有关详情，请参阅this document。

Answer 2

你几乎得到了它。 try_files是正确使用的，正如Richard所示，您只需要在列表中添加index.html。但是，没有必要从最后删除= 404，事实上，最好不要删除。

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

实施上述更改后，请使用 sudo nginx -s reload

重新加载配置

$ uri 会将请求作为文件尝试，如果失败，则会移动到下一个。
$ uri / 会将请求作为文件夹/index.html来尝试然后尝试，它将所有请求发送到您的index.html 角度应用程序将能够路由事物（也确保您使用 html5mode以避免在url中使用＃。
= 404 将是您的最终后备，基本上是说：我已经尝试将其作为文件，文件夹和index.html。如果index.html失败/没有无论出于何种原因存在，我们都会发出404错误。

为什么= 404？

如果一切顺利，最后一个从未使用过，路由只会尝试文件，文件夹，角度应用。就是这样。但我认为最后让= 404覆盖所有基础是一种好习惯。

关于index.html catchall的重要说明

无论你是否在try_files中使用= 404，通过将所有内容都指向index.html，你基本上都失去了从你的网络服务器提供404错误的能力，除非index.html不存在（这是{{ 1}}进来）。这意味着您需要处理“未找到”＃39;在Angular JS中的URL和缺少的页面，你需要确定你使用的错误页面将返回HTTP 200响应，而不是404.（这是因为你指向index.html的那一刻，你＆＃ 39;向用户提供了一个页面，因此200）。

为了更加放心，google try_files angular js，你会发现大多数例子包含= 404。

<强>参考文献：

http://nginx.org/en/docs/beginners_guide.html#control
http://ajbogh.blogspot.ca/2015/05/setting-up-angularjs-html5-mode-in.html（仅举一个例子）

如何在Nginx中将所有Angular请求重定向到index.html

2 个答案:

为什么= 404？

关于index.html catchall的重要说明