有个SPA项目,UI和API都使用Python默认的Web Server,感觉不太好。今天尝试了一下将二者分离,使用openresty作为Web Server和Reverse Proxy(这里把Openresty当作nginx用了,没有写lua代码,后续有需求的话,可以考虑用lua)。遇到了一些问题,经过一番Google,最终解决。
问题1:React-router不工作
在React-router中定义的路由不起作用。nginx总是报404。
解决:使用try_files。当在静态文件中找不到路由后,返回index.html,然后react-router就起作用了。
location / {
root /mnt;
index index.html;
# Allow react-router to work if URI cannot be found as static file.
try_files $uri /index.html;
}
问题2:CSS作为静态文件加载了,但没起作用
同样的Webpack编译后的代码,在Python的Web Server中CSS可以加载并起作用,但nginx就是不起作用。百思不得其解,于是跟踪了所有的CSS加载过程,发现CSS加载时Content Type为“text/plain",不是”text/css“,所以才想起是MIME type的问题。
解决:添加include mime.types;
后问题解决。Openresty中不会加载默认的mime.types,需要自己手动添加。