在現(xiàn)如今網(wǎng)路世界中，以Web應(yīng)用程式作為核心的軟體服務(wù)越來越流行。其中，Laravel框架作為PHP語言的優(yōu)秀開發(fā)框架，不僅具有高效的效能，而且還擁有友善的開發(fā)體驗(yàn)、豐富的開源 community、強(qiáng)大的 ORM 和遷移系統(tǒng)等一系列優(yōu)點(diǎn)。而Laravel在後臺(tái)開發(fā)中，最近也逐漸流行起了前後端分離的開發(fā)模式。本篇文章將介紹如何使用 Laravel 實(shí)作前後端分離部署。

一、什麼是前後端分離

前後端分離是一種新的 Web 應(yīng)用程式開發(fā)方式，該方式從技術(shù)實(shí)作上將前端和後端完全分開。前端程式負(fù)責(zé)產(chǎn)生介面，並與伺服器通訊取得數(shù)據(jù)，後臺(tái)程式則負(fù)責(zé)業(yè)務(wù)邏輯的處理和資料庫的存取。

這種方式有很多好處。首先，它可以提高前後端開發(fā)的效率。前端和後端開發(fā)人員可以並行開發(fā)，減少了相互間的依賴；其次，它可以提高應(yīng)用程式的效能。由於前端和後端服務(wù)可以分別進(jìn)行部署和擴(kuò)容，因此系統(tǒng)的整體效能可以得到很好的提升。另外，這種方式可以讓前端和後端開發(fā)人員都可以盡可能地專注於各自的領(lǐng)域，提高程式碼品質(zhì)和可維護(hù)性。

二、Laravel 前後端分離的實(shí)作

在 Laravel 開發(fā)中，前後端分離的實(shí)作需要使用到一些前端框架。其中，我們可以使用 Vue.js、React 或 Angular 等主流框架來作為前端的開發(fā)方案。在 Laravel 中，我們可以使用以下兩種方式來實(shí)現(xiàn)前後端的分離。

1. 建立一個(gè)新的前端項(xiàng)目

我們可以先建立一個(gè)獨(dú)立的前端項(xiàng)目，再以 API 的方式與 Laravel 後端互動(dòng)。在這個(gè)模式下，Laravel 只負(fù)責(zé)後端資料API介面的編寫，前端使用 AJAX 或 Fetch API 的方式來請(qǐng)求後端的資料介面。前端和後端的程式碼可以分別進(jìn)行在不同的伺服器或連接埠進(jìn)行部署。

這種方式的優(yōu)點(diǎn)是前端和後端的分離度非常高，開發(fā)人員可以充分發(fā)揮各自的優(yōu)勢(shì)，同時(shí)也能夠提高應(yīng)用程式的效能。還可以運(yùn)用一些現(xiàn)代前端框架和工具，提升開發(fā)效率和開發(fā)體驗(yàn)。

下面是一個(gè)簡單的範(fàn)例來示範(fàn)這種方式的實(shí)作。我們以Laravel 為後端，Vue.js 為前端為例：

1.1 建立一個(gè)新的Laravel 專案

首先，我們需要在命令列中建立一個(gè)新的Laravel 專案：

composer?create-project?--prefer-dist?laravel/laravel?blog

1.2 建立一個(gè)新的Vue.js 專案

接下來，我們需要建立一個(gè)新的Vue.js 專案：

npm?install?-g?vue-cli
vue?init?webpack?frontend

1.3 設(shè)定Laravel 和Vue.js

接下來，我們需要設(shè)定routes/api.php 檔案來回應(yīng)Vue.js 前端的請(qǐng)求。

Route::get('/todos',?function?()?{
????return?App\Todo::all();
});

在 frontend/src/App.vue 中，我們可以使用 Axios 或任何其他 AJAX 函式庫來取得後端 API。在這個(gè)範(fàn)例中，我們將使用 Axios 庫。

<template>
??<div class="todo-list">
????<div class="todo" v-for="todo in todos" :key="todo.id">
??????<input type="checkbox" :checked="todo.completed" @change="toggle(todo)">
??????<label>{{?todo.title?}}</label>
????</div>
??</div>
</template>

<script>
import?axios?from?'axios'

export?default?{
??data?()?{
????return?{
??????todos:?[]
????}
??},
??created?()?{
????axios.get('/api/todos')
??????.then(response?=>?{
????????this.todos?=?response.data
??????})
??????.catch(error?=>?{
????????console.log(error)
??????})
??},
??methods:?{
????toggle?(todo)?{
??????todo.completed?=?!todo.completed
??????axios.put('/api/todos/'?+?todo.id,?todo)
????????.then(response?=>?{})
????????.catch(error?=>?{
??????????console.log(error)
????????})
????}
??}
}
</script>

在 frontend/config/index.js 中，我們可以將 Vue.js 前端設(shè)定為使用與 Laravel 後端不同的連接埠。然後，我們可以運(yùn)行並訪問這個(gè)應(yīng)用程式。

php?artisan?serve?--port=8000
cd?frontend
npm?start

2. 使用Laravel Mix 打包前端專案

另一個(gè)方式是將前端程式碼和Laravel 後臺(tái)程式碼打包到同一個(gè)專案中進(jìn)行部署，這種模式下Laravel Mix 作為工具用於建立前端應(yīng)用程式。 Laravel Mix 是一個(gè)簡化了 Webpack 的建置工具，可以讓我們輕鬆地打包前端資源。

這種方式的優(yōu)點(diǎn)是前後端程式碼會(huì)打包成一個(gè)整體，方便部署和維護(hù)。我們可以使用類似npm run dev 和npm run build 的指令來編譯前端程式碼，並將編譯結(jié)果放在Laravel 的public 目錄中，這樣我們就可以透過瀏覽器直接訪問應(yīng)用程式了。

下面是一個(gè)簡單的範(fàn)例來示範(fàn)這種方式的實(shí)作：

2.1 建立一個(gè)新的Laravel 專案

首先，我們需要在命令列中建立一個(gè)新的Laravel 專案：

composer?create-project?--prefer-dist?laravel/laravel?blog

2.2 安裝Node.js 和NPM

在接下來的步驟中，我們需要安裝Node.js 和NPM。

在Ubuntu 中，可以使用以下指令安裝：

sudo?apt-get?install?nodejs
sudo?apt-get?install?npm

2.3 在Laravel 中安裝Laravel Mix

然後，我們需要安裝Laravel Mix：

npm?install?--save-dev?laravel-mix

然後，我們需要執(zhí)行以下命令來產(chǎn)生webpack.mix.js 設(shè)定檔：

node_modules/.bin/mix

2.4 編寫前端程式碼

接下來，我們需要寫前端程式碼。例如，我們可以在 resources/assets/js/app.js 檔案中編寫一些 JavaScript 程式碼。以下是一個(gè)簡單的範(fàn)例：

"use?strict";

window.Vue?=?require('vue');

Vue.component('example-component',?require('./components/ExampleComponent.vue'));

const?app?=?new?Vue({
????el:?'#app'
});

2.5 寫前端資源

我們可以把前端的資源檔案放在 resources/assets 目錄下。例如，我們可以在 resources/assets/sass/app.scss 中寫一些 CSS 樣式。

html,?body?{
??height:?100%;
??margin:?0;
}

#app?{
??display:?flex;
??align-items:?center;
??justify-content:?center;
??height:?100%;
}

.title?{
??font-size:?24px;
??text-align:?center;
}

2.6 設(shè)定 Laravel Mix

我們需要在 webpack.mix.js 文件中配置 Laravel Mix。例如，我們可以使用 .sass() 方法來生成 CSS 文件，并使用 .js() 方法來生成 JavaScript 文件：

const?mix?=?require('laravel-mix');

mix.js('resources/assets/js/app.js',?'public/js')
???.sass('resources/assets/sass/app.scss',?'public/css');

2.7 編譯前端資源

接下來，我們可以運(yùn)行以下命令來編譯前端資源：

npm?run?dev

或

npm?run?watch

這樣，我們就可以在瀏覽器中看到我們的應(yīng)用程序了。

3. 部署應(yīng)用程序

無論我們使用哪種方式來實(shí)現(xiàn)前后端分離，最終都需要進(jìn)行部署。我們可以使用第三方工具如 Jenkins、Capistrano 和 Docker Compose 等來自動(dòng)化部署。這里介紹一種基于 NGINX + PHP-FPM + MySQL 的部署方式。

3.1 安裝服務(wù)

首先，我們需要安裝 NGINX、PHP-FPM 和 MySQL。我們可以使用以下命令在 Ubuntu 中進(jìn)行安裝：

sudo?apt-get?install?nginx
sudo?apt-get?install?mysql-server
sudo?apt-get?install?php-fpm

3.2 配置 NGINX

接下來，我們需要配置 NGINX。我們可以在 /etc/nginx/sites-available 目錄下創(chuàng)建一個(gè)新的配置文件。以下是配置文件的示例：

server?{
????listen?80;
????server_name?yourdomain.com;

????root?/var/www/public;

????index?index.php;

????location?/?{
????????try_files?$uri?$uri/?/index.php?$query_string;
????}

????location?~?/\.?{
????????deny?all;
????}

????location?~?\.php$?{
????????fastcgi_pass?unix:/run/php/php7.4-fpm.sock;
????????fastcgi_split_path_info?^(.+\.php)(/.+)$;
????????include?fastcgi_params;
????????fastcgi_param?SCRIPT_FILENAME?$document_root$fastcgi_script_name;
????????fastcgi_param?PATH_INFO?$fastcgi_path_info;
????????internal;
????}
}

我們需要將我們的代碼放置在 /var/www/public 目錄中。例如，我們使用前兩種方式中的第一種方式，代碼存放在了一個(gè) 獨(dú)立的前端項(xiàng)目 中。我們可以使用以下命令將編譯好的前端代碼復(fù)制到 /var/www/public 目錄中：

cp?-r?/path/to/frontend/dist/*?/var/www/public

3.3 配置 MySQL

接下來，我們需要配置 MySQL。我們可以使用以下命令進(jìn)行安全設(shè)置：

sudo?mysql_secure_installation

然后，我們可以創(chuàng)建一個(gè)新的 MySQL 數(shù)據(jù)庫：

CREATE?DATABASE?dbname?CHARACTER?SET?utf8mb4?COLLATE?utf8mb4_unicode_ci;
CREATE?USER?'dbuser'@'localhost'?IDENTIFIED?BY?'dbpassword';
GRANT?ALL?PRIVILEGES?ON?dbname.*?TO?'dbuser'@'localhost';

在 Laravel 的 .env 配置文件中，我們需要進(jìn)行如下數(shù)據(jù)庫配置：

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=dbname
DB_USERNAME=dbuser
DB_PASSWORD=dbpassword

3.4 執(zhí)行數(shù)據(jù)庫遷移

接下來，我們需要執(zhí)行 Laravel 數(shù)據(jù)庫遷移，并進(jìn)行一些初始化操作：

php?artisan?migrate
php?artisan?db:seed
php?artisan?key:generate

3.5 重啟服務(wù)

最后，我們需要重啟 NGINX 和 PHP-FPM 服務(wù)，使配置生效：

sudo?systemctl?restart?nginx
sudo?systemctl?restart?php7.4-fpm

至此，我們可以通過瀏覽器訪問我們的應(yīng)用程序，Laravel 前后端分離部署就完成了。

三、結(jié)論

本文介紹了使用 Laravel 實(shí)現(xiàn)前后端分離部署的兩種方式：創(chuàng)建一個(gè)新的前端項(xiàng)目和使用 Laravel Mix 打包前端項(xiàng)目兩種方式。當(dāng)然，對(duì)于前端開發(fā)人員來說，也可以選擇自己熟悉的框架、編程語言來進(jìn)行前端開發(fā)，只需要遵循前后端分離的原則即可?？傊?，Laravel 的靈活性使得它可以與許多現(xiàn)代前端框架和工具配合使用，讓開發(fā)人員可以更自由地選擇適合自己的開發(fā)方式。

以上是如何使用Laravel實(shí)現(xiàn)前後端分離部署的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！