Hot-Neuladen in Docker-basierten Vue-Projekten

Question

Hallo, ich habe ein Problem mit meinem Vue-Projekt.

Ich habe ein Frontend-Backend und eine Backend-Datenbank in Docker.

这是 vue.config.js Seite:

module.exports = defineConfig({
  configureWebpack: {
    Eintrag: "./src/main.js",
    devServer: {
      heiß: wahr,
    },
    Uhr: wahr,
    watchOptions: {
        ignoriert: /node_modules/,
        Umfrage: 500,
    },
},
  transpileDependencies: true
})

容器在创建过程中会自行安装 npm und package.json 中给出的包:

{
  "Name": "Frontend",
  „Version“: „0.1.0“,
  "privat": wahr,
  "Skripte": {
    "serve": "vue-cli-service dienen",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "Abhängigkeiten": {
    "@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",
    "Handschuh": "^3.0.0",
    "register-service-worker": "^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"
  },
  "devDependencies": {
    "@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",
    "Broschüre": "^1.9.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "Typoskript": "~4.5.5"
  },
  "eslintConfig": {
    "root": wahr,
    "env": {
      "Knoten": wahr
    },
    "erweitert": [
      "plugin:vue/vue3-essential",
      "eslint:empfohlen",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      „ecmaVersion“: 2020
    },
    "Regeln": {}
  },
  "Browserliste": [
    "> 1%“,
    "letzte 2 Versionen",
    „nicht tot“,
    "nicht z. B. 11"
  ]
}

我发布了所有内容，这样就不会造成混乱:)

工作。

当容器启动时,我得到以下输出:

frontend |   App läuft unter:
Frontend |   - Lokal: http://localhost:8080/
Frontend |   - Netzwerk: http://172.26.0.4:8080/
Frontend |
Keine Probleme gefunden.

当我使用 http://localhost:8080已停止工作.

In der Konsole kann ich sehen, dass der Browser versucht, Updates herunterzuladen, aber keine Antwort erhält

WebSocket-Verbindung zu „ws://172.26.0.4:8080/ws“ ist fehlgeschlagen:
WebSocketClient @WebSocketClient.js?5586:16
initSocket@socket.js?d6e0:24
eval @ socket.js?d6e0:48

Ich habe versucht, den Container von Grund auf zu platzieren.

Ich verwende eine ältere Version von Kyod und nach dem Schreiben funktioniert diese Option immer noch nicht

Wenn ich die Seite manuell aktualisiere, ändert sich der Inhalt korrekt.

Wissen Sie, wo das Problem liegt?

Auch auf anderen Computern funktioniert es einwandfrei.

Sie haben das gesamte Projekt später als ich kompiliert. Wenn es also von einigen Knotenmodulen abhängt, funktioniert es auch nicht. Wie dem auch sei, ich versuche seit zwei Tagen, den Container selbst von Grund auf zu erstellen, daher ist keines der node_modules veraltet. Das Problem liegt nicht in der Konfiguration, da sie noch vor einem Tag funktionierte. Oder gibt es etwas auf meinem Computer, das möglicherweise den Datenverkehr zu ws://172.26.0.4:8080/ws

blockiert?

Außerdem sieht es in anderen Browsern genauso aus.

Ich richte gerade eine virtuelle Maschine zur Überprüfung ein und sie sieht immer noch so aus, würde aber gerne Vorschläge hören, was ich sonst noch überprüfen könnte.

Vielen Dank für Ihre frühzeitige Interaktion und wir freuen uns auf Ihren Besuch!

Answer 1

其他信息：

这是我的容器检查：

[
{
    "Id": "625967de365da0d8b22436d525c8b355a6388b171cbb6065a58b8dce5cf6308e",
    "Created": "2023-04-09T13:30:45.128344216Z",
    "Path": "docker-entrypoint.sh",
    "Args": [
        "npm",
        "run",
        "serve"
    ],
    "State": {
        "Status": "running",
        "Running": true,
        "Paused": false,
        "Restarting": false,
        "OOMKilled": false,
        "Dead": false,
        "Pid": 6155,
        "ExitCode": 0,
        "Error": "",
        "StartedAt": "2023-04-09T13:30:55.597778809Z",
        "FinishedAt": "0001-01-01T00:00:00Z"
    },
    "Image": "sha256:17aa7ddc26c8faa172749252f89ac6e67e53cf104c9aade0ce8f866fd378405e",
    "ResolvConfPath": "/var/lib/docker/containers/625967de365da0d8b22436d525c8b355a6388b171cbb6065a58b8dce5cf6308e/resolv.conf",
    "HostnamePath": "/var/lib/docker/containers/625967de365da0d8b22436d525c8b355a6388b171cbb6065a58b8dce5cf6308e/hostname",
    "HostsPath": "/var/lib/docker/containers/625967de365da0d8b22436d525c8b355a6388b171cbb6065a58b8dce5cf6308e/hosts",
    "LogPath": "/var/lib/docker/containers/625967de365da0d8b22436d525c8b355a6388b171cbb6065a58b8dce5cf6308e/625967de365da0d8b22436d525c8b355a6388b171cbb6065a58b8dce5cf6308e-json.log",
    "Name": "/frontend",
    "RestartCount": 0,
    "Driver": "overlay2",
    "Platform": "linux",
    "MountLabel": "",
    "ProcessLabel": "",
    "AppArmorProfile": "",
    "ExecIDs": null,
    "HostConfig": {
        "Binds": [
            "C:\\Users\\kubak\\Documents\\GitHub\\yourcar24\\frontend:/app:rw"
        ],
        "ContainerIDFile": "",
        "LogConfig": {
            "Type": "json-file",
            "Config": {}
        },
        "NetworkMode": "yourcar24_default",
        "PortBindings": {
            "8080/tcp": [
                {
                    "HostIp": "",
                    "HostPort": "8080"
                }
            ]
        },
        "RestartPolicy": {
            "Name": "",
            "MaximumRetryCount": 0
        },
        "AutoRemove": false,
        "VolumeDriver": "",
        "VolumesFrom": null,
        "CapAdd": null,
        "CapDrop": null,
        "CgroupnsMode": "private",
        "Dns": null,
        "DnsOptions": null,
        "DnsSearch": null,
        "ExtraHosts": [],
        "GroupAdd": null,
        "IpcMode": "private",
        "Cgroup": "",
        "Links": null,
        "OomScoreAdj": 0,
        "PidMode": "",
        "Privileged": false,
        "PublishAllPorts": false,
        "ReadonlyRootfs": false,
        "SecurityOpt": null,
        "UTSMode": "",
        "UsernsMode": "",
        "ShmSize": 67108864,
        "Runtime": "runc",
        "ConsoleSize": [
            0,
            0
        ],
        "Isolation": "",
        "CpuShares": 0,
        "Memory": 0,
        "NanoCpus": 0,
        "CgroupParent": "",
        "BlkioWeight": 0,
        "BlkioWeightDevice": null,
        "BlkioDeviceReadBps": null,
        "BlkioDeviceWriteBps": null,
        "BlkioDeviceReadIOps": null,
        "BlkioDeviceWriteIOps": null,
        "CpuPeriod": 0,
        "CpuQuota": 0,
        "CpuRealtimePeriod": 0,
        "CpuRealtimeRuntime": 0,
        "CpusetCpus": "",
        "CpusetMems": "",
        "Devices": null,
        "DeviceCgroupRules": null,
        "DeviceRequests": null,
        "KernelMemory": 0,
        "KernelMemoryTCP": 0,
        "MemoryReservation": 0,
        "MemorySwap": 0,
        "MemorySwappiness": null,
        "OomKillDisable": null,
        "PidsLimit": null,
        "Ulimits": null,
        "CpuCount": 0,
        "CpuPercent": 0,
        "IOMaximumIOps": 0,
        "IOMaximumBandwidth": 0,
        "Mounts": [
            {
                "Type": "volume",
                "Target": "/app/node_modules",
                "VolumeOptions": {}
            }
        ],
        "MaskedPaths": [
            "/proc/asound",
            "/proc/acpi",
            "/proc/kcore",
            "/proc/keys",
            "/proc/latency_stats",
            "/proc/timer_list",
            "/proc/timer_stats",
            "/proc/sched_debug",
            "/proc/scsi",
            "/sys/firmware"
        ],
        "ReadonlyPaths": [
            "/proc/bus",
            "/proc/fs",
            "/proc/irq",
            "/proc/sys",
            "/proc/sysrq-trigger"
        ]
    },
    "GraphDriver": {
        "Data": {
            "LowerDir": "/var/lib/docker/overlay2/6673870013c91f39037354420092aa515c9d5cef85f23ebd82550deddafb89fe-init/diff:/var/lib/docker/overlay2/cd5p9dvr5c7dbcha8dtxbme1m/diff:/var/lib/docker/overlay2/to42q27jjhra2yqc7ir9wj5j2/diff:/var/lib/docker/overlay2/xh0ysmffu4p9v8ftknpf33je9/diff:/var/lib/docker/overlay2/is9l099vfhqmvx05r231znk1n/diff:/var/lib/docker/overlay2/5b1b4bc3f17d76f08c342ddc86f8130386ce811b6458c825f17aafb543ca181a/diff:/var/lib/docker/overlay2/88184b84b65868f1d4734f58ce65ba5d95e275eec17bc5c5c83e4158e54ff75d/diff:/var/lib/docker/overlay2/0f12aa8e3716d8c56fdb0d7fbaab97ccf1bf9a3c1220d54858c3b1ab06be71df/diff:/var/lib/docker/overlay2/6ae91c5d23a1ef5d5e3c6eaa95ccbaa2be5e1b1c7373aa0cebc6fe8598c6c8ef/diff",
            "MergedDir": "/var/lib/docker/overlay2/6673870013c91f39037354420092aa515c9d5cef85f23ebd82550deddafb89fe/merged",
            "UpperDir": "/var/lib/docker/overlay2/6673870013c91f39037354420092aa515c9d5cef85f23ebd82550deddafb89fe/diff",
            "WorkDir": "/var/lib/docker/overlay2/6673870013c91f39037354420092aa515c9d5cef85f23ebd82550deddafb89fe/work"
        },
        "Name": "overlay2"
    },
    "Mounts": [
        {
            "Type": "bind",
            "Source": "C:\\Users\\kubak\\Documents\\GitHub\\yourcar24\\frontend",
            "Destination": "/app",
            "Mode": "rw",
            "RW": true,
            "Propagation": "rprivate"
        },
        {
            "Type": "volume",
            "Name": "e88cbe5ad0d3e021e966733cf8282771e90fc46bde83ea8fce699526e1b2f960",
            "Source": "/var/lib/docker/volumes/e88cbe5ad0d3e021e966733cf8282771e90fc46bde83ea8fce699526e1b2f960/_data",
            "Destination": "/app/node_modules",
            "Driver": "local",
            "Mode": "z",
            "RW": true,
            "Propagation": ""
        }
    ],
    "Config": {
        "Hostname": "625967de365d",
        "Domainname": "",
        "User": "",
        "AttachStdin": false,
        "AttachStdout": true,
        "AttachStderr": true,
        "ExposedPorts": {
            "8080/tcp": {}
        },
        "Tty": false,
        "OpenStdin": false,
        "StdinOnce": false,
        "Env": [
            "CHOKIDAR_USEPOLLING=true",
            "PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin",
            "NODE_VERSION=19.8.1",
            "YARN_VERSION=1.22.19"
        ],
        "Cmd": [
            "npm",
            "run",
            "serve"
        ],
        "Image": "yourcar24-frontend",
        "Volumes": null,
        "WorkingDir": "/app",
        "Entrypoint": [
            "docker-entrypoint.sh"
        ],
        "OnBuild": null,
        "Labels": {
            "com.docker.compose.config-hash": "758ad9f8455cf7bcbb71af70db99dffaff094db18fc300027e84c7c7732f0322",
            "com.docker.compose.container-number": "1",
            "com.docker.compose.depends_on": "backend:service_started:false",
            "com.docker.compose.image": "sha256:17aa7ddc26c8faa172749252f89ac6e67e53cf104c9aade0ce8f866fd378405e",
            "com.docker.compose.oneoff": "False",
            "com.docker.compose.project": "yourcar24",
            "com.docker.compose.project.config_files": "C:\\Users\\kubak\\Documents\\GitHub\\yourcar24\\docker-compose.yaml",
            "com.docker.compose.project.working_dir": "C:\\Users\\kubak\\Documents\\GitHub\\yourcar24",
            "com.docker.compose.replace": "6ce5b392b35312a4cf6c570489499d92ce1caac3d7277c180fea31f50be29e62",
            "com.docker.compose.service": "frontend",
            "com.docker.compose.version": "2.17.2"
        }
    },
    "NetworkSettings": {
        "Bridge": "",
        "SandboxID": "e05a105a74ff2f8d8447668bb81fd3fef49328bc033760b0bad3089acc578519",
        "HairpinMode": false,
        "LinkLocalIPv6Address": "",
        "LinkLocalIPv6PrefixLen": 0,
        "Ports": {
            "8080/tcp": [
                {
                    "HostIp": "0.0.0.0",
                    "HostPort": "8080"
                }
            ]
        },
        "SandboxKey": "/var/run/docker/netns/e05a105a74ff",
        "SecondaryIPAddresses": null,
        "SecondaryIPv6Addresses": null,
        "EndpointID": "",
        "Gateway": "",
        "GlobalIPv6Address": "",
        "GlobalIPv6PrefixLen": 0,
        "IPAddress": "",
        "IPPrefixLen": 0,
        "IPv6Gateway": "",
        "MacAddress": "",
        "Networks": {
            "yourcar24_default": {
                "IPAMConfig": null,
                "Links": null,
                "Aliases": [
                    "frontend",
                    "frontend",
                    "625967de365d"
                ],
                "NetworkID": "3e68f8d62150de8f8ca5a3f89602cf9b58d7f98a68169e9b5ab8fe3bbbd4a30e",
                "EndpointID": "9da94224f0fcf2d50edb5998b8824b71c72c52459f081c8801361458b6d3c2b1",
                "Gateway": "172.19.0.1",
                "IPAddress": "172.19.0.4",
                "IPPrefixLen": 16,
                "IPv6Gateway": "",
                "GlobalIPv6Address": "",
                "GlobalIPv6PrefixLen": 0,
                "MacAddress": "02:42:ac:13:00:04",
                "DriverOpts": null
            }
        }
    }
}

]