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"]

Answer 1

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).