nginx部署SPA页面
前后端分离开发过程中,前端需要独立发布项目。在当前vue、react等前端主流框架下开发,都是SPA页面,具体的如何发布到web服务器上。如何配nginx规则。直接看配置文件吧,重点部分都含有注释,其他nginx的默认配置指不做处理。主要配置在nginx的 conf/nginx.config文件,如下所示:#usernobody;worker_processes1;#e...
前后端分离开发过程中,前端需要独立发布项目。在当前vue、react等前端主流框架下开发,都是SPA页面,具体的如何发布到web服务器上。nginx作为主流的前端服务器。如何配nginx规则。直接看配置文件吧,重点部分都含有注释,其他nginx的默认配置指不做处理。主要配置在nginx的 conf/nginx.config文件,如下所示:
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
root D:/webProject/goodsCenter/dist; #单页面项目的打包后的dist目录
location / {
try_files $uri $uri/ @router; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
index index.html index.htm;
}
#nginx反向代理,实现接口转发
location ^~ /goodsCenterWeb/ {
proxy_pass http://10.7.28.14; #注意路径后边不要加/
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
#因此需要rewrite到index.html中,然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html break;
}
}
-
SPA能正常访问的关键:在
location @router { rewrite ^.*$ /index.html break; }
这部分配置。在SPA单页面访问时,实际上访问的是单页面的路由,例如/goods/list,对应的其实是单页面路由中配置的路由组件。但是对于nginx服务器来讲,被认为会寻找根目录下goods文件夹下的list文件夹,当然是找不到的。单页面实际上只有一个页面index.html,因此将所有的页面都rewirte到index页面,即可完成配置 -
业务能够正常跑通,就需要调用后台接口,由于前后端分离,势必会产生跨域请求,因此nginx反向代理就必不可少,也就是
location ^~ /goodsCenterWeb/ { proxy_pass http://10.7.28.14; #注意路径后边不要加/ }
这部分,会讲所有以goodsCenterWeb开始的请求转发到10.7.28.14 这台服务器。具体在实际开发过程,转发的规则、后台服务器以实际为准。涉及到其他的接口转发规则时,可以具体参考nginx正则表达式。
最后:推荐一篇nginx的博客:全面了解Nginx到底能做什么
更多推荐
所有评论(0)