laravel+vue前后端分離之服務(wù)器端配置的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)laravel+vue前后端分離之服務(wù)器端配置的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

概念明晰

那么這個時候，我們都會想到前后端分離。
那么什么是前后端分離呢？具體的定義今天我們不討論，有興趣可以查看這些文章：到底什么是前后端分離？，前后端分離實踐有感
明白了基本概念和思路后，我們就應(yīng)該開始干事情了。但是在開始之前，就要思考當(dāng)前項目適不適合前后端分離？什么樣的項目適合前后端分離？因為如果項目不適合的話，那么前后端分離無疑是會加重工作量，例如只是純后臺管理系統(tǒng)開發(fā)，加上接口訪問，項目訪問量也不大，那么laravel-admin這樣的模式完全能夠勝任。
到這里會有一個誤區(qū)，那就是前端代碼和后端代碼分開開發(fā)就是前后端分離（這里貌似和上面說的有點矛盾）。所謂的前后端分離不僅是為了解耦，為了方便后續(xù)維護(hù)和擴(kuò)展，本質(zhì)上是：前端項目與后端項目是兩個項目，需要獨(dú)立部署。兩個不同的工程，兩個不同的代碼庫，不同的開發(fā)人員。前后端工程師需要約定交互接口，實現(xiàn)并行開發(fā)，開發(fā)結(jié)束后需要進(jìn)行獨(dú)立部署，前端通過http請求調(diào)用后端的restful api。前端只需要關(guān)注頁面的樣式與動態(tài)數(shù)據(jù)的解析&渲染，而后端專注于具體業(yè)務(wù)邏輯（來源：為什么要前后端分離？前后端分離的好處和壞處是什么？）。
所以假設(shè)，我們的前后端本地開發(fā)已經(jīng)完成，我們需要放到線上環(huán)境去測試，那么我們?nèi)绾稳シ?wù)器進(jìn)行部署和配置呢？

相關(guān)教程

開始

例如我們完成的項目是這樣的：
前端使用vue，后端使用laravel+jwt+dingo構(gòu)建了api接口，以及使用了laravel-admin作為后端管理系統(tǒng)。
按照傳統(tǒng)配置后端的方法，只配置后臺管理系統(tǒng)，我們一鍵安裝lnmp后，nginx配置一下，root直接指向項目的public目錄，或者干脆用寶塔面板，幾分鐘以后就好了。這個對于我們講武德的程序員來說叫做“點到為止”。后端直接用域名+/admin就可以使用了。
可是現(xiàn)在有了vue，需要把主域名shop.test 給前端用，我們會說尤老師，牛老師，劉老師你不講武德，尤老師說對不起，我就要用。
于是就有兩種方法可以達(dá)到使用的效果：

嘗試

1、分別部署，采用不同域名

前端域名是：vue.shop.test
后端域名是shop.test/admin
接口域名是shop.test/api
我只要在前端項目的nginx下，根目錄指向目標(biāo)文件夾就行，例如：

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"的請求，都轉(zhuǎn)發(fā)到接口地址去請求
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配置里再配置監(jiān)聽另外一個端口就可以：

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否則會出現(xiàn)vue的路由在nginx中刷新出現(xiàn)404
        index  index.html index.htm;
        # try_files $uri $uri/ /index.html;
    }
    #這里要寫，不然會報：
    #We’re sorry but XXX doesn’t work properly without JavaScript enabled
    #網(wǎng)上說的把history改為hash就可以，那個不行，不適用于現(xiàn)在的情況。
    location /api    {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://shop.test/api;
    }
    ...}

配置成功保存，訪問shop.test:8080 速度杠杠的。

總結(jié)

優(yōu)點

1.前后端開發(fā)人員各司其職，各自部署，相互不干涉，提高開發(fā)效率。
2.能夠?qū)崿F(xiàn)解耦，使得業(yè)務(wù)更加清晰，減少業(yè)務(wù)復(fù)雜程度。

缺點

1.增加開發(fā)、部署難度；
2.提高了對接和溝通成本；
3.不是所有的項目都適合前后端分離，需要框架設(shè)計者、開發(fā)者自己去判斷

關(guān)于“l(fā)aravel+vue前后端分離之服務(wù)器端配置的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。