如何使用Laravel實現前後端分離部署

在現如今網路世界中，以Web應用程式作為核心的軟體服務越來越流行。其中，Laravel框架作為PHP語言的優秀開發框架，不僅具有高效的效能，而且還擁有友善的開發體驗、豐富的開源 community、強大的 ORM 和遷移系統等一系列優點。而Laravel在後台開發中，最近也逐漸流行起了前後端分離的開發模式。本篇文章將介紹如何使用 Laravel 實作前後端分離部署。

一、什麼是前後端分離

前後端分離是一種新的 Web 應用程式開發方式，該方式從技術實作上將前端和後端完全分開。前端程式負責產生介面，並與伺服器通訊取得數據，後台程式則負責業務邏輯的處理和資料庫的存取。

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

二、Laravel 前後端分離的實作

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

1. 建立一個新的前端項目

我們可以先建立一個獨立的前端項目，再以 API 的方式與 Laravel 後端互動。在這個模式下，Laravel 只負責後端資料API介面的編寫，前端使用 AJAX 或 Fetch API 的方式來請求後端的資料介面。前端和後端的程式碼可以分別進行在不同的伺服器或連接埠進行部署。

這種方式的優點是前端和後端的分離度非常高，開發人員可以充分發揮各自的優勢，同時也能夠提高應用程式的效能。還可以運用一些現代前端框架和工具，提升開發效率和開發體驗。

下面是一個簡單的範例來示範這種方式的實作。我們以Laravel 為後端，Vue.js 為前端為例：

1.1 建立一個新的Laravel 專案

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

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

1.2 建立一個新的Vue.js 專案

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

npm install -g vue-cli
vue init webpack frontend

1.3 設定Laravel 和Vue.js

接下來，我們需要設定routes/api.php 檔案來回應Vue.js 前端的請求。

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

在 frontend/src/App.vue 中，我們可以使用 Axios 或任何其他 AJAX 函式庫來取得後端 API。在這個範例中，我們將使用 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 前端設定為使用與 Laravel 後端不同的連接埠。然後，我們可以運行並訪問這個應用程式。

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

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

另一個方式是將前端程式碼和Laravel 後台程式碼打包到同一個專案中進行部署，這種模式下Laravel Mix 作為工具用於建立前端應用程式。 Laravel Mix 是一個簡化了 Webpack 的建置工具，可以讓我們輕鬆地打包前端資源。

這種方式的優點是前後端程式碼會打包成一個整體，方便部署和維護。我們可以使用類似npm run dev 和npm run build 的指令來編譯前端程式碼，並將編譯結果放在Laravel 的public 目錄中，這樣我們就可以透過瀏覽器直接訪問應用程式了。

下面是一個簡單的範例來示範這種方式的實作：

2.1 建立一個新的Laravel 專案

首先，我們需要在命令列中建立一個新的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

然後，我們需要執行以下命令來產生webpack.mix.js 設定檔：

node_modules/.bin/mix

2.4 編寫前端程式碼

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

"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 設定 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 编译前端资源

接下来，我们可以运行以下命令来编译前端资源：

npm run dev

或

npm run watch

这样，我们就可以在浏览器中看到我们的应用程序了。

3. 部署应用程序

无论我们使用哪种方式来实现前后端分离，最终都需要进行部署。我们可以使用第三方工具如 Jenkins、Capistrano 和 Docker Compose 等来自动化部署。这里介绍一种基于 NGINX + PHP-FPM + MySQL 的部署方式。

3.1 安装服务

首先，我们需要安装 NGINX、PHP-FPM 和 MySQL。我们可以使用以下命令在 Ubuntu 中进行安装：

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 目录下创建一个新的配置文件。以下是配置文件的示例：

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 目录中。例如，我们使用前两种方式中的第一种方式，代码存放在了一个 独立的前端项目 中。我们可以使用以下命令将编译好的前端代码复制到 /var/www/public 目录中：

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

3.3 配置 MySQL

接下来，我们需要配置 MySQL。我们可以使用以下命令进行安全设置：

sudo mysql_secure_installation

然后，我们可以创建一个新的 MySQL 数据库：

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 配置文件中，我们需要进行如下数据库配置：

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

3.4 执行数据库迁移

接下来，我们需要执行 Laravel 数据库迁移，并进行一些初始化操作：

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

3.5 重启服务

最后，我们需要重启 NGINX 和 PHP-FPM 服务，使配置生效：

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

至此，我们可以通过浏览器访问我们的应用程序，Laravel 前后端分离部署就完成了。

三、结论

本文介绍了使用 Laravel 实现前后端分离部署的两种方式：创建一个新的前端项目和使用 Laravel Mix 打包前端项目两种方式。当然，对于前端开发人员来说，也可以选择自己熟悉的框架、编程语言来进行前端开发，只需要遵循前后端分离的原则即可。总之，Laravel 的灵活性使得它可以与许多现代前端框架和工具配合使用，让开发人员可以更自由地选择适合自己的开发方式。

以上是如何使用Laravel實現前後端分離部署的詳細內容。更多資訊請關注PHP中文網其他相關文章！