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
Accessing the Host With the Default Bridge Mode You just need to reference it by its Docker network IP, instead of localhost or 127.0. 0.1 . Your host's Docker IP will be shown on the inet line. Connect to this IP address from within your containers to successfully access the services running on your host.
The format of the --publish command is [host port]:[container port] . So, if we wanted to expose port 8000 inside the container to port 8080 outside the container, we would pass 8080:8000 to the --publish flag. Start the container and expose port 8080 to port 8080 on the host.
0.0.0.0 means all available interfaces which does include localhost but also others e.g. 192.168.0.123.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With