UI does not show any docker content from host
bverkron opened this issue · 9 comments
Problem:
Nothing on any of the tabs. I have several images and multiple containers running but docker-web-gui does not detect anything. No errors in the container log just docker-web-gui | ✨ Visit http://localhost:3230 to use Docker Web GUI
Environment:
- Ubuntu 22.04.4 LTS
- Docker version 27.0.3, build 7d4bcd8
Also tried on another Ubuntu server (same version) with Docker version 26.0.0, build 2ae903e. Same result
Steps:
- Cloned the repo
- Ran the build (output below)
- Ran docker compose up from the repo directory
Build output:
$ docker build . -t docker-web-gui
[+] Building 191.7s (11/12) docker:default
[+] Building 192.1s (11/12) docker:default
[+] Building 192.4s (11/12) docker:default
[+] Building 193.2s (11/12) docker:default
[+] Building 193.9s (11/12) docker:default
[+] Building 202.2s (13/13) FINISHED docker:default
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 297B 0.0s
=> [internal] load metadata for docker.io/library/node:alpine 1.3s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 66B 0.0s
=> [1/8] FROM docker.io/library/node:alpine@sha256:3b4e5fe02bb50e5b16f0595a0ec5a67474c065dec19cc4f31aaa0b4dab65e563 5.8s
=> => resolve docker.io/library/node:alpine@sha256:3b4e5fe02bb50e5b16f0595a0ec5a67474c065dec19cc4f31aaa0b4dab65e563 0.0s
=> => sha256:06c0d62f628bba061ef1cbe69ce67980ba1244745d2f7f911dbf090d67ab1fab 6.38kB / 6.38kB 0.0s
=> => sha256:286f203c853bd2814b022a5f3189475c0971114cc1e724b09b2461d30b145617 49.18MB / 49.18MB 3.1s
=> => sha256:cc70de2ae229e6b20a7bc8ff3ba540a00f394964ea015bc006e70dcdc23261cb 1.39MB / 1.39MB 0.4s
=> => sha256:a0b0347273f33c5c005dd2056e35586f390ceec67bd2ea939b8c1cdc2826c5c4 445B / 445B 0.7s
=> => sha256:3b4e5fe02bb50e5b16f0595a0ec5a67474c065dec19cc4f31aaa0b4dab65e563 6.62kB / 6.62kB 0.0s
=> => sha256:3e048a957b287a94edf213c7dae80652018c95d22ecdf22fe45ceb70367b8520 1.72kB / 1.72kB 0.0s
=> => extracting sha256:286f203c853bd2814b022a5f3189475c0971114cc1e724b09b2461d30b145617 1.8s
=> => extracting sha256:cc70de2ae229e6b20a7bc8ff3ba540a00f394964ea015bc006e70dcdc23261cb 0.1s
=> => extracting sha256:a0b0347273f33c5c005dd2056e35586f390ceec67bd2ea939b8c1cdc2826c5c4 0.0s
=> [internal] load build context 0.1s
=> => transferring context: 3.50MB 0.1s
=> [2/8] WORKDIR /src 1.1s
=> [3/8] RUN apk add --no-cache python3 py3-pip build-base 7.2s
=> [4/8] RUN apk add docker-cli 3.1s
=> [5/8] ADD ./backend /src/backend 0.8s
=> [6/8] ADD ./client /src/client 0.1s
=> [7/8] ADD ./app.js /src/app.js 0.0s
=> [8/8] RUN cd /src/backend && npm install 180.1s
=> exporting to image 2.5s
=> => exporting layers 2.4s
=> => writing image sha256:579d76bad9d9ff6be3adda85ab6b116ed6188170bc0bf3c6f8212c1d7fdfd324 0.0s
=> => naming to docker.io/library/docker-web-gui 0.0sAdditional Info / Troubleshooting:
These are the permissions on the clone repo directory (mcp is my primary user which is in the docker group)
$ ll
total 48
drwxr-xr-x 6 mcp docker 4096 Aug 14 03:18 ./
drwxr-xr-x 3 mcp docker 4096 Aug 14 03:18 ../
-rw-r--r-- 1 mcp docker 706 Aug 14 03:18 app.js
drwxr-xr-x 5 mcp docker 4096 Aug 14 03:18 backend/
drwxr-xr-x 4 mcp docker 4096 Aug 14 03:18 client/
-rw-r--r-- 1 mcp docker 199 Aug 14 03:18 docker-compose.yml
-rw-r--r-- 1 mcp docker 258 Aug 14 03:18 Dockerfile
-rw-r--r-- 1 mcp docker 26 Aug 14 03:18 .dockerignore
drwxr-xr-x 8 mcp docker 4096 Aug 14 03:18 .git/
drwxr-xr-x 2 mcp docker 4096 Aug 14 03:18 .github/
-rw-r--r-- 1 mcp docker 415 Aug 14 03:18 Makefile
-rw-r--r-- 1 mcp docker 3723 Aug 14 03:18 README.md
I tried starting it with the follow docker-compose file too which should be the same as the one in the repo basically, no change.
services:
docker-web-gui:
image: docker-web-gui
container_name: docker-web-gui
ports:
- 3230:3230
volumes:
- /usr/local/bin/docker:/usr/local/bin/docker
- /var/run/docker.sock:/var/run/docker.sock
networks: {}Images on the machine for context:
$ docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
docker-web-gui latest 3a2486377d82 53 minutes ago 577MB
docker-web-gui-docker-web-gui latest 456124e22183 53 minutes ago 577MB
checkmk/check-mk-raw 2.3.0-latest 4306c70a2d3b 7 days ago 1.76GB
alpine latest 324bc02ae123 3 weeks ago 7.8MB
linuxserver/wireguard latest 0f9b0eb66ed1 5 weeks ago 98MB
offen/docker-volume-backup latest 9392b1d81976 4 months ago 33.1MB
louislam/dockge latest ffb6864bc6f8 6 months ago 568MB
hello-world latest d2c94e258dcb 15 months ago 13.3kB
selfhostedpro/yacht latest d79060100eb7 19 months ago 415MBI also tried shutting down all other containers like dockge in case they were somehow interfering and ran a docker system prune to clean things up. Same result.
Just saw the note in the readme that says "You can run this application through a docker container, but it only works in MacOS". So this can't be run on Linux (ideally on a headless server) in a docker container?
I also noticed in my browser dev tools that it continually throws the following error, which makes me think that this designed to literally only be access on the same machine it and all the other docker containers are running on?
[Error] Failed to load resource: Could not connect to the server. (stats, line 0)
[Error] Could not connect to the server.
[Error] XMLHttpRequest cannot load http://localhost:3230/api/container/stats due to access control checks.
I from a client laptop I was however able to hit some of the api endpoints I found in the code and get some info from the docker containers on the ubuntu server. For example:
http://<server_ip_address>:3230/api/container/stats?container=3142ae664d2f
[{"id":"e1e00585d2b3","cpu_percentage":"0.00%","memory_usage":"7.16MiB / 2.898GiB","network_io":"1.27kB / 0B"},{"id":"3142ae664d2f","cpu_percentage":"1.04%","memory_usage":"112.6MiB / 2.898GiB","network_io":"5.93kB / 1.34kB"},{"id":"051940963e8c","cpu_percentage":"1.14%","memory_usage":"38.63MiB / 2.898GiB","network_io":"64.2kB / 5.16MB"}]
Which makes me hopeful this could be made to work on a server inside a docker container and accessed remotely.
Did a bit more digging. Found the location where the api request url is built. Thought I would be able to hardcode the url to my server like the following but it didn't change anything so maybe I have the wrong location.
export const restPath = 'http://myserver:3230/api/'
I see this commit which was intended to allow access from other hosts but it doesn't seem to be working as intended.
91db144
- export const restPath = 'http://localhost:3230/api/'
+ export const restPath = '/api/'Hi @bverkron, thanks for reporting the issue. Can you please check the browser console and report any potential error message in there?
Apologies if it was not clear enough in this comment. The browser console is where I see those errors (see screenshot below). The stats api call that happens periodically and all other api calls when I navigate the UI are going to localhost instead of my domain. I'm accessing the web ui via http://mydomain:3230/ from a client machine so I don't see why it's defaulting to localhost for the api calls.
I find it strange that it's still the case even when I tried to hardcode my domain in restPath variable that was adjusted in 91db144. For example export const restPath = 'http://mydomain:3230/api/'
Was trying to narrow down root cause but I guess that's not it?
I may have found a clue. When digging into the request.js on the client side it shows the following, even though the server side should be serving the version where restPath = '/api/' or my modified one with my domain added.
I can't figure out why it's not reflecting at least the change made in the commit I referenced (i.e. export const restPath = '/api/'). I checked out the latest copy of the code last week, have rebuilt the image multiple times from source (and purged any existing local copies of the image), and have even verified that the request.js file inside the running container shows my hard coded restPath yet somehow the client still has localhost in the restPath. I even tried multiple client machines and browsers and did a full clear of browser cache
Here's another run-through of me re-building the container.
mcp@dev:~/git-projects/docker-web-gui/client/src/utilities$ docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
alpine latest 324bc02ae123 3 weeks ago 7.8MB
pihole/pihole latest 7e2c1211ec99 6 weeks ago 311MB
qfdk/easydockerweb latest 86fa73262bdb 3 months ago 179MB
offen/docker-volume-backup latest 9392b1d81976 4 months ago 33.1MB
louislam/dockge latest ffb6864bc6f8 7 months ago 568MB
hello-world latest d2c94e258dcb 15 months ago 13.3kB
mcp@dev:~/git-projects/docker-web-gui/client/src/utilities$ cat request.js
import axios from 'axios'
export const restPath = 'http://mydomain:3230/api/'
export const request = ( method, path, data = {} ) => {
const options = {
method,
data,
url: restPath + path,
timeout: 50000,
}
return axios(options)
}
mcp@dev:~/git-projects/docker-web-gui/client/src/utilities$ cd ~/git-projects/docker-web-gui/
mcp@dev:~/git-projects/docker-web-gui$ docker compose build
WARN[0000] /home/mcp/git-projects/docker-web-gui/docker-compose.yml: `version` is obsolete
[+] Building 987.0s (13/13) FINISHED docker:default
=> [docker-web-gui internal] load build definition from Dockerfile 0.1s
=> => transferring dockerfile: 297B 0.0s
=> [docker-web-gui internal] load metadata for docker.io/library/node:alpine 1.4s
=> [docker-web-gui internal] load .dockerignore 0.0s
=> => transferring context: 66B 0.0s
=> [docker-web-gui 1/8] FROM docker.io/library/node:alpine@sha256:3b4e5fe02bb50e5b16f0595a0ec5a67474c065dec19cc4f31aaa0b4dab65e563 15.2s
=> => resolve docker.io/library/node:alpine@sha256:3b4e5fe02bb50e5b16f0595a0ec5a67474c065dec19cc4f31aaa0b4dab65e563 0.0s
=> => sha256:3e048a957b287a94edf213c7dae80652018c95d22ecdf22fe45ceb70367b8520 1.72kB / 1.72kB 0.0s
=> => sha256:06c0d62f628bba061ef1cbe69ce67980ba1244745d2f7f911dbf090d67ab1fab 6.38kB / 6.38kB 0.0s
=> => sha256:cc70de2ae229e6b20a7bc8ff3ba540a00f394964ea015bc006e70dcdc23261cb 1.39MB / 1.39MB 0.3s
=> => sha256:a0b0347273f33c5c005dd2056e35586f390ceec67bd2ea939b8c1cdc2826c5c4 445B / 445B 0.3s
=> => sha256:3b4e5fe02bb50e5b16f0595a0ec5a67474c065dec19cc4f31aaa0b4dab65e563 6.62kB / 6.62kB 0.0s
=> => sha256:286f203c853bd2814b022a5f3189475c0971114cc1e724b09b2461d30b145617 49.18MB / 49.18MB 3.3s
=> => extracting sha256:286f203c853bd2814b022a5f3189475c0971114cc1e724b09b2461d30b145617 10.6s
=> => extracting sha256:cc70de2ae229e6b20a7bc8ff3ba540a00f394964ea015bc006e70dcdc23261cb 0.3s
=> => extracting sha256:a0b0347273f33c5c005dd2056e35586f390ceec67bd2ea939b8c1cdc2826c5c4 0.0s
=> [docker-web-gui internal] load build context 0.6s
=> => transferring context: 3.71MB 0.6s
=> [docker-web-gui 2/8] WORKDIR /src 1.0s
=> [docker-web-gui 3/8] RUN apk add --no-cache python3 py3-pip build-base 24.3s
=> [docker-web-gui 4/8] RUN apk add docker-cli 5.9s
=> [docker-web-gui 5/8] ADD ./backend /src/backend 0.3s
=> [docker-web-gui 6/8] ADD ./client /src/client 0.2s
=> [docker-web-gui 7/8] ADD ./app.js /src/app.js 0.1s
=> [docker-web-gui 8/8] RUN cd /src/backend && npm install 922.6s
=> [docker-web-gui] exporting to image 15.7s
=> => exporting layers 15.6s
=> => writing image sha256:9ca35b585e5617cea91341d6010ac9ab9ab293601c5ee6e0febc16d226ca7ebd 0.0s
=> => naming to docker.io/library/docker-web-gui-docker-web-gui 0.0s For some reason docker compose build doubles up on the name so I just tag the produced image with the correct name so the compose.yaml can find it.
mcp@dev:~/git-projects/docker-web-gui$ docker tag docker-web-gui-docker-web-gui:latest docker-web-gui:latestYou can see the contents of request.js in the running container here. And yes the domain is my actual domain. I just prefer obfuscating it when sharing publicly.
mcp@dev:~/git-projects/docker-web-gui$ docker exec -it docker-web-gui sh
/src # cd client/src/utilities/
/src/client/src/utilities # ls -l
total 4
-rw-r--r-- 1 root root 262 Aug 14 19:50 request.js
/src/client/src/utilities # cat request.js
import axios from 'axios'
export const restPath = 'http://mydomain:3230/api/'
export const request = ( method, path, data = {} ) => {
const options = {
method,
data,
url: restPath + path,
timeout: 50000,
}
return axios(options)
}
/src/client/src/utilities #Found root cause. main.5147f23d.chunk.js and main.5147f23d.chunk.js.map in https://github.com/rakibtg/docker-web-gui/tree/master/backend/web/static/js are retaining the localhost in the path. I replaced the old http://localhost:3032 with just /api/ like that commit and it works.
I would have found them sooner but was originally searching in the github web UI and those files don't come up. They must be excluded by github by default or something.
I'm guessing these have to be rebuilt as part of the build process.
Edit: I found the build info under the client folder, ran npm install and npm build but no luck. Same localhost issue.
@bverkron Is the hotfix is working for you atm? Thanks for pointing it out, I will soon work on a fix to build the bundle issue.
If by hotfix you mean just manually modifying the main.5147f23d.chunk.js and main.5147f23d.chunk.js.map files and rebuilding the image then yes.
But I was unable to get success when trying to rebuild the files using the npm build process. It did not seem to update them.