話題の Carlo で何か作ってみようと思い、Vue CLI で作ったプロジェクトの開発モードと組み合わせようとして、環境設定に少しつまづいたのでメモ。
Carlo設定
// Tell carlo where your web files are located.
app.serveOrigin('https://localhost:8080')
これにより localhost の内容が Carlo で表示されるようになります。
※開発中は上記の設定で、ビルド後は app.serveFolder(__dirname)
等を使用するよう、環境変数などで分岐を入れることになると思います。
webpack-dev-server設定
module.exports = {
devServer: {
disableHostCheck: true,
headers: {
'Access-Control-Allow-Origin': 'https://domain'
},
host: 'localhost',
https: true
}
}
今回 Vue CLI なのでこのファイル名ですが、他の場合も webpack.config.js
に同様の設定を追加すれば動くと思います。
経緯
最初、デフォルト設定の http://localhost:8080
を Carlo で読み込むように設定して起動したら画面が真っ白になっていて、 DevTools を開いたらJS等が読み込めていませんでした。
コンソールで location を調べると、 https://domain/index.html
となっていたので、とりあえず HTTPS に変更してみたところ、画面は表示されましたがHMR部分でエラーが出ました。
あとはエラー内容をググりながら、 host → disableHostCheck → headers の順に追加したところで、ようやく HMR が動くようになりました。
おまけ
Carlo を立ち上げたときに Chrome DevTools も開く設定。(Chrome の起動オプションです。上記の Carlo の設定同様、開発モードのみ有効になるように調整する必要がありますね)
const app = await carlo.launch({
args: ['--auto-open-devtools-for-tabs']
})
また、localhost を HTTP 化した後に、「この接続はプライバシーが保護されません」という Chrome の警告画面が出るようになり、毎回許可するのが面倒だったので、上記 args に --allow-insecure-localhost
を入れていたのですが、いま試しにはずしたら警告は表示されなくなっていた……。devServer の設定を https だけに戻しても警告は出ないので、一度設定したら出なくなるのかも?