Laravelの学習をするのに、ローカル環境でXAMPをインストールして環境構築をしていましたが、Dockerで環境構築を行うのがスタンダードになってきています。私は慣れ親しんだXAMP、MAMPで開発してきましたが、そろそろDockerでと思い、環境を構築しました。備忘録を兼ねて記事にしたいと思います。
なぜDocker？ですが、PHP8.3と8.4プロジェクトによって分けたいとか、自分のPCを汚さずにコンテナを用意すればよいだけです。コンテナの中にmySQLの導入などもとても簡単にすることができます。
ReactフロントのLaravelのプロジェクトをDocker Laravel Sail環境で構築し、ユーザー登録、ログイン認証まで Windows11 Proで構築しましたので、備忘録です。
Dockerのインストール
Dockerのサイトからダウンロード。
私のPCではAMDをダウンロードしました。Docker Desktop Installer.exeをダウンロードしてインストールを実行します。
基本的にはすべてOKのみでインストールをしました。インストールしますとこのような画面になりましたのでCloseをクリックします。
WSLインストール
コマンドプロンプトを起動し、WSL（Windows Subsystem for Linux）をインストールします。コマンドプロンプトでwsl –installとします。Ubuntuがダウンロードおよびインストールされます。
Userアカウントを作成するように促されますので、Passwordを入力してUserアカウントを作成します。
Docker起動
WindowsのスタートメニューからDockerを起動します。Acceptをクリックします。
ログインが必要かに見えますが、ログインする必要はありません。Skipで大丈夫です。
ここは重要です。設定 → Resources → WSL integration で ubuntu のトグルを有効にします。Apply & Restartをクリックします。
コマンドプロンプトでwsl -l -v で確認します。Ubuntの左にアスタリスクが表示されていたらOKです。
もし、docker-desktopの左にアスタリスクが表示されていたら、次のコマンドを打ちます。wsl –set-default Ubuntu これでUbuntuがメイン環境になります。
PHPインストール
windowsのスタートメニューからUbuntuを開きます。
wslでフォルダを作成、フォルダに移動、PHP8.4のインストールをします。
mkdir source
cd source/
docker run -it -v $(pwd):/opt -w /opt laravelsail/php84-composer:latest /bin/bash
php -vでPHPが入ったことが確認できます。
Laravelプロジェクト作成
Docker内にLaravelプロジェクトを作成します。 composer create-project ‘laravel/laravel:13.*’ sail-example
プロジェクトのフォルダに移動します。 cd sail-example/
Laravel Sailのインストール
Laravel Sailを導入し、インストールします。
composer require laravel/sail –dev
php artisan sail:install
mySQLにチェックが入っていることを確認し、Enterキーを押します。
このようになりました。
一旦 exit で抜けます。
cd sail-example/ で移動し、 ./vendor/bin/sail up -d で Laravel Sailを一発起動します。
これでコンテナが作られますが、初回は結構時間かかります。数分～10数分くらいかかります。
docker ps でサーバの起動を確認します。二つのサーバが起動したことがわかります。
ブラウザで http://localhost/ で確認しますと、エラーがあります。権限を修正します。
権限変更
ll で権限を確認します。rootが権限をもっていることが分かります。
プロジェクト内のすべてのファイルの所有者を、現在のuserに変更します。
sudo chown -R user:user .
マイグレーション実行
マイグレーションを実行します。
http://localhost/ でLaravel13の初期画面が表示されます。
Laravelの環境構築、MySQL（データベース）の準備、そしてReact（Inertia.js）のインストール
Laravelの環境構築、MySQL（データベース）の準備、そしてReact（Inertia.js）をダウンロードします。
curl -s “https://laravel.build/react-app?with=mysql&stack=react” | bash
フォルダに移動してコンテナを起動します。 cd react-app && ./vendor/bin/sail up -d
データベースのテーブルを作成する（マイグレーション） ./vendor/bin/sail artisan migrate
しかし、ポート80が使われているとエラーが出ます。
一旦 sail-exampleに出ます。 sail-exampleでコンテナを起動してしまったので、止めます。
改めて react-appに移動し、 コンテナを停止してから、起動し、マイグレーションを実行します。
./vendor/bin/sail down -v
./vendor/bin/sail up -d
20秒ほど待つ
./vendor/bin/sail artisan migrate
フロントエンド（React）を起動します。
./vendor/bin/sail npm install
./vendor/bin/sail npm run dev
Ctl + C でフロントを一旦停止し、code . でVSを起動します。
VSのターミナルを開きます。
Sail（Docker環境）を経由してBreeze本体をプロジェクトにダウンロードします。
./vendor/bin/sail composer require laravel/breeze –dev
Reactのインストールを実行します。
./vendor/bin/sail artisan breeze:install react
依存関係の競合を無視して強制インストールします。./vendor/bin/sail npm install –legacy-peer-deps
フロントエンド（React）を起動します。
./vendor/bin/sail npm run dev
ブラウザで http://localhost/ 確認すると、 [plugin:vite:import-analysis] Failed to resolve import “./bootstrap” from “resources/js/app.jsx”. Does the file exist?
/var/www/html/resources/js/app.jsx:2:7
1 | import “../css/app.css”;
2 | import “./bootstrap”;
resources/js/ フォルダの直下にbootstrap.jsを作成します。中身を次のようにします。
import axios from ‘axios’;
window.axios = axios;
再度 npm run dev をします。Login Registerリンクが確認できます。実際にユーザー登録して、ログインできることが確認できるかと思います！
パソコンをシャットダウンする前などに、起動しているDockerコンテナを停止します。Ubuntuターミナル（~/react-app）で Ctrl + C を押してViteを止めた後、以下を実行します。
./vendor/bin/sail down
再び開発を始めるときは、Ubuntuターミナル（~/react-app）で以下を実行します。
./vendor/bin/sail up -d
./vendor/bin/sail npm run dev
