user icon

Nuxt.js 開発サーバーでのSSEがランダムポートになって困ってた

説明しよう!

  • Nuxt.js で開発やってると開発サーバーを使うでしょ?
  • プログラム修正したら自動的にビルドしてくれて素敵!
  • そして画面を自動リロードしてくれて親切!

なんです。

ところで、Nuxt Screens Module(https://github.com/nuxt/screens)がローディング表示のためにSSE(Server-Sent Events)を使ってまして、最近、使用するポートがランダムになりました。

この変更は開発中のパフォーマンス問題への対策らしいです。良いことです。
しかし特定ポートをフォーワードして開発している人なんかは困ったことになります。
僕とか。

とあるプロジェクトで

[Firebase] Cloud Functionsで消耗したくない人のために、開発環境のベストプラクティスをまとめていったらDockerに行き着いた話(随時更新)
https://qiita.com/pannpers/items/244a7e3c18d8c8422e4f

を参考にDockerベースで開発環境をつくってまして、必要なポートをフォワードしてゴニョゴニョやってるのでSSEのポートをフォワードしてないと

というふうにコンソールにエラーが出続けることになります。文字起こししときましょう。

GET http://localhost:45377/sse net::ERR_CONNECTION_REFUSED

このときのポートは45377ですが、ランダムに変わります(頻繁に、ではないですが)

つらい。

固定ならフォワーディングを増やせばいいだけなのですがランダムはつらい。
範囲指定でのフォワーディングも試しましたがリソース不足でコンテナが死んだりで断念。

と敗北宣言したのですが、時間ができたので再調査したところ同じ目にあってる方(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。

Facebooktwitterlinkedintumblrmail

タグ:

名前
E-mail
URL
コメント

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)