Nuxt.js 開発サーバーでのSSEがランダムポートになって困ってた
説明しよう！
- Nuxt.js で開発やってると開発サーバーを使うでしょ？
- プログラム修正したら自動的にビルドしてくれて素敵！
- そして画面を自動リロードしてくれて親切！
なんです。
ところで、Nuxt Screens Module(https://github.com/nuxt/screens)がローディング表示のためにSSE(Server-Sent Events)を使ってまして、最近、使用するポートがランダムになりました。
この変更は開発中のパフォーマンス問題への対策らしいです。良いことです。
しかし特定ポートをフォーワードして開発している人なんかは困ったことになります。
僕とか。
Nuxt.jsのdevでのsseがランダムなポート使うようになってるようなんだけど情報が見当たらない。
ポートフォワードしてるので困る。
— murave (@murave) June 19, 2020
とあるプロジェクトで
[Firebase] Cloud Functionsで消耗したくない人のために、開発環境のベストプラクティスをまとめていったらDockerに行き着いた話（随時更新）
https://qiita.com/pannpers/items/244a7e3c18d8c8422e4f
を参考にDockerベースで開発環境をつくってまして、必要なポートをフォワードしてゴニョゴニョやってるのでSSEのポートをフォワードしてないと
というふうにコンソールにエラーが出続けることになります。文字起こししときましょう。
GET http://localhost:45377/sse net::ERR_CONNECTION_REFUSED
このときのポートは45377ですが、ランダムに変わります(頻繁に、ではないですが)
つらい。
固定ならフォワーディングを増やせばいいだけなのですがランダムはつらい。
範囲指定でのフォワーディングも試しましたがリソース不足でコンテナが死んだりで断念。
本質的じゃないところでひっかかって半日を費やしたのちにメモを残して諦めることにしたのだった
— murave (@murave) June 19, 2020
と敗北宣言したのですが、時間ができたので再調査したところ同じ目にあってる方(JasonCubicさん)を発見しました。
https://github.com/nuxt/nuxt.js/pull/7286#issuecomment-646853851
I am running nuxt dev in a docker container because I have a driver that needs some special setup. Using this different port spams cors errors into my console. How can I disable this?
ですよねー。そしてこの方、自己解決されたようです。
Update: If anyone else is trying to turn off the loading screen its in nuxt.config.js build.loadingScreen: false
なるほど。loadingScreen自体を無効化したのか。
自動リロードしてくれても変更が反映されないことがたまにあって手動リロード癖がついてるし、いい気がする(敗北感はあるけど)
nuxt.config.jsから抜粋
module.exports = {
// 略
build: {
// 略
loadingScreen: false
}
}
こうするとエラー表示はでなくなりました。そして画面の自動リロード自体は動きました。
本当にローディング表示のためだけだったのね。自動リロードにも影響すると思ってた。
ローディング表示、なくてもこまらないので無効化でOK。
タグ: Nuxt.js
