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