laravel-frontend-file-mover v0.0.4
🍕 適用情境
- 您的服務後端使用 php laravel
- 前端使用 Vue.js 或 React.js 任一框架
- 您的前後端 git repo 完全分離,且時常需要個別部署
👨🚀 如果你符合以上三個情況,這個 file-mover 可以幫助你快速把 build 完的前端資源放置到 laravel server 中
🔰 前置作業
- 需要一個 laravel server
- 需要一個基於 React.js 或 Vue.js 的前端應用
- 建議先複製你的 laravel server 進行測試,等妳瞭解它的運作模式後再放到正式環境
🚀 安裝
在你的前端應用終端機執行下列指令
npm install -D laravel-frontend-file-mover
於根目錄新增檔案
file-mover.config.js
,並新增以下內容module.exports = { build_root: 'build', build_index_filename: 'index.html', laravel_server_root: '../../', laravel_server_resources: 'resources/views', laravel_server_public: 'public', index_file_dest: 'frontend', index_filename: 'index.blade.php', resources_dest: 'frontend' };
build_root
: 前端應用 build 好之後的放置位置,通常不需要修改build_index_filename
: 前端應用 build 好之後的入口檔案,通常不需要修改laravel_server_root
: 請確認有正確指向 laravel server root (注意不是 public)- 此設定預設是將前端應用 repo 放置於 laravel 目錄中的 /frontend 資料夾,laravel 預設沒有這個資料夾,需自行建立。
laravel_server_resources
: 如果你有修改 laravel 中 /resources/views 路徑會需要調整laravel_server_public
: 如果你有修改 laravel 中 /public 路徑會需要調整index_file_dest
: 為index.blade.php
檔案放置的位置index_filename
: 為build_index_filename
放置到 laravel 中想要指定的 .blade.php 檔案名稱resources_dest
: 為前端應用 cs, js...等資源在 laravel 中想要放置的位置- 不建議 設定為
''
或'/'
,會讓 /public 資料夾變得難以維護
- 不建議 設定為
如果你想要
index_file_dest
及resources_dest
自動參考前端的 publicPath(vue) 或 homepage(react),可以改用下列的設定const fs = require('fs'); const path = require('path'); let publicPath = ''; const packageJson = require(path.join(process.cwd(), 'package.json')); if (!packageJson.homepage){ const vueConfigPath = path.join(process.cwd(), 'vue.config.js'); if (fs.existsSync(vueConfigPath)) { // Vue build path publicPath = vueConfigPath.publicPath || '' } } else { // React build path publicPath = packageJson.homepage; } module.exports = { build_root: 'build', build_index_filename: 'index.html', laravel_server_root: '../../', laravel_server_resources: 'resources/views', laravel_server_public: 'public', index_file_dest: publicPath, index_filename: 'index.blade.php', resources_dest: publicPath };
更新 Laravel Routes
- 查看你的 laravel server 中的 routes 設定,通常放置於 routes/web.php 檔案中,預設內容為:
Route::get('/', function () { return view('welcome'); });
以第一個 config 預設值為例子,你會需要將原本的內容刪除並新增
Route::view('/any/route', '/frontend/index');
'/any/route'
為指定的 route 路徑,這邊可以依照業務需求調整/frontend/index
代表當'/any/route'
被請求時,會至'resources/views/frontend/index.blade.php'
尋找 blade 檔,這個檔案在後面的步驟中會幫你建立起來
以第二個 config 為例子,如果你的 publicPath 設定為
'/promotion/event'
,你的 route 就需要調整為Route::view('/any/route', '/promotion/event/index');
- 代表一但
http://localhost/any/route
被請求時 laravel 就會嘗試取得'resources/views/promotion/event/index.blade.php'
- 更詳細的介紹可以參考Laravel 官方文件來了解 route 跟 blade 之間的關係
🚩 執行
執行指令
npm run build npx move-frontend-app
完成後會把檔案都放置到指定位置中,你可以查看 /resources/views 及 /resources/public 的內容。 以第一個 config 為例子,完成之後的資料夾結構會如下面所示:
laravel └ resources | └ views | └ frontend | └ index.blade.php └ public └ frontend └ css └ js └ favicon.ico └ ...
新增下列 npm-script 到你的前端應用的
package.json
中{ "scripts": { "build:server": "npm run build && move-frontend-app" } }
之後執行
npm run build:server
就可以自動 build 完之後將檔案搬移到 server 中
添加 .gitignore
為了避免每次前端 build:server
之後影響到後端 repo 的 git flow,可以將前端會使用到的路徑添加到 .gitignore
檔案中
/public/publicPath/*
/resources/publicPath/*
/frontend
注意
Laravel 會優先尋找 /public
資料夾中放置的靜態資源,如果不存在才會去比對 routes 的設定值,意思是說 route/web.php
中設定的監聽路徑 '/frontend'
跟 public/frontend 資料夾不能同時存在,要特別留意。
舉例來說,當你的 route 設定如下
Route::view('/frontend', '/promotion/event/index');
同時靜態資源的放置路徑如下
laravel
└ resources
| └ views
| └ promotion
| └ event
| └ index.blade.php
└ public
└ frontend
└ css
└ js
└ favicon.ico
└ ...
此時 '/frontend'
及 /public/frontend 就是衝突的,當 'http://localhost/frontend'
被請求時,會永遠被解析到 /public/frontend 導致畫面無法正常呈現