本教程将向我们展示如何为Angular或者React应用程序配置NGINX。

用NGINX重写URL

NGINX可以执行URL重写。这样，我们可以将所有请求或者请求的子集转发到特定文件-对于JavaScript框架通常为index.html。

使用try_files指令，我们可以指示NGINX重写要转发到目标文件的请求。该指令可以添加到NGINX配置的服务器或者位置块中。

try_files $uri $uri/ /index.html?$args;

NGINX配置文件在哪里

下面这些是默认服务器配置的位置。 NGINX支持托管多个站点，还可以将配置分为几个部分。其他配置文件可以在/etc/nginx/conf.d目录中找到。

此处是默认配置文件的位置。

Ubuntu 16.04以上/ Debian 8以上

/etc/nginx/conf.d/default.conf

CentOS 7 /红帽7

/etc/nginx/nginx.conf

重写所有请求

使用此方法捕获所有URI，并将它们转发到index.html。

location / {
     root   /usr/share/nginx/html;
     index  index.html;

     try_files $uri $uri/ /index.html?$args;
}

转发特定URI的请求

我们可能只希望特定的URI处理路由。除了捕获所有请求，我们还可以将重写范围缩小到特定的URI。以下示例显示如何仅重写具有以/ profiles开头的URI的请求的URL。如果Angular或者React应用仅用于此特定URI，这将很有用。

另一个示例是，如果我们有多个React或者Angular应用程序由同一域托管。通过为每个URL指定一个URI，我们可以分隔流量。

location /profiles {
     root   /usr/share/nginx/html;
     index  index.html;

     try_files $uri $uri/ /index.html?$args;
}

使用正则表达式过滤URI重写

默认NGINX站点的重写规则示例

NGINX示例配置

上面的示例仅显示了用于创建重写的指令。以下内容适合那些想要更多背景信息的人。

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;

        try_files $uri $uri/ /index.html?$args;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}