株式会社NextCode
2023/03/05
Laravel9 Vueを使用しないViteの導入
Laravel9にViteの導入をしてみました。
Viteを使用する際にVueやReactを使用したパターンがほとんどだと思いますが、それらを使わずにViteを導入する方法になります。
ちなみに、Dockerを使用した方法になります。
前提として、Laravel9をインストールしている状態です。
Laravel9はデフォルトでMixからViteになっていると思いますので、「vite.config.js」がある事を確認して下さい。
Dockerを使用する
コンテナのポートを許可
Dockerを使用している場合、「5173」ポートを許可する必要があります。
この時の注意点として、apache・nginxとphpのコンテナを別々で使用している場合、nodeが入っているコンテナで「5173」ポートを許可してください。
【docker-compose.yamlの例】
version: '3'
services:
nginx:
image: nginx:1.20-alpine
ports:
- "80:80"
links:
- php
volumes:
- ./:/var/www/html
php:
image: php:8.1-fpm
links:
- mysql
ports:
- "8080:80"
- "5173:5173" # ←この行を追加
volumes:
- ./:/var/www/html
working_dir: /var/www/html
mysql:
image: mysql:8
ports:
- "43306:3306"
volumes:
- datastore:/var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: test
MYSQL_USER: test
MYSQL_PASSWORD: password
command: --default-authentication-plugin=mysql_native_password
Bladeにviteコンポーネントの記述
次の様にviteコンポーネントを記述します。
<head>
...etc
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
起動
あとはコンテナで次の様にコマンドを叩いて、インストールと起動をしておくだけ！
npm install
npm run dev
resources/css/app.cssまたはresources/js/app.jsを編集すると、リアルタイムですぐに変更が反映されます。
以上になります。
別記事として、「ViteでSCSSを使う方法」「Viteで静的ファイルをコピーする方法」があるので、気になる方はどうぞ。
