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

她來聽我的演唱會發表於2021-06-25
LaravelVue後端伺服器

前言

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

  1. 公司有前端和後端工程師，前端工程師採用vue開發，而作為phper的我們採用laravel去開發。那麼問題就來了，我們不可能讓前端工程師也採用laravel-mix，在laravel框架下開發，這樣很不友好。
  2. 原來的模式耦合度很高，不管是維護還是擴充套件都相當困難，所以減少模組間的耦合度，對於後續的維護和擴充套件都是相當有幫助的。

概念明晰

那麼這個時候，我們都會想到前後端分離。
那麼什麼是前後端分離呢？具體的定義今天我們不討論，有興趣可以檢視這些文章：到底什麼是前後端分離？，前後端分離實踐有感
明白了基本概念和思路後，我們就應該開始幹事情了。但是在開始之前，就要思考當前專案適不適合前後端分離？什麼樣的專案適合前後端分離？因為如果專案不適合的話，那麼前後端分離無疑是會加重工作量，例如只是純後臺管理系統開發，加上介面訪問，專案訪問量也不大，那麼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.不是所有的專案都適合前後端分離，需要框架設計者、開發者自己去判斷

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章