Running docker container not accessible from host (localhost:8081) - docker

Question

Using Ubuntu.
Based on this guide:
https://www.freecodecamp.org/news/how-to-use-routing-in-vue-js-to-create-a-better-user-experience-98d225bbcdd9/
I have created a minimal vuejs project with below project structure:
https://github.com/dev-samples/samples/tree/master/vuejs-001
frontend-router/
build/
config/
src/
static/
test/
build.sh
Dockerfile.dev
package-lock.json
package.json
Where:
Dockerfile.dev
FROM node:10
RUN apt install curl
RUN mkdir /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /app/package.json
# make the 'app' folder the current working directory before running npm install
WORKDIR /app
RUN npm install
CMD [ "npm", "run", "dev" ]
I am building the image and running the container from that image with:
docker build -t frontend-router-image -f Dockerfile.dev .
docker rm -f frontend-router-container
docker run -it -p 8081:8080 -v ${PWD}:/app/ -v /app/node_modules --name frontend-router-container frontend-router-image
which gives:
DONE Compiled successfully in 1738ms 3:49:45 PM
I Your application is running here: http://localhost:8080
Since I add -p 8081:8080 to docker run command I would expect that I can access the application from my host browser on:
http://localhost:8081/
but it just gives below error:
I works fine when I run it with vanilla npm from my host. But why can't I access the application when its run from inside a docker container?
Source code here:
https://github.com/dev-samples/samples/tree/master/vuejs-001
As suggested below I have tried:
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
e011fb9e39e8 frontend-router-image "docker-entrypoint.s…" 12 seconds ago Up 9 seconds 0.0.0.0:8081->8080/tcp frontend-router-container
$ docker run -it --rm --net container:frontend-router-container nicolaka/netshoot ss -lnt
State Recv-Q Send-Q Local Address:Port Peer Address:Port
LISTEN 0 128 127.0.0.1:8080 0.0.0.0:*
For comparison this project works fine:
https://github.com/dev-samples/samples/tree/master/vuejs-002
Meaning that when I run a container I can access the web application on my host browser on localhost:8081

Answer 1

Based on this:
https://github.com/webpack/webpack-dev-server/issues/547
and:
https://dev.to/azawakh/don-t-forget-to-give-host-0-0-0-0-to-the-startup-option-of-webpack-dev-server-using-docker-1483
https://pythonspeed.com/articles/docker-connection-refused/
It works if I change:
host: 'localhost', // can be overwritten by process.env.HOST
to:
host: '0.0.0.0', // can be overwritten by process.env.HOST
in the file: /frontend-router/config/index.js

Answer 2

When you have connection reset it means usually that nobody is listen on the port .
It seems you are listening on localhost , you must
listening on 0.0.0.0 when you are in the docker .
in your file config/index.js , host is localhost , you must remove the host directive
If you listening on 127.0.0.1or localhost , you are listening on local network , so
inside the container , the web server can be accessed only by local process .
Another source of problems you can have , you are connecting to the wrong port .
if you run with docker run -it -p 8081:8080 you must acces to http://localhost:8081/
see
Publish or expose port (-p, --expose)
from https://docs.docker.com/engine/reference/commandline/run/