したいこと
以下の環境を構築したい。
- Docker
- Laravel 9
- vite
- tailwindcss
- ＋ページネーション
- ＋ホットリロード
Dockerでの設定
"docker-compose.yml"のappサーバーの設定
5173番ポートを解放
例）
docker-compose.yml
services:
app:
ports:
- 5173:5173
appサーバーの"Dockerfile"の設定
5173番ポートを解放
例）
Dockerfile
FROM php:8.3-fpm-bullseye AS base
EXPOSE 5173
Dockerコンテナビルド
$ docker compose build --no-cache
Dockerコンテナ起動
$ docker compose up -d
Laravel・viteインストール
お好きなバージョンでインストールしてくだい
npm install
Laravelプロジェクト内に移動して
$ npm install
tailwindcssインストール
$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p
Laravelにtailwindのページネーションテンプレートをインストール
$ php artisan vendor:publish --tag=laravel-pagination
Laravelプロジェクトでの設定
"tailwind.config.js"の設定
contentセクションに以下を追加
tailwind.config.js
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
],
./resources/css/app.cssの設定
以下を追記
app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
bladeテンプレートの設定
headタグ内に以下を追記
例）
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
@vite('resources/css/app.css')
@vite('resources/js/app.js')
</head>
...
"vite.config.js"の設定
以下を追加
vite.config.js
server: {
host: true,
hmr: {
host: 'localhost'
},
watch: {
usePolling: true
}
}
Vite開発用サーバの起動
$ npm run dev
ブラウザでの確認
ブラウザでページを表示して、bladeファイルなどのどこかを編集してみてください。
自動で内容が更新されたら成功です。