Laravelの環境構築を自分のメモ用に残します。npm run devで画面が真っ白、cssがあたっていない問題も解決しています。
前提条件
- Dockerがインストールされていて既に起動している状態
- Macが前提、ただし、WSL2でもLinuxでもほぼ同じコマンドです
- WindowsのWSL2の場合LinuxターミナルからRemoteContainerで立ち上げる
Docker Hubからコンテナイメージを取得する
Docker HubでLaravelを検索し、上位に表示されていてVERIFIED PUBLISHER(検証済み出版元)のbitnami/laravelを選択する。
ターミナルでインストールするディレクトリに移動
cdコマンドでインストールするディレクトリに移動
mkdir ~/myapp cd ~/myapp
docker-compose.ymlファイルを取得する
curl -LO https://raw.githubusercontent.com/bitnami/containers/main/bitnami/laravel/docker-compose.yml
ymlファイルの中身を編集してインストールする
デフォルトのymlファイルでは後で使用するViteのdevサーバーが立ち上がらないので
ports:に – ‘${VITE_PORT:-5173}:${VITE_PORT:-5173}’ を追記します。
もし、デフォルトの5173を変えたい場合は5173の部分を例えば5174に両方変えて、後述しているvite.config.jsの設定を合わせて変える必要があります。
myapp: image: docker.io/bitnami/laravel:9 ports: - '8000:8000' //もし、8000を変えたい場合'9000:8000'にする - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
その後、下記コードを実行
docker-compose up
バックグラウンドで実行するには -d オプションをつけて実行する
docker-compose up -d
ブラウザで起動確認
ブラウザのアドレスバーに localhost:8000 と入力してLaravelの画面が表示されたらインストール成功
Laravelの設定
デフォルトのmyappでインストールした場合、bash でmyappコンテナに入った方がその後のコマンド「docker-compose exec」を省略できる。コンテナから出るときは「exit」でOK
docker-compose exec myapp bash
認証機能Laravel Breeze導入
公式ドキュメントを参考に下記コマンドを実行する。日本語ドキュメントのリンクも載せておきます。
composer require laravel/breeze --dev
パッケージをインストールしたらartisanコマンドを実行します。
php artisan breeze:install php artisan migrate npm install npm run dev
公式ドキュメントの通りに上記の npm run dev を実行してもViteサーバーが立ち上がりません。
npm run dev の代わりに npm run buildをおすすめするwebサイトが多数見受けられましたが、ホットリロードの開発を放棄しているのでおすすめできません。
ctrl + c で一旦抜け、vite.config.jsファイルを編集します。
もし、viteのport番号を変えたい場合はport: 5173の部分を5174とかに変える必要があります。
//vite.config.js import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js', ], refresh: true, }), ], server: { //追加 host: true, //追加 hmr: { //追加 host: 'localhost', //追加 }, //追加 port: 5173, //デフォルトは5173なのでこの行は不要 }, //追加 });
.envファイルのAPP_URLを編集します。http://localhostの後ろに:8000を追記します。
// .envファイル //APP_URL=http://localhost に:8000を追記 APP_URL=http://localhost:8000
以上で準備完了です。npm run dev を実行すると下記結果になります。
root@676c84bcc4c5:/app# npm run dev > @ dev /app > vite VITE v3.0.9 ready in 1141 ms ➜ Local: http://localhost:5173/ ➜ Network: http://172.21.0.3:5173/ LARAVEL v9.27.0 plugin v0.6.0 ➜ APP_URL: http://localhost:8000
Local: http://localhost:5173/ をクリックするとViteサーバーが立ち上がっているのを確認できます。
APP_URL: http://localhost:8000 をクリックするとLaravelのwelcomeページが表示されます。
loginページ等でホットリロードを試すこともできます。
ソースコードを変更するとすぐにビューに反映されます。
これができなくて数日悪戦苦闘していました。
Laravel 日本語化の設定
composerを使用してLaravel Lang を導入する
composer require laravel-lang/lang --dev
config/app.phpのファイルの中身を日本語に更新する
'timezone' => 'Asia/Tokyo', 'locale' => 'ja', 'faker_locale' => 'ja_JP',
続いてLaravel Lang Publisherのインストール
composer require laravel-lang/publisher laravel-lang/lang laravel-lang/attributes --dev
日本語ファイルをartisanコマンドでコピー
php artisan lang:add ja
以上で使いまわし可能な設定が完了しました。
コメント
docker.io/bitnami/laravel:9でコンテナが簡単に立ち上げたのに、viteサーバーのポート5173にアクセスできない、、、。と悩んでいました。
助かりました。 ありがとうございました。
初めてコメントいただきました。コメントありがとうございます。
お役に立てて嬉しいです。