介紹laravel+vue前後端分離之伺服器端配置

#                                                                                

前言

前後端分離一直是laravel學習繞不開的議題上。前期我們可以透過基於laravel優秀的框架（例如laravel-admin,dcat-admin），快速建構一個不需要太多前端程式碼的後台管理系統。但是到了後期，隨著專案量級的增加，我們還需要諸如中台（可以簡單理解為面向用戶的管理後台）、前端網站等業務,如果還使用上述的框架，可能就顯得力不從心。並且在實際開發中會遇到這樣的問題：

• 公司有前端和後端工程師，前端工程師採用vue開發，而作為phper的我們採用laravel去開發。那麼問題來了，我們不可能讓前端工程師也採用laravel-mix，在laravel框架下開發，這樣很不友善。
  

• 原來的模式耦合度很高，不管是維護還是擴展都相當困難，所以減少模組間的耦合度，對於後續的維護和擴展都是相當有幫助的。
  

概念明晰

那麼這個時候，我們都會想到前後端分離。
那麼什麼是前後端分離呢？具體的定義今天我們不討論，有興趣可以看看這些文章：到底什麼是前後端分離？ ，前後端分離實踐有感
明白了基本概念和想法後，我們就應該開始做事情了。但在開始之前，就要思考當前專案適不適合前後端分離？什麼樣的項目適合前後端分離？ 因為如果專案不適合的話，那麼前後端分離無疑是會加重工作量，例如只是純後台管理系統開發，加上接口訪問，項目訪問量也不大，那麼laravel-admin這樣的模式完全能夠勝任。
到這裡會有一個誤區，那就是前端程式碼和後端程式碼分開開發就是前後端分離（這裡看似和上面說的有點矛盾）。所謂的前後端分離不僅是為了了解耦，而且為了方便後續維護和擴展，本質上是：前端專案與後端專案是兩個項目，需要獨立部署。兩個不同的工程，兩個不同的程式碼庫，不同的開發人員。前後端工程師需要約定互動接口，實現並行開發，開發結束後需獨立部署，前端透過http請求呼叫後端的restful api。前端只需要關注頁面的樣式與動態資料的解析&渲染，而後端專注於具體業務邏輯（來源：為什麼要前後端分離？前後端分離的好處和壞處是什麼？）。
所以假設，我們的前後端本地開發已經完成，我們需要放到線上環境去測試，那麼我們要如何去伺服器部署和設定呢？

相關教學推薦：《laravel教學》

#開始

例如我們完成的專案是這樣的：
前端使用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前後端分離之伺服器端配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！