Hot reloading in docker-based Vue projects

Question

Hello, I have a problem with my vue project.

I have frontend backend and backend database in docker.

This is the vue.config.js configuration:

module.exports = defineConfig({
  configureWebpack: {
    entry: "./src/main.js",
    devServer: {
      hot: true,
    },
    watch: true,
    watchOptions: {
        ignored: /node_modules/,
        poll: 500,
    },
},
  transpileDependencies: true
})

The container will install the packages given in npm and package.json by itself during the creation process:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@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",
    "mitt": "^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",
    "leaflet": "^1.9.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "typescript": "~4.5.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

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

直到昨天，一切都对我来说一切正常，但今天重新启动容器后，页面的热重新加载选项停止工作。

当容器启动时，我得到以下输出：

frontend    |   App running at:
frontend    |   - Local:   http://localhost:8080/
frontend    |   - Network: http://172.26.0.4:8080/
frontend    |
No issues found.

当我使用 http://localhost:8080 在浏览器中启动页面时，页面会加载，但保存更改时的实时重新加载选项已停止工作。

In the console I can see that the browser is trying to download updates but is not getting a response

WebSocket connection to 'ws://172.26.0.4:8080/ws' failed:
WebSocketClient @WebSocketClient.js?5586:16
initSocket@socket.js?d6e0:24
eval @ socket.js?d6e0:48

I tried placing the container from scratch.

I'm using an older version of kyod and after writing this option still doesn't work

When I refresh the page manually, the content changes correctly.

Do you know what the problem is

Also, it works fine on other computers.

They compiled the whole project later than me, so if it depends on some node modules, it won't work either. Anyway, I've been trying to create the container from scratch myself for two days now, so none of the node_modules are out of date. The problem is not in the configuration as it was working just one day ago. Or is there something on my computer that might be blocking traffic to ws://172.26.0.4:8080/ws

Also, it looks the same on other browsers.

I'm currently setting up a virtual machine to check and it still looks like this, but would love to hear suggestions on what else I could check.

Thank you for your early interaction and looking forward to seeing you!

Answer 1

other information:

This is my container check:

[
{
    "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
            }
        }
    }
}

]