【Docker】【260607】#2 Laravel開発環境構築ファイル作成 & 起動

Laravel13_sample
├─ docker
│  ├─ mysql
│  │  └─ my.cnf
│  ├─ nginx
│  │  └─ default.conf
│  └─ php
│     ├─ Dockerfile
│     └─ php.ini
├─ src
├─ docker-compose.yml

※srcにLaravelが入る
※Docker環境の var/www 内に丸ごとこれを格納し開発を進める
(.gitがここのあるのでDocker、Laravel丸ごと状態管理するため)

localhost

http://localhost:8080/

開発環境構築ファイル作成

ymlファイルを作成

Docker全体の設定管理ファイル

Laravel13_sample\docker-compose.yml

https://github.com/tm-qc/laravel13-docker-sample/blob/main/docker-compose.yml

PHP Dockerファイル作成

docker\php\Dockerfile

https://github.com/tm-qc/laravel13-docker-sample/blob/main/docker/php/Dockerfile

nginx設定ファイル

docker\nginx\default.conf

https://github.com/tm-qc/laravel13-docker-sample/blob/main/docker/nginx/default.conf

おまけファイル

以下のファイルは今後設定したいときに使う。
今は記載なしです。

MySQL設定：docker\mysql\my.cnf
PHP設定：docker\php\php.ini

Laravelインストール

一旦コンテナビルド
docker compose build

src配下にLaravel生成
docker compose run --rm app composer create-project laravel/laravel:13.14.0 /var/www

※時間かかるので完了まで待つ

起動

一旦ここではDockerでlocalhostが開き、LaravelのTOPページが開くかの確認になります。

作業フォルダに移動

cd "docker-compose.ymlがあるフォルダのパス"

Docker Desktopを起動

PCでアプリ起動

コンテナ起動

docker compose up -d

下段の「初回起動時のみの作業」を行ったことがない場合は「docker compose up」の後に作業してください

表示確認

http://localhost:8080

コンテナ終了

docker compose down

初回起動時のみの作業

コンテナ起動後に以下を行う

Laravel の APP_KEY作成(アプリケーション全体の秘密鍵)

コンテナ内でコマンドプロンプト起動

docker compose exec app bash

※今回はPHPのDockerfileの作業フォルダ「/var/www」= appなのでそこで起動になる
※ymlの「working_dir: /var/www」も同じ設定になってる

APP_KEY作成

php artisan key:generate

※「Application key set successfully」が出れば成功

ここで今回はエラーになりました

「ls -la」でフォルダ構造確認し Laravel がなければ、PC の src フォルダを削除して空にし、 bashじゃなくPowerShellでLaravelをインストールし直してください。

インストールし直してコンテナ内にLaravelがあれば成功です。

※Git Bashのパス変換バグで「C:」とかになるときがあるらしいのでPowerShellで対応します。

docker compose exec app bash

LaravelにDB接続設定

.env

※開発用
※docker-compose.ymlの設定に合わせる

DB_CONNECTION=mysql

DB_HOST=db
DB_PORT=3306

DB_DATABASE=laravel
DB_USERNAME=laravel
DB_PASSWORD=password

マイグレーション

php artisan migrate

※コンテナ内のコマンドプロントで行う

普段の開発時のVS CODEでのPJの開き方

VS CODEでローカルPC（自分のPC環境）のフォルダを開くのではなく、Dockerコンテナを立ち上げて、その環境のVS CODEでファイルを参照し、修正するようにしたほうが良いです。　　

フォルダから参照してる場合

PHPがコンテナ内で動いてる
ローカルPCはPHP自体はなくファイルがあるだけ

という状態のため、VS CODEの拡張機能が動かなかったりして不便なことが起きます。

最初はコンテナ内とローカルPC内の違いがしっくりこないかもしれませんが、

Dockerのコンテナ内にPHP環境作ってる
自分のPC内でPHPにはないから拡張機能が動かない
双方は別の世界

と一旦思っておくくらいが良いです。

WSL2のUbuntu内にPJファイルを置いてる場合は、拡張機能 WSLを使って、Dev Containersを使わず

code .

でも開けますが、結局PHPがなく拡張機能が動かないので、Dev Containersで開くようにしています。

VS CODE の拡張機能 Dev Containersがある確認

無ければインストール

コンテナ起動

docker compose up -d

WSL2のUbuntu内にPJファイルを置いてる場合は、Ubuntu(WSL) というターミナルをVS CODEで開いて実行してください。

通常のターミナルで起動すると、Ubuntu内のPJファイルじゃなく、結局Windows内のファイルを見ることになるので、読み込みが早くなる恩恵がなくなります。

【Docker】【260606】#4 Laravelの初回起動、F5更新が遅い場合はWSLのUbuntu内にファイルを置く

VS CODE左下 >< 見たいなアイコンをクリック

「実行中のコンテナにアタッチ」を選択

いくつか表示されるので Laravel のサービスを選択

今回は laravel_app しています。
VS CODEがもう一個起動します。

ワークスペースで作業フォルダを開く

今回は /var/www 内にGit管理されてるPJがあるのでそれを開きます。

これで作業環境の立ち上げはOKです。

補足ですが、ローカルにしかない拡張機能は画像のように、「コンテナ・・・」という青いボタンがあるので、このボタンを押して再インストールしてください。
コンテナ内の環境の VS CODE なので、再インストールが必要です。

PHPデバッグ

XdebugはDockerでインストール済みです。
以下の設定を追加すれば、VS CODEでブレイクポイントなどが使えるようになります。

vs codeのプラグイン「PHP Debug」をインストール

VS CodeのXdebug設定ファイルを作成

/.vscode/launch.json

https://github.com/tm-qc/laravel13-docker-sample/blob/main/.vscode/launch.json

Xdebugの設定ファイルを作成

/docker/php/xdebug.ini

https://github.com/tm-qc/laravel13-docker-sample/blob/main/docker/php/xdebug.ini

Windows環境の改行コード対応

今回はPJ直下にdocker系のファイル、src配下にLaravelファイルがありました。

コンテナで開いたタイミングでdocker系のファイルに予期せぬ改行コードの変換更新が入ることがあったので以下の対応を行いました。

【Docker】【260607】#3 Laravel開発 Windows環境の改行コードの対応

補足

バージョン確認方法

環境構築後の確認方法

コンテナ起動

docker compose up -d

nginxバージョン確認

docker-compose exec nginx nginx -v

PHPバージョン確認

docker-compose exec app php -v

Composerバージョン確認

docker-compose exec app composer -v

インストール済の拡張機能の一覧

docker-compose exec app php -m

Laravelのバージョン確認

docker compose exec app php artisan -v

DB GUIツール

私はDBeaverを使っています。
今回の設定はポートが3307なので、ツールの接続設定で3307を指定すればつながります。

※3306がデフォなので、3306で問題ない方は書き換えて使っていただいても大丈夫です。
今回は私がローカルで3306を使っていたので、3307に変更しただけです。

※MySQL 8で「Public Key Retrieval is not allowed」でつながらないときは、「ドライバのプロパティ」で「allowPublicKeyRetrieval = true」に設定します。
（セキュリティ強化の影響で開発環境なら true でOK）
（本番環境だとSSL/TLSを使うので、そもそもallowPublicKeyRetrievalを使わないことが多い）

ホットリロード

ホットリロードはLaravel / PHP は入っていない。
入れ方もすこし複雑 + フロントしかからないのでF5で更新することも普通とのこと。

ASP.NET COREでは特に意識せずフロント、バックでホットリロード入っていたが、
言語の性質上このような仕様になってるとのこと

今回はReactなどまだ使わずにBlade想定なので、ホットリロードは保留とする。

C#はコンパイル言語

更新監視、再コンパイル・再起動でコード自体更新される

PHPはスクリプト言語

コードがそのまま実行されるだけでコンパイルじゃないので、バックはF5更新が必要。
フロントは設定して、Vue/Reactなど両方ともNode.js(Vite)でホットリロードを使うことになる

コンテナとローカルのVS CODEの色を変える

コンテナ、ローカルと双方でVS CODE開いたときに、どっちかわかりにくいので、色を設定します。

コンテナ内のVS CODEで以下を行う。

Ctrl + Shift + P で設定を開く

Preferences: Open Remote Settings を開く

settings.jsonにカラー設定を追加する

一番下のステータスバーの背景色
一番下のステータスバーの文字色
一番上のタイトルバーの背景色
一番上のタイトルバーの文字色


{
  	"workbench.colorCustomizations": {
		"statusBar.background": "#1B5E20",
		"statusBar.foreground": "#FFFFFF",
		"titleBar.activeBackground": "#1B5E20",
		"titleBar.activeForeground": "#FFFFFF"
	}
}

※好きな色でOK

Laravelの初回起動、F5更新が遅い場合

【Docker】【260606】#4 Laravelの初回起動、F5更新が遅い場合はWSLのUbuntu内にファイルを置く

さいごに

Laravelの開発ができるようになりました。本番のインフラをできるようになりたい・・。