Windows(WSL)を使ったLaravel10 × sail × Vue.js環境構築

開発環境

• windows環境
  windows10, windows11
• wsl
• docker

Laravel sailの導入

• Dockerが立ち上がっていることを確認

• Dockerを導入していない方は下記で導入の記事を投稿していますのでこちらへ
  https://qiita.com/ys05181406/items/49fa9d9de286f0a474ef

• 下記の画面が出ていたら立ち上がっています
  

• ターミナルにてUbuntu 22.04 LSTを選択
  

• 下記のコマンドのprojectNameに作成したいプロジェクト名を記入

• ターミナルにて実行

curl -s https://laravel.build/projectName | bash

• ディレクトリの移動をし、dockerコンテナの立ち上げ

cd projectName
./vendor/bin/sail up -d --build

• 立ち上がったことが確認出来たら http://localhost にアクセス
  
• 上記の画面が出ていたら成功です。
• 下記のコマンドを実行後パスワードを聞かれるのでパスワードを入力を行いEnter

sudo vi ~/.bashrc

• 下記の画面が表示されるのでiを押し書き込みモードに変更
  
• 一番下に下記の追記を行う

alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

• ESCを押し:wqを入力しEnterで保存し、viを終了
• 最後に下記のコマンドを実行し、設定を反映

source ~/.bashrc

• これで./vendor/bin/sail up -d --buildのようなコマンドをsail up -d --buildで実行することができます。

Laravel Breeze, Vue.js導入

• 下記のコマンドを実行してLaravel Breezeを導入してください

sail composer require laravel/breeze --dev

• 下記のコマンドを実行

sail php artisan breeze:install vue
sail php artisan migrate
sail npm install
sail npm run dev

• この状態でhttp://localhost にアクセスしてみるとさっきまで移っていたLaravelの初期画面がなくなっていることが確認できると思います。
  
• Windows(WSL)のみに起こるバグらしくVue.jsを導入後sail npm run devを行うと表示されません
• ターミナルにてctr + cでsail npm run devを終了させてください
• 作成したプロジェクトディレクトリ内のvite.config.jsの中身を確認
• 下記のコードが記述されていると思います

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

• 下記をコピペして貼り付けてください

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],

    server: {
        hmr: {
            host: 'localhost',
        },
    },
});

• 内容としては下記を追記しただけです

vite.config.js

    server: {
        hmr: {
            host: 'localhost',
        },
    },

• 改めてsail npm run devを実行してhttp://localhost にアクセスしてみましょう
  
• Laravelの初期画面が出ていたら成功です
• Vue.jsを使って開発を行うときはsail npm run devを実行した状態で開発を行うことでリロードを行わずにリアルタイムに表示の変更がされるので開発効率を上げることができます。
• 最後にsail downを実行することでsail up -d --buildで立ち上げたコンテナ落とすことができます。
• 今後ともWindows(WSL)を使った環境構築の記事を投稿しようと思っていますのでいいね！を押していただけたらと思います。