[英]How to redirect all Angular request to index.html in Nginx
I have create a simple Nginx config file to server an Angular like so:我创建了一个简单的 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;
}
}
And all works fine as expected.并且一切正常。 because I'm using Angular UI Router , I'd like to forward all pages to index.html
so Angular will take over (so a request to example.com/users/new
will be redirect by Nginx to index.html
, for Angular UI to handle it) for pages reloads, links, etc. because I'm using Angular UI Router , I'd like to forward all pages to index.html
so Angular will take over (so a request to example.com/users/new
will be redirect by Nginx to index.html
, for Angular UI 来处理它)用于页面重新加载、链接等。
How can I achieve this?我怎样才能做到这一点?
I've playing around with options like:我玩过以下选项:
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;
}
As specified in this answer.如本答案中所述。 But I couldn't anything similar to work based on all requests.但是我无法根据所有请求进行类似的工作。
Suggestions will be much appreciated.建议将不胜感激。
You need to add the router to the end of your try_files
directive, like this: 您需要将路由器添加到try_files
指令的末尾,如下所示:
location / {
try_files $uri $uri/ /index.html;
}
See this document for more. 有关更多信息,请参阅此文
You've nearly got it. 你差不多了。 try_files is the correct one to use, as Richard shows, you just needed to add your index.html in the list. try_files是正确使用的,正如Richard所示,您只需要在列表中添加index.html。 However, there is no need to remove the =404 from the end, in fact, its better not to. 但是,没有必要从最后删除= 404,事实上,它最好不要。
location / {
try_files $uri $uri/ /index.html =404;
}
Once the above change is implemented, reload the config with sudo nginx -s reload
完成上述更改后,使用sudo nginx -s reload
配置
If all goes well, the last one is never used, and routing will just try file, folder, angular app. 如果一切顺利,最后一个从未使用过,路由只会尝试文件,文件夹,角度应用程序。 And that would be it. 就是这样。 But I see it as good practice to have the =404 on the end to cover all bases. 但是我认为最后让= 404覆盖所有基础是一种好习惯。
Regardless of whether or not you use the =404 in try_files, by directing everything to index.html, you basically lose the ability to serve 404 errors from your webserver, unless index.html does not exist (which is where =404
comes in). 无论你是否在try_files中使用= 404,通过将所有内容都指向index.html,你基本上都失去了从你的网络服务器提供404错误的能力,除非index.html不存在(这是=404
进来的地方) 。 This means that you will need to handle 'Not Found' urls and missing pages within Angular JS, and you need to be ok with the fact that the error page you use will return a HTTP 200 response, rather than 404. (This is because the moment you direct to the index.html, you've served a page to the user, thus 200). 这意味着您需要在Angular JS中处理“未找到”URL和缺少页面,并且您需要确定您使用的错误页面将返回HTTP 200响应,而不是404.(这是因为当你指向index.html时,你已经为用户提供了一个页面,因此200)。
For added reassurance on the above, google try_files angular js and you will find most examples incorporate =404. 为了增加对上述内容的保证,google try_files angular js,您会发现大多数示例包含= 404。
References: 参考文献:
location / {
try_files $uri$args $uri$args/ index.html;
}
This worked for me这对我有用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.