Comment utiliser Laravel pour implémenter un déploiement séparé du front-end et du back-end

Dans le monde Internet d'aujourd'hui, les services logiciels centrés sur les applications Web deviennent de plus en plus populaires. Parmi eux, le framework Laravel, en tant qu'excellent cadre de développement pour le langage PHP, offre non seulement des performances efficaces, mais présente également une série d'avantages tels qu'une expérience de développement conviviale, une riche communauté open source, un ORM puissant et un système de migration. Dans le développement back-end de Laravel, le modèle de développement de séparation front-end et back-end est progressivement devenu populaire récemment. Cet article explique comment utiliser Laravel pour réaliser un déploiement séparé du front-end et du back-end.

1. Qu'est-ce que la séparation front-end et back-end ?

La séparation front-end et back-end est une nouvelle façon de développer des applications Web, qui sépare complètement le front-end et le back-end d'un point de vue technique. Le programme frontal est responsable de la génération de l'interface et de la communication avec le serveur pour obtenir les données, tandis que le programme d'arrière-plan est responsable du traitement de la logique métier et de l'accès à la base de données.

Cette méthode présente de nombreux avantages. Premièrement, cela peut améliorer l’efficacité du développement front-end et back-end. Les développeurs front-end et back-end peuvent se développer en parallèle, réduisant ainsi la dépendance les uns envers les autres ; deuxièmement, cela peut améliorer les performances des applications. Étant donné que les services front-end et back-end peuvent être déployés et étendus séparément, les performances globales du système peuvent être considérablement améliorées. De plus, cette approche permet aux développeurs front-end et back-end de se concentrer autant que possible sur leurs domaines respectifs, améliorant ainsi la qualité et la maintenabilité du code.

2. Implémentation de la séparation front-end et back-end dans Laravel

Dans le développement de Laravel, la mise en œuvre de la séparation front-end et back-end nécessite l'utilisation de certains frameworks front-end. Parmi eux, nous pouvons utiliser des frameworks grand public tels que Vue.js, React ou Angular comme solutions de développement front-end. Dans Laravel, nous pouvons utiliser les deux méthodes suivantes pour réaliser la séparation du front-end et du back-end.

1. Créer un nouveau projet front-end

Nous pouvons d'abord créer un projet front-end indépendant, puis interagir avec le backend Laravel via l'API. Dans ce mode, Laravel est uniquement responsable de l'écriture de l'interface API de données back-end, et le front-end utilise AJAX ou Fetch API pour demander l'interface de données back-end. Les codes front-end et back-end peuvent être déployés sur différents serveurs ou ports.

L'avantage de cette approche est que la séparation entre le front-end et le back-end est très élevée. Les développeurs peuvent exploiter pleinement leurs atouts respectifs tout en améliorant les performances de l'application. Vous pouvez également utiliser certains frameworks et outils front-end modernes pour améliorer l’efficacité et l’expérience de développement.

Voici un exemple simple pour démontrer cette approche. Prenons comme exemple Laravel comme backend et Vue.js comme frontend :

1.1 Créer un nouveau projet Laravel

Tout d'abord, nous devons créer un nouveau projet Laravel dans la ligne de commande :

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

1.2 Créer une nouvelle Vue. Projet .js

Ensuite, nous devons créer un nouveau projet Vue.js :

npm install -g vue-cli
vue init webpack frontend

1.3 Configuration de Laravel et Vue.js

Ensuite, nous devons configurer le fichier routes/api.php Pour répondre aux demandes du front-end 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

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

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

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

Dans frontend/src/App.vue nous pouvons utiliser Axios ou toute autre bibliothèque AJAX pour obtenir l'API backend. Dans cet exemple, nous utiliserons la bibliothèque Axios.

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

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

Dans frontend/config/index.js, nous pouvons configurer l'interface Vue.js pour utiliser un port différent de celui du backend Laravel. Nous pouvons ensuite exécuter et accéder à l'application. 🎜

npm run dev

🎜Utilisez Laravel Mix pour empaqueter des projets front-end🎜🎜🎜Une autre façon consiste à empaqueter le code front-end et le code back-end Laravel dans le même projet pour le déploiement. Laravel Mix est utilisé comme outil pour créer des applications frontales. Laravel Mix est un outil de création Webpack simplifié qui nous permet de regrouper facilement des ressources frontales. 🎜🎜L'avantage de cette méthode est que les codes front-end et back-end seront packagés dans leur ensemble, ce qui la rend facile à déployer et à maintenir. Nous pouvons utiliser des commandes similaires à npm run dev et npm run build pour compiler le code frontal et placer les résultats de la compilation dans le répertoire public de Laravel, afin que nous puissions Le navigateur accède directement à l’application. 🎜🎜Voici un exemple simple pour démontrer cette approche : 🎜🎜2.1 Créer un nouveau projet Laravel 🎜🎜Tout d'abord, nous devons créer un nouveau projet Laravel dans la ligne de commande : 🎜

npm run watch

🎜2.2 Installer Node.js et NPM🎜🎜Dans les prochaines étapes, nous devons installer Node.js et NPM. 🎜🎜Dans Ubuntu, vous pouvez l'installer en utilisant la commande suivante : 🎜

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

🎜2.3 Installer Laravel Mix dans Laravel🎜🎜Ensuite, nous devons installer Laravel Mix : 🎜

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;
    }
}

🎜Ensuite, nous devons exécuter la commande suivante pour générer le webpack.mix .js Fichier de configuration : 🎜

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

🎜2.4 Écrire du code front-end🎜🎜Ensuite, nous devons écrire du code front-end. Par exemple, nous pouvons écrire du code JavaScript dans le fichier resources/assets/js/app.js. Voici un exemple simple : 🎜

sudo mysql_secure_installation

🎜2.5 Écriture de ressources frontales🎜🎜Nous pouvons placer les fichiers de ressources frontales dans le répertoire resources/assets. Par exemple, nous pouvons écrire certains styles CSS dans resources/assets/sass/app.scss. 🎜

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';

🎜2.6 Configuration de 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 的灵活性使得它可以与许多现代前端框架和工具配合使用，让开发人员可以更自由地选择适合自己的开发方式。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!