今回、Larael9を導入するにあたってのnode設定でつまづいたところがあったので、そちらを解消した方法。
今回のつまづきポイントは、nodeのvite設定である。
こちらをちゃんと設定をしないと、リアルタイムのjavascriptのチェックがうまくいかず、
毎回、node環境で、npm run buildコマンドを叩かなければならなくなってしまう。
今回のlaravel9に入っているviteだが、こちらは本来、npm run devコマンドを叩いていれば自動的に状態が反映されるものなのである。
設定がうまくできていないと、毎回nodeのdevコマンドを停止したりしなければ反映されなくなってしまう。
docker-composeのnodeは以下のような設定にしました。
node:
image: node:lts-alpine
environment:
IP: ${IP}
ports:
- ${IP}:5173:5173
volumes:
- ./src:/app
working_dir: /app
command: sh -c "npm i && npm run dev"
profiles: ["dev"]ここでのポイントは、ports。5173を外部から接続できるように開放をしてあげます。
また、nodeコンテナのONとOFFができるように、profilesを設定しています。docker-compose up -dでnodeコンテナは立ち上がらずに、docker-compose --profile dev up -dとすることで、nodeコンテナが立ち上がるようになります。
別に、profilesは設定しなくとも、docker-compose stopで止めるでも良いとは思います。
${IP}は.envファイルより環境変数として読み込ませているだけなので、直接IPアドレスを指定でも、良いです。
environmentでIP情報を渡しておくことにより、localhost以外でも開発ができるようになります。
vite.config.jsファイルがありますのでそちらの設定を変更します。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
server: {
host: true,
hmr: {
host: process.env.IP
},
},
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});serverの部分が増えています。
こうすることで、うまく接続できておらず、「このページは動作していません」となっていた問題が解消されます。process.env.IPはdocker-composeファイルで指定したenvironmentの情報を呼び出しています。
このserverの中のhostをtrueとすることで、サーバーの表示ができるようになり、hmr内のhostを指定することで、呼び出されるドメインを決め打つことができます。表示するサイトがlocalhostというURLを利用しているのであればここに、直接localhostと打ち込んでも良いです。
あとは、出力先です、例えばbladeファイルは以下のような感じになります。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Vite React</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app"></div>
</body>
</html>この@viteで指定したものが呼び出されます。
nodeコンテナが停止している場合は、buildされたデータが表示されるようになり、稼働している場合は、nodeが立ち上げているサーバーのデータが指定されるようになります。
なお、laravel側は、publicにhotというURLが保存されたファイルがあるか無いかで開発モードかどうかを判断しているようです。
コメント