Laravel breezeでviteからmixに戻す方法
Laravelのbreezeに新しく導入されたビルドツール、viteがなぜかcloud9だとうまく動作しない。
そのためビルドツールを、viteからmixに戻す方法をまとめました。
（Laravel SailやMAMPを使っている場合は、こんなことしなくても問題なく動作します）
ファイル名の変更
resources/app.jsxになっていた場合は、resources/app.jsに直す
Laravel Mixのインストール
npm install --save-dev laravel-mix
app.jsの編集
import './bootstrap';
import React from 'react';
import { render } from 'react-dom';
import { createInertiaApp } from '@inertiajs/inertia-react';
import { InertiaProgress } from '@inertiajs/progress';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.jsx`),
setup({ el, App, props }) {
return render(<App {...props} />, el);
},
});
InertiaProgress.init({ color: '#4B5563' });
package.jsonの修正
package.jsonのscriptsというところを書き換える。
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
}
webpack.mix.jsの作成
.envなどと同階層にwebpack.mix.jsファイルを作成する。
ファイルに下記のコードを記述する。
let mix = require("laravel-mix");
mix.js("resources/js/app.js", "public/js")
.react()
.postCss("resources/css/app.css", "public/css", [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
])
.alias({
"@": "resources/js",
});
if (mix.inProduction()) {
mix.version();
}
.envの内容を修正する
.envファイル内でVITEになっている箇所を全て書き換えてください。
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_HOST="${PUSHER_HOST}"
MIX_PUSHER_PORT="${PUSHER_PORT}"
MIX_PUSHER_SCHEME="${PUSHER_SCHEME}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
app.blade.phpの内容を修正する
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Scripts -->
@routes
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>
@inertiaHead
</head>
<body class="font-sans antialiased">
@inertia
</body>
</html>
使わなくなったViteを削除する
npm remove vite laravel-vite-plugin
rm vite.config.js
必要なパッケージをインストール
npm install @babel/preset-react --save-dev --legacy-peer-deps
https化
AppServiceProviderのboot()に下記のコードを追加
こちらに関しては必要に応じて追加してください。
public function boot()
{
\URL::forceScheme("https"); //追加
}
こちら参考にした記事です。
https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-vite-to-laravel-mix