How to Containerize a Vue.js app?

Question

I am unable to access the site locally on the http://172.17.0.2:8080/ in Chrome, I get "172.17.0.2 took too long to respond".

I used the inspect command to obtain the IP address of the container.

docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}} e83c95d05d63

The run command that I used.

docker run -it -p 8080:8080 --name portfolio-vue portfolio-vue:v1

And my Dockerfile

FROM node:7.7-alpine

ADD package.json /tmp/package.json
RUN cd /tmp && npm install

RUN mkdir -p /opt/portfolio-vue && cp -a /tmp/node_modules /opt/portfolio-vue-app

WORKDIR /opt/portfolio-vue
COPY . /opt/portfolio-vue

EXPOSE 8080
CMD ["npm", "start"]

acdcjunior · Accepted Answer · 2018-04-10 16:04:45Z

6

In a default vue-cli setup, npm start (the command you are using) runs npm run dev.

And, again, by default, npm run dev binds to localhost only.

Add --host 0.0.0.0 to your webpack-dev-server line in package.json so you can access it from outside the docker container:

From something like:

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

To something like (add --host 0.0.0.0):

    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

Note: I'm assuming, because you used CMD ["npm", "start"], you are creating a container for development or debugging purposes. If you are targeting production, you should really consider generating the bundle (npm run build) and serving the generated files directly on a HTTP server like nginx (which could be created in a docker as well).

edited Apr 10, 2018 at 16:04

answered Apr 10, 2018 at 15:59

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ferrybig Over a year ago

Notice that this solution doesn't bind to all addresses, only to ipv4 ones, you are basically excluding more than half of the internet

acdcjunior Over a year ago

In newer webpack versions you have --disable-host-check, but, in the current vue-cli, --host 0.0.0.0 is as good as it gets. One may try to replace 0.0.0.0 with the IPv6 equivalent, but I have never done that and can't vouch if works or not.

Collectives™ on Stack Overflow

How to Containerize a Vue.js app?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related