Docker ベースの Vue プロジェクトでのホットリロード

Question

こんにちは、vue プロジェクトに問題があります。

Docker にフロントエンド バックエンドとバックエンド データベースがあります。

これは vue.config.js 構成です:

module.exports =defineConfig({
  configureWebpack: {
    エントリ: "./src/main.js"、
    開発サーバー: {
      ホット: 本当、
    }、
    時計：本当、
    watchOptions: {
        無視: /node_modules/,
        投票: 500、
    }、
}、
  transpileDependency: true
})

コンテナは、作成プロセス中に npm および package.json で指定されたパッケージを単独でインストールします。

{
  "名前": "フロントエンド"、
  「バージョン」: 「0.1.0」、
  「プライベート」: true、
  「スクリプト」: {
    "serve": "vue-cli-serviceserve",
    "ビルド": "vue-cli-service ビルド",
    "lint": "vue-cli-service lint"
  }、
  「依存関係」: {
    "@morioh/v-smooth-scrollbar": "^1.0.3",
    "@vuepic/vue-datepicker": "^4.2.0",
    "@vueuse/core": "^9.13.0",
    "ajax": "^0.0.4",
    "axios": "^1.3.3",
    "core-js": "^3.8.3"、
    "ミット": "^3.0.0",
    "サービスワーカーの登録": "^1.7.2",
    "smoothscroll-polyfill": "^0.4.4",
    "vue": "^3.2.13",
    "vue-axios": "^3.5.2",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  }、
  "開発依存関係": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue-leaflet/vue-leaflet": "^0.8.4",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "リーフレット": "^1.9.3",
    "サス": "^1.32.7"、
    "sass-loader": "^12.0.0",
    "タイプスクリプト": "~4.5.5"
  }、
  "eslintConfig": {
    「ルート」: true、
    "環境": {
      "ノード": true
    }、
    「拡張する」: [
      "プラグイン:vue/vue3-essential"、
      "eslint: 推奨"、
      「@vue/typescript/推奨」
    ]、
    "parserOptions": {
      「ecmaバージョン」: 2020
    }、
    「ルール」: {}
  }、
  "ブラウザリスト": [
    "" 1%」、
    「最後の 2 つのバージョン」、
    「死んではいない」、
    「ie 11 ではありません」
  】
}

私はすべてのコンテンツを配布しました、これは不会造による混乱:)

昨日までは全く正常だと思われていましたが、今日容器を再起動した後、表面の熱再投入オプションが動作を停止しました。

当容器作動時、以下の出力に達しました：

フロントエンド |アプリは次の場所で実行されています:
フロントエンド | - ローカル: http://localhost:8080/
フロントエンド | - ネットワーク: http://172.26.0.4:8080/
フロントエンド |
問題は見つかりませんでした。

http://localhost:8080 を使用してブラウザを起動すると、ページが追加されますが、更新された時点での再追加オプションが動作を停止しました。

コンソールでは、ブラウザがアップデートをダウンロードしようとしていますが、応答が得られていないことがわかります

「ws://172.26.0.4:8080/ws」への WebSocket 接続が失敗しました:
WebSocketClient @WebSocketClient.js?5586:16
initSocket@socket.js?d6e0:24
eval@socket.js?d6e0:48

コンテナを一から配置してみました。

古いバージョンの kyod を使用していますが、このオプションを書いた後もまだ機能しません

ページを手動で更新すると、コンテンツは正しく変更されます。

何が問題かわかりますか

また、他のコンピュータでも正常に動作します。

彼らは私より後にプロジェクト全体をコンパイルしたので、それがいくつかのノードモジュールに依存している場合、それも機能しません。 とにかく、私はここ 2 日間、自分でコンテナーを最初から作成しようとしてきました。そのため、node_modules はどれも古くなっていません。 つい 1 日前には動作していたので、問題は設定にありません。 それとも、私のコンピューター上に、ws://172.26.0.4:8080/ws

へのトラフィックをブロックしている可能性のある何かがあるのでしょうか。

また、他のブラウザでも同様に見えます。

現在、仮想マシンをセットアップして確認していますが、まだこのような状態ですが、他に何を確認できるかについての提案をぜひ聞きたいです。

早々にお問い合わせいただきありがとうございます。またお会いできるのを楽しみにしています。

Answer 1

＃＃＃その他の情報：＃＃＃

これは私のコンテナチェックです:

リーリー

]