无法使用 url 通过 nginx 进行反应导航
Cannot use url to navigate in react through nginx
我正在使用 nginx(反应前端)提供我的静态文件。
我为每个页面使用了不同的 url,例如 /login /user /home。
我的 nginx 没有将它们重定向到我的 index.html 文件。
我做了一些更改,现在我也无法访问我的主页。它 returns 无法获取 /.
这是我的 nginx.conf 文件。我在 运行 上 windows。我的 index.html 在构建文件夹中。如何让我的nginx在reactjs中使用Router和Link,这样我就可以通过引用link或者导航栏来获取页面?
worker_processes 5;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name ip;
location / {
root /Users/username/projectfolder/build;
index index.html index.htm;
try_files $uri $uri/ index.html;
proxy_pass http://ipaddress:portnumber;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
}
更新:
我试过以下配置
server {
listen some_port;
server_name some_ip;
root C:\nginx-1.17.1\build\;
index index.html index.htm;
location /test/ {
alias C:\nginx-1.17.1\build\;
index index.html index.htm;
try_files $uri \index.html;
#internal;
#return index;
}
location = /index.html {
# no try_files here
return 502;
}
location / {
#root C:\Users\DEV-a0a02yc\insurance_automation\build;
try_files $uri $uri\ \index.html?$args;
#try_files $uri/ index.html;
proxy_pass http://some_ip:some_port;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
在 /test/ url 我得到一个空白页和一个 rewrite/internal 重定向错误说:
2019/07/01 09:53:22 [error] 17820#18008: *1 rewrite or internal redirection cycle while internally redirecting to "/favicon.ico\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html"
这是我的网络标签:
如何在此处提供我的 index.html 文件以在输入此 url 时处理重定向?
您的配置中的代理线路是什么?
你不应该从 html 文件提供服务或代理传递到不同的地址吗?
我建议尝试从配置中删除代理线路。
另外,在一条不相关的注释中,proxy_pass 行无效。服务器地址 "ipaddress" 太长(虽然使用 dns 并非不可能)并且端口 "portnumber" 绝对无效。
因此所需的最低配置如下:
location / {
root /folder/subfolder/build;
try_files $uri /index.html;
}
root
定义你的 react build 文件夹位置,try_files
定义 nginx 应该查看请求的文件是否存在,如果不存在,它服务于 index.html
.
我正在使用 nginx(反应前端)提供我的静态文件。 我为每个页面使用了不同的 url,例如 /login /user /home。
我的 nginx 没有将它们重定向到我的 index.html 文件。
我做了一些更改,现在我也无法访问我的主页。它 returns 无法获取 /.
这是我的 nginx.conf 文件。我在 运行 上 windows。我的 index.html 在构建文件夹中。如何让我的nginx在reactjs中使用Router和Link,这样我就可以通过引用link或者导航栏来获取页面?
worker_processes 5;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name ip;
location / {
root /Users/username/projectfolder/build;
index index.html index.htm;
try_files $uri $uri/ index.html;
proxy_pass http://ipaddress:portnumber;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
}
更新:
我试过以下配置
server {
listen some_port;
server_name some_ip;
root C:\nginx-1.17.1\build\;
index index.html index.htm;
location /test/ {
alias C:\nginx-1.17.1\build\;
index index.html index.htm;
try_files $uri \index.html;
#internal;
#return index;
}
location = /index.html {
# no try_files here
return 502;
}
location / {
#root C:\Users\DEV-a0a02yc\insurance_automation\build;
try_files $uri $uri\ \index.html?$args;
#try_files $uri/ index.html;
proxy_pass http://some_ip:some_port;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
在 /test/ url 我得到一个空白页和一个 rewrite/internal 重定向错误说:
2019/07/01 09:53:22 [error] 17820#18008: *1 rewrite or internal redirection cycle while internally redirecting to "/favicon.ico\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html"
这是我的网络标签:
如何在此处提供我的 index.html 文件以在输入此 url 时处理重定向?
您的配置中的代理线路是什么?
你不应该从 html 文件提供服务或代理传递到不同的地址吗?
我建议尝试从配置中删除代理线路。
另外,在一条不相关的注释中,proxy_pass 行无效。服务器地址 "ipaddress" 太长(虽然使用 dns 并非不可能)并且端口 "portnumber" 绝对无效。
因此所需的最低配置如下:
location / {
root /folder/subfolder/build;
try_files $uri /index.html;
}
root
定义你的 react build 文件夹位置,try_files
定义 nginx 应该查看请求的文件是否存在,如果不存在,它服务于 index.html
.