Docker上に、Laravel環境を構築する手順は色々な記事がありますが、
下記のサイトが一番きれいにまとまっていると思います。
Docker+Laravel+React+TypeScript構成のフルスタックパッケージを順を追って構築する【前編:サーバーサイド】
https://sagara.ink/article/app/204/
それでも、いくつかの部分では、うまくいかない部分もあり、適宜対応する必要があります。
本記事では、はまったポイントを中心に解説してありますので、ぜひ、参考にしてみてください。
おおまかな流れは、上記の記事の順番で問題ないです。
参考サイトの記事にある GitHub から、構成ファイルを取得して進めていきます。
php
docker-comopse.yml
|
1 2 3 4 5 6 7 8 |
app: container_name: fullstack-app build: ./docker/php ports: - 5173:5173 #vite用のportを定義 volumes: - ./docker/php/php.ini:/usr/local/php/php.ini - ./src:/var/www/html |
docker/php/Dockerfile
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
FROM php:8.1-fpm-alpine #vite の npm run dev 時のポート対応 EXPOSE 5173 # install composer RUN curl -sS https://getcomposer.org/installer | php RUN mv composer.phar /usr/local/bin/composer # install packages RUN apk update # apk add を複数行に分けないと正常にインストールされないためにわけました RUN apk add zip unzip git RUN apk add nodejs npm # install php extensions RUN docker-php-ext-install pdo pdo_mysql |
Docker再起動時にエラーが発生する場合
PHPのDockerコンテナ再起動時に、下記のエラーが発生する場合には、必要なコマンドが不足している可能性があります。
そのため、適宜、zip、unzipなどのコマンドを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
- Installing sebastian/comparator (5.0.0): Extracting archive - Installing sebastian/code-unit (2.0.0): Extracting archive - Installing sebastian/cli-parser (2.0.0): Extracting archive - Installing phpunit/php-timer (6.0.0): Extracting archive - Installing phpunit/php-text-template (3.0.0): Extracting archive - Installing phpunit/php-invoker (4.0.0): Extracting archive - Installing phpunit/php-file-iterator (4.0.1): Extracting archive - Installing theseer/tokenizer (1.2.1): Extracting archive - Installing sebastian/lines-of-code (2.0.0): Extracting archive - Installing sebastian/complexity (3.0.0): Extracting archive - Installing sebastian/code-unit-reverse-lookup (3.0.0): Extracting archive - Installing phpunit/php-code-coverage (10.0.2): Extracting archive - Installing phar-io/version (3.2.1): Extracting archive - Installing phar-io/manifest (2.0.3): Extracting archive - Installing myclabs/deep-copy (1.11.0): Extracting archive - Installing phpunit/phpunit (10.0.14): Extracting archive - Installing spatie/backtrace (1.4.0): Extracting archive - Installing spatie/flare-client-php (1.3.5): Extracting archive - Installing spatie/ignition (1.4.5): Extracting archive - Installing spatie/laravel-ignition (2.0.0): Extracting archive Install of symfony/polyfill-mbstring failed 9/105 [==>-------------------------] 8% Install of psr/http-message failed Install of psr/http-factory failed 11/105 [==>-------------------------] 10% Install of symfony/polyfill-php80 failed 20/105 [=====>----------------------] 19% Install of symfony/polyfill-uuid failed 33/105 [========>-------------------] 31% Install of psr/event-dispatcher failed Install of psr/log failed 105/105 [============================] 100% In ZipDownloader.php line 184: Failed to extract symfony/polyfill-mbstring: (1) '/usr/bin/unzip' -qq '/var/www/html/vendor/composer/tmp-934ac12efe524423a4e0c03e950edab6' -d '/var/www/html/vendor/composer/50130728' unzip: short read |
Viteの設定変更
参考サイトでは、LaravelMixを利用する手順となっていますが、今回は Laravel10に標準でインストールされている vite を利用していきます。
src/vite.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import react from '@vitejs/plugin-react'; export default defineConfig({ server: { host: true, hmr: { host: 'localhost' }, watch: { usePolling: true } }, plugins: [ laravel({ input: 'resources/js/app.jsx', ssr: 'resources/js/ssr.jsx', refresh: true, }), react(), ], }); |
注意点としては、 server項目のhostをtrueに設定する部分です。
この設定をしていないと、ローカルからアクセスすることができません。
詳細については、公式サイトを参照してください。
JavaScriptのコンパイル
appコンテナ上で、下記のコマンドを実行して、開発モードで確認していきます。
|
1 |
npm run dev |
また、ソースファイルを修正した場合のhot reloadについては、下記の設定が必要となります。
|
1 2 3 |
watch: { usePolling: true } |
TypeScript
TypeScriptの動作確認については、下記のサイトが非常に参考になります。
Laravelに新しく導入されたフロントビルドツール「Vite」でTypeScript+React開発環境を構築する方法
https://www.webopixel.net/php/1793.html
テスト
テスト用に、ログイン機能の準備をして確認します。
下記のコマンドを実行して、User用のSeeder雛形を作成します。
|
1 |
$ php artisan make:seed UserSeeder |
database/seeders/UserSeeder.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php namespace Database\Seeders; use App\Models\User; use Illuminate\Database\Console\Seeds\WithoutModelEvents; use Illuminate\Database\Seeder; class UserSeeder extends Seeder { /** * Run the database seeds. */ public function run(): void { User::create([ 'name' => 'hoge', 'email' => 'hoge@test.com', 'password' => bcrypt('password') ]); } } |
seederの実行
Seederファイルは作成しただけでは実行されませんので、DatabaseSeeder.phpへ登録します。
database/seeders/DatabaseSeeder.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php namespace Database\Seeders; // use Illuminate\Database\Console\Seeds\WithoutModelEvents; use Illuminate\Database\Seeder; class DatabaseSeeder extends Seeder { /** * Seed the application's database. */ public function run(): void { // \App\Models\User::factory(10)->create(); // \App\Models\User::factory()->create([ // 'name' => 'Test User', // 'email' => 'test@example.com', // ]); $this->call(UserSeeder::class); } } |
データベースの初期化を実行します。
|
1 |
$ php artisan migrate:fresh --seed |
画面右上のLogInから、ログイン画面に移動して、テストユーザーでログインできれば成功です。
Laravelはバージョンアップの頻度が高く、対応が大変ですが、便利になっている部分が多いので、
積極的にバージョンアップをしてキャッチアップしていくと良いと思います。
参考サイト
Docker+Laravel+React+TypeScript構成のフルスタックパッケージを順を追って構築する【前編:サーバーサイド】
https://sagara.ink/article/app/204/
Laravel 10 と Vue 3 の開発環境を Docker で構築する
https://qiita.com/yutotakakura/items/d1cc909897ac8277baea
Laravelに新しく導入されたフロントビルドツール「Vite」でTypeScript+React開発環境を構築する方法
https://www.webopixel.net/php/1793.html
