laravel+vue前后端分离之服务器端配置的示例分析
这篇文章将为大家详细讲解有关laravel+vue前后端分离之服务器端配置的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
10年积累的成都网站制作、成都做网站、外贸营销网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有和林格尔免费网站建设让你可以放心的选择与我们合作。
概念明晰
那么这个时候,我们都会想到前后端分离。
那么什么是前后端分离呢?具体的定义今天我们不讨论,有兴趣可以查看这些文章:到底什么是前后端分离?,前后端分离实践有感
明白了基本概念和思路后,我们就应该开始干事情了。但是在开始之前,就要思考当前项目适不适合前后端分离?什么样的项目适合前后端分离?因为如果项目不适合的话,那么前后端分离无疑是会加重工作量,例如只是纯后台管理系统开发,加上接口访问,项目访问量也不大,那么laravel-admin这样的模式完全能够胜任。
到这里会有一个误区,那就是前端代码和后端代码分开开发就是前后端分离(这里貌似和上面说的有点矛盾)。所谓的前后端分离不仅是为了解耦,为了方便后续维护和扩展,本质上是:前端项目与后端项目是两个项目,需要独立部署。两个不同的工程,两个不同的代码库,不同的开发人员。前后端工程师需要约定交互接口,实现并行开发,开发结束后需要进行独立部署,前端通过http请求调用后端的restful api。前端只需要关注页面的样式与动态数据的解析&渲染,而后端专注于具体业务逻辑(来源:为什么要前后端分离?前后端分离的好处和坏处是什么?)。
所以假设,我们的前后端本地开发已经完成,我们需要放到线上环境去测试,那么我们如何去服务器进行部署和配置呢?
相关教程
开始
例如我们完成的项目是这样的:
前端使用vue
,后端使用laravel+jwt+dingo
构建了api接口,以及使用了laravel-admin
作为后端管理系统。
按照传统配置后端的方法,只配置后台管理系统,我们一键安装lnmp
后,nginx配置一下,root直接指向项目的public目录,或者干脆用宝塔面板
,几分钟以后就好了。这个对于我们讲武德的程序员来说叫做“点到为止”。后端直接用域名+/admin就可以使用了。
可是现在有了vue,需要把主域名shop.test 给前端用,我们会说尤老师,牛老师,刘老师你不讲武德,尤老师说对不起,我就要用。
于是就有两种方法可以达到使用的效果:
尝试
1、分别部署,采用不同域名
前端域名是:vue.shop.test
后端域名是shop.test/admin
接口域名是shop.test/api
我只要在前端项目的nginx下,根目录指向目标文件夹就行,例如:
server{ listen 80; server_name vue.shop.test;#域名 index index.php index.html index.htm default.php default.htm default.html; root /www/wwwroot/vue.shop.test/dist;#根目录 ...}
反向代理到接口地址:
#意思就是只要含有"api"的请求,都转发到接口地址去请求 location /api { add_header 'Access-Control-Allow-Origin' '*'; proxy_pass http://shop.test/api; }
后端项目配置跨域:
location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';}
保存访问前端:vue.shop.test, 可以正常访问。
2、分别部署,采用相同域名、不同端口
这个就相对简单很多,不需要第二个域名,效率也高的多。
例如,我的后端项目位于/www/wwwroot/test_adimin,前端项目是/www/wwwroot/test_vue,我们只需要在nginx配置里再配置监听另外一个端口就可以:
server{ listen 80; server_name shop.test; index index.php index.html index.htm default.php default.htm default.html; root /www/wwwroot/test_adimin/public; ...}server{ listen 8080; server_name shop.test:8080; index index.php index.html index.htm default.php default.htm default.html; root /www/wwwroot/test_vue/dist; location / { try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404 index index.html index.htm; # try_files $uri $uri/ /index.html; } #这里要写,不然会报: #We’re sorry but XXX doesn’t work properly without JavaScript enabled #网上说的把history改为hash就可以,那个不行,不适用于现在的情况。 location /api { add_header 'Access-Control-Allow-Origin' '*'; proxy_pass http://shop.test/api; } ...}
配置成功保存,访问shop.test:8080 速度杠杠的。
总结
优点
1.前后端开发人员各司其职,各自部署,相互不干涉,提高开发效率。
2.能够实现解耦,使得业务更加清晰,减少业务复杂程度。
缺点
1.增加开发、部署难度;
2.提高了对接和沟通成本;
3.不是所有的项目都适合前后端分离,需要框架设计者、开发者自己去判断
关于“laravel+vue前后端分离之服务器端配置的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
文章题目:laravel+vue前后端分离之服务器端配置的示例分析
URL标题:http://scyanting.com/article/igejce.html