WEBOPIXEL

Laravel Viteでフロントと管理画面のビルドを分ける方法

Laravelロゴ

Posted: 2022.10.30 / Category: PHP / Tag: 

一般ユーザーに表示するフロント画面と管理画面で大きくデザインがことなる場合アセットを分けたいとときがあると思います。
そこで今回はLaravel Viteでビルドの分け方をご紹介します。

Sponsored Link

Laravel Viteの使い方は下記も参考にしてください。

Laravelに新しく導入されたフロントビルドツール「Vite」でTypeScript+React開発環境を構築する方法

フォルダ構成

resources以下のcss,jsディレクトリにそれぞれback,frontを作成します。

resources
├ css
│ ├ back
│ │  └ app.css
│ └ front
│    └ app.css
└ js
  ├ back
  │  └ app.js
  └ front
     └ app.js

config設定

PHPのVite設定ファイルを編集します。
ない場合あらたに作成します。
これはbladeファイルで@viteディレクリブを使用したときに使用する設定になります。

config/vite.php

<?php
return [
	'configs' => [
		'front' => [
			'entrypoints' => [
				'paths' => [
					'resources/js/front/app.js',
					'resources/css/front/app.css',
				]
			],
			'dev_server' => [
				'enabled' => true,
				'url' => env('DEV_SERVER_URL', 'http://localhost:5173'),
				'ping_before_using_manifest' => true,
				'ping_url' => null,
				'ping_timeout' => 1,
			],
			'build_path' => 'build/front',
		],
		'back' => [
			'entrypoints' => [
				'paths' => [
					'resources/js/back/app.js',
					'resources/css/back/app.css',
				]
			],
			'dev_server' => [
				'enabled' => true,
				'url' => env('DEV_SERVER_URL', 'http://localhost:5173'),
				'ping_before_using_manifest' => true,
				'ping_url' => null,
				'ping_timeout' => 1,
			],
			'build_path' => 'build/back',
		],
	],
];

vite.config設定

通常はvite.configファイルを使用しますが、今回はfront,back用にそれぞれ別ファイルを作ります。

vite.front.config.js

import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		laravel({
			config: 'front',
			input: [
				'resources/js/front/app.js',
				'resources/css/front/app.css'
			],
			buildDirectory: 'build/front',
			refresh: true
		})
	]
})

vite.back.config.js

import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		laravel({
			config: 'back',
			input: [
				'resources/js/back/app.js',
				'resources/css/back/app.css'
			],
			buildDirectory: 'build/back',
			refresh: true
		})
	]
})
config config/vite.phpで設定したキーを指定します。
input 元のリソースファイル(先ほど指定した場所を指定)
buildDirectory 出力時に書き出されるパス

package.jsonの設定

作成した「vite.front.config.js」と「vite.back.config.js」をコマンド実行時読み込むするように設定する必要があります。

package.json

{
	"private": true,
	"scripts": {
		"dev:front": "vite --config vite.front.config.js",
		"dev:back": "vite --config vite.back.config.js",
		"build:front": "vite build --config vite.front.config.js",
		"build:back": "vite build --config vite.back.config.js"
	},
	// ...
}

これで下記コマンドで作成した設定ファイルを読み込むことができます。

フロント開発時
$ yarn run dev:front
フロントビルド時
$ yarn run build:front
管理画面開発時
$ yarn run dev:back
管理画面ビルド時
$ yarn run build:back

表示

ビューファイルで設定したアセットを読み込みます。
@viteディレクティブの引数はconfig/vite.phpで設定したキーになりますので、フロントは「front」管理画面は「back」で指定します。

// フロントファイル
@vite('front')
// 管理画面ファイル
@vite('back')

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。