在 nginx 中刷新后 React 项目给出错误
React project giving error after refresh in nginx
我已经在 nginx 中设置了 wordpress (/) 和 react 构建文件夹 (/map)。配置文件看起来像这样
upstream index_php_upstream {
server 127.0.0.1:8090;
}
upstream direct_php_upstream {
server 127.0.0.1:8091;
}
upstream react_point {
server 127.0.0.1:3000;
}
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
server_name _;
root /var/www/html/wordpress/public_html;
index index.html index.php;
# log files
access_log /var/log/nginx/sample.com.access.log;
error_log /var/log/nginx/sample.com.error.log;
location = /favicon.ico {
log_not_found off;
access_log off;
}
location = /robots.txt {
allow all;
log_not_found off;
access_log off;
}
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/run/php/php7.2-fpm.sock;
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires max;
log_not_found off;
}
location ^~ /map {
alias /opt/urbanwater/build/;
index index.html index.html;
try_files $uri $uri/ /map/index.html?$args =404;
}
}
当我正常使用时,该应用程序运行良好。但是当我刷新地图中的子页面时
例如/map/explore-towns
它将我带到 Wordpress 页面,显示 404 未找到。
这可能是什么问题?
因为 React 应用程序的路由是客户端路由。如果你直接去/map/some-thing
,nginx会尝试重定向到属于WP的/index.php
。所以它会抛出 404 未找到。
要修复它,您需要配置 nginx,将 /map
的每个请求重定向到 /map/index.html
。然后,React 应用程序将按预期工作。
也许这个配置会有所帮助:
// add below your `location / {}`
location /map {
try_files $uri /index.html;
}
我已经在 nginx 中设置了 wordpress (/) 和 react 构建文件夹 (/map)。配置文件看起来像这样
upstream index_php_upstream {
server 127.0.0.1:8090;
}
upstream direct_php_upstream {
server 127.0.0.1:8091;
}
upstream react_point {
server 127.0.0.1:3000;
}
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
server_name _;
root /var/www/html/wordpress/public_html;
index index.html index.php;
# log files
access_log /var/log/nginx/sample.com.access.log;
error_log /var/log/nginx/sample.com.error.log;
location = /favicon.ico {
log_not_found off;
access_log off;
}
location = /robots.txt {
allow all;
log_not_found off;
access_log off;
}
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/run/php/php7.2-fpm.sock;
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires max;
log_not_found off;
}
location ^~ /map {
alias /opt/urbanwater/build/;
index index.html index.html;
try_files $uri $uri/ /map/index.html?$args =404;
}
}
当我正常使用时,该应用程序运行良好。但是当我刷新地图中的子页面时
例如/map/explore-towns
它将我带到 Wordpress 页面,显示 404 未找到。
这可能是什么问题?
因为 React 应用程序的路由是客户端路由。如果你直接去/map/some-thing
,nginx会尝试重定向到属于WP的/index.php
。所以它会抛出 404 未找到。
要修复它,您需要配置 nginx,将 /map
的每个请求重定向到 /map/index.html
。然后,React 应用程序将按预期工作。
也许这个配置会有所帮助:
// add below your `location / {}`
location /map {
try_files $uri /index.html;
}