【超簡単】Laravel9 dockerで開発環境構築

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

以上で使いまわし可能な設定が完了しました。