Laravel を使用してフロントエンドとバックエンドの個別のデプロイメントを実装する方法-Laravel-php.cn

今日のインターネットの世界では、Web アプリケーションを中心としたソフトウェアサービスがますます普及しています。その中でも、Laravelフレームワークは、PHP言語の優れた開発フレームワークとして、効率的なパフォーマンスを備えているだけでなく、フレンドリーな開発経験、豊富なオープンソースコミュニティ、強力なORM、移行システムなどの一連の利点もあります。 Laravelのバックエンド開発では、最近フロントエンドとバックエンドを分離する開発モデルが徐々に普及してきています。この記事では、Laravelを使ってフロントエンドとバックエンドの分離デプロイを実現する方法を紹介します。

1. フロントエンドとバックエンドの分離とは

フロントエンドとフロントエンドの分離は、Web アプリケーションを開発する新しい方法であり、フロントエンドとバックエンドを完全に分離します。 -技術的な観点から終わります。フロントエンドプログラムはインターフェイスの生成とサーバーとの通信によるデータ取得を担当し、バックグラウンドプログラムはビジネスロジックの処理とデータベースへのアクセスを担当します。

このアプローチには多くの利点があります。まず、フロントエンドとバックエンドの開発効率を向上させることができます。フロントエンド開発者とバックエンド開発者は並行して開発できるため、相互の依存関係が軽減され、第 2 に、アプリケーションのパフォーマンスが向上します。フロントエンドとバックエンドのサービスは個別に導入および拡張できるため、システム全体のパフォーマンスが大幅に向上します。さらに、このアプローチにより、フロントエンド開発者とバックエンド開発者の両方が可能な限りそれぞれの領域に集中できるようになり、コードの品質と保守性が向上します。

2. Laravel でのフロントエンドとバックエンドの分離の実装

Laravel 開発では、フロントエンドとバックエンドの分離を実装するには、いくつかのフロントエンドフレームワークを使用する必要があります。。その中で、フロントエンド開発ソリューションとして、Vue.js、React、Angular などの主流のフレームワークを使用できます。 Laravel では、次の 2 つの方法を使用してフロントエンドとバックエンドの分離を実現できます。

新しいフロントエンドプロジェクトを作成する

最初に独立したフロントエンドプロジェクトを作成し、次に 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 を構成する

次に、Vue.js フロントエンドからのリクエストに応答するように routes/api.php ファイルを設定する必要があります。

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 で、Laravel バックエンドとは異なるポートを使用するように Vue.js フロントエンドを設定できます。その後、アプリケーションを実行してアクセスできるようになります。

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

ログイン後にコピー

Laravel Mix を使用してフロントエンドプロジェクトをパッケージ化する

もう 1 つの方法は、フロントエンドコードと Laravel バックエンドコードを同じプロジェクトにパッケージ化してデプロイすることです。このモードでは、Laravel Mix がフロントエンドアプリケーションを構築するためのツールとして使用されます。 Laravel Mix は、フロントエンドリソースを簡単にパッケージ化できる簡素化された Webpack ビルドツールです。

この方法の利点は、フロントエンドとバックエンドのコードが全体としてパッケージ化されるため、展開とメンテナンスに便利であることです。 npm run dev や npm run build に似たコマンドを使用してフロントエンドコードをコンパイルし、コンパイル結果を Laravel のパブリックディレクトリに配置して、ブラウザから表示できるようにします。アプリケーションに直接アクセスします。

以下は、このメソッドの実装を示す簡単な例です。

2.1 新しい Laravel プロジェクトを作成する

まず、新しい 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 Mix を Laravel にインストールする

次に、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 ディレクトリに配置できます。たとえば、いくつかの CSS スタイルを 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;
}

ログイン後にコピー

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

ログイン後にコピー

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

部署应用程序

无论我们使用哪种方式来实现前后端分离，最终都需要进行部署。我们可以使用第三方工具如 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 中国語 Web サイトの他の関連記事を参照してください。