フロントエンドの開発時のコンパイルが高速で、Vueと相性がいいらしいので試しに導入して見たメモ。
- docker-compose.ymlのWEBサーバのポートマッピングに 5173:5173 が必要。これはviteが開発中のコードをここから叩いているため。
- CORSの対策でWEBサーバー(Apacheとか)の Header に Access-Control-Allow-Origin “*” を書くか、vite.config.jsに
server: { host: true, hmr: { host: 'hoge.localhost', },},
の追記が必要。
トラブルシューティング
- hostに直でURLを書いてしまうと、vite上でSSLが利いてしまい、
viteにSSLを指定しないと証明書が無いことが原因でブラウザでエラーになってしまう。hmrの記述の方で書く。
https://ja.vitejs.dev/config/server-options.html#server-hmr - また、hmrで書いても https: true してしまうと証明書が無くため上記と同じエラーになってしまう。