오늘날의 인터넷 세계에서는 웹 애플리케이션을 핵심으로 하는 소프트웨어 서비스가 점점 더 대중화되고 있습니다. 그 중 Laravel 프레임워크는 PHP 언어를 위한 탁월한 개발 프레임워크로서 효율적인 성능을 제공할 뿐만 아니라 친숙한 개발 경험, 풍부한 오픈 소스 커뮤니티, 강력한 ORM 및 마이그레이션 시스템과 같은 일련의 장점을 가지고 있습니다. Laravel의 백엔드 개발에서는 최근 프론트엔드와 백엔드를 분리하는 개발 모델이 점차 대중화되고 있습니다. 이 기사에서는 Laravel을 사용하여 프런트엔드와 백엔드를 별도로 배포하는 방법을 소개합니다.
1. 프론트엔드와 백엔드 분리란?
프론트엔드와 백엔드 분리는 기술적인 관점에서 프론트엔드와 백엔드를 완전히 분리하는 웹 애플리케이션 개발의 새로운 방식입니다. 프런트엔드 프로그램은 인터페이스를 생성하고 서버와 통신하여 데이터를 얻는 역할을 담당하고, 백그라운드 프로그램은 비즈니스 로직을 처리하고 데이터베이스에 액세스하는 역할을 합니다.
이 방법에는 많은 이점이 있습니다. 첫째, 프론트엔드와 백엔드 개발의 효율성을 향상시킬 수 있습니다. 프론트엔드와 백엔드 개발자는 병렬로 개발할 수 있어 서로에 대한 의존도를 줄일 수 있으며, 둘째, 애플리케이션 성능을 향상시킬 수 있습니다. 프런트엔드 서비스와 백엔드 서비스를 별도로 배포하고 확장할 수 있으므로 시스템의 전반적인 성능이 크게 향상될 수 있습니다. 또한 이 접근 방식을 통해 프런트엔드와 백엔드 개발자 모두 각자의 영역에 최대한 집중할 수 있어 코드 품질과 유지 관리성이 향상됩니다.
2. Laravel에서 프런트엔드와 백엔드 분리 구현
Laravel 개발에서 프런트엔드와 백엔드 분리를 구현하려면 일부 프런트엔드 프레임워크를 사용해야 합니다. 그중 Vue.js, React, Angular와 같은 주류 프레임워크를 프런트엔드 개발 솔루션으로 사용할 수 있습니다. Laravel에서는 프런트엔드와 백엔드를 분리하기 위해 다음 두 가지 방법을 사용할 수 있습니다.
먼저 독립적인 프런트엔드 프로젝트를 만든 다음 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 프런트 엔드의 요청에 응답합니다. 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
另一个方式是将前端代码和 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;
}frontend/src/App.vue에서 Axios나 다른 AJAX 라이브러리를 사용하여 백엔드 API를 얻을 수 있습니다. 이 예에서는 Axios 라이브러리를 사용합니다.
const mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');frontend/config/index.js에서 Laravel 백엔드와 다른 포트를 사용하도록 Vue.js 프런트엔드를 설정할 수 있습니다. 그런 다음 애플리케이션을 실행하고 액세스할 수 있습니다. 🎜npm run dev
npm run dev 및 npm run build와 유사한 명령을 사용하여 프런트 엔드 코드를 컴파일하고 컴파일 결과를 Laravel의 공개 디렉터리에 배치할 수 있습니다. 애플리케이션에 직접 액세스합니다. 🎜🎜이 접근 방식을 보여주는 간단한 예는 다음과 같습니다. 🎜🎜2.1 새 Laravel 프로젝트 만들기 🎜🎜먼저 명령줄에서 새 Laravel 프로젝트를 만들어야 합니다. 🎜npm run watch
sudo apt-get install nginx sudo apt-get install mysql-server sudo apt-get install php-fpm
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;
}
}cp -r /path/to/frontend/dist/* /var/www/public
resources/assets/js/app.js 파일에 일부 JavaScript 코드를 작성할 수 있습니다. 다음은 간단한 예입니다. 🎜sudo mysql_secure_installation
resources/assets 디렉터리에 넣을 수 있습니다. 예를 들어 resources/assets/sass/app.scss에 몇 가지 CSS 스타일을 작성할 수 있습니다. 🎜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';
我们需要在 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
