WordPress Rest API和React BrowserHistory开发SPA应用，Nginx的相关配置

2022-01-23

使用WordPress Rest API，尤其是用jwt等插件时，推荐用伪静态的配置，一劳永逸，代码如下，三个if。

location / {
	root   /Users/sunzhenwei/nginx/nrdstudiopro;
	index  index.html index.htm index.php;
	
	if (-f $request_filename/index.html){
		rewrite (.*) $1/index.html break;
	}
	
	if (-f $request_filename/index.php){
		rewrite (.*) $1/index.php;
	}
	
	if (!-f $request_filename){
		rewrite (.*) /index.php;
	}
}

React用BrowserHistory，而不用HashHistory，单纯是觉得url中有#号，影响美观，（不过，省事，不用配置服务）。

一般情况下，使用BrowserHistory方式时，在Nginx中需要配置转发，将资源解析都指向index.html。

location / {
	try_files $uri /index.html;
}
WordPress Rest API和React BrowserHistory

问题来了，同时添加上面两个配置，势必会冲突。React项目入口是index.html，而WordPress系统入口是index.php，部署在同一个目录，服务器只能选择其一，必然会导致url解析异常。

最简单的方法是针对性地配置React，把所有路由集中起来，独立指向index.html。

location ~ ^/(signin|manager|project) {
     try_files $uri /index.html;
}

代码中小括号内路由用|分割，loaction配置方法非常灵活，按照具体需求自行配置。

例，这时候访问http://xxx.com/xxx.html，由WordPress的index.php处理，而访问http://xxx.com/signin，则自动由Reac的index.html处理。

参考资料

nginx location路径匹配（https://www.iteye.com/blog/betakoli-2431428）

（版权归cpury.com所有，转载请注明出处。）

WEB开发