0

I dockerirized a vue.js app init by webpack, and run it with docker-compose. It runs with no problem in terminal, but when I go to the browser: "impossibile to reach ip". I use docker-toolbox (thus, a VM). First of all I make a new folder and execute the follow lines in order to init a new vue project using webpack:

npm install -g vue-cli

vue init webpack vueapp2

Now, if I run my applicatoin using npm run dev it works fine. In order to dockerizing it, I make a Dockerfile:

FROM node:alpine

RUN npm install -g vue-cli

WORKDIR '/app'

COPY ./package*.json ./

RUN npm install

COPY ./ ./

CMD [ "npm", "run", "dev"]

and a docker-compose.yml:

version: "3"

services:
    node-app:
        build: .
        ports:
            - "8080:8000"

In order to works with Docker using docker Toolbox, I have to map local-machine port to container-port (8080:8000). That's should works fine because I do similar things with a vue.js app serve by live-server succesfully (https://github.com/Aragorn1992gb/vue-liveserver-dockerized). But that's that use webpack no: it says "impossible to reach ip" when I digit container ip: http://192.168.99.100:8080/. The line CMD [ "npm", "run", "dev"] on Dockerfile should execute command "npm run [script 'dev' staying on package.json]". That's my package.json:

{
  "name": "vue-app2",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "Aragorn1992gb <giacomobrunetta@gmail.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

I found different solutions but without any success. One of the advise is it to add --host 0.0.0.0 to dev like this: "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",, because it has to reach my docker ip, but stil not working. Actually must be a problem with that "dev" script, there is some problem to run it using dockerfile. This is my project on repo: https://github.com/Aragorn1992gb/vue-webapp-dockerizing

Giacomo Brunetta
  • 1,409
  • 3
  • 18
  • 38
  • Is everything in the chain answering? Using docker adds another layer (or two) to the complication. Break it down some. Are you POSITIVE that vue is answering inside the container? Can you go into the container `docker exec -it vuecontainer /bin/sh` and connect to `localhost:8080`? – jnovack Jun 18 '20 at 14:41
  • I can go inside that directory. And then? I have to put npm run dev? – Giacomo Brunetta Jun 18 '20 at 14:52

1 Answers1

0

I just change contaner port from 8000 to 8080:

version: "3"

services:
    node-app:
        build: .
        ports:
            - "8080:8080"

Because on config/index.js the specified port is 8080. I can also change that port (i.e. 8000) and change it also in docker.compose.yml (i.e. 8080:8000). Putting also --host 0.0.0.0 to dev, like that:

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

Because webpack listen only on localhost container, I must allow requests from other interfaces (container ip)

Giacomo Brunetta
  • 1,409
  • 3
  • 18
  • 38
  • The first code section "ports: 8080:8080" worked because your vue container was listening on port 8080, NOT 8000 as you had in your original question. The second piece of code "host 0.0.0.0" tells webpack to listen on ALL interfaces. By default "webpack-dev-server" only listens on localhost (not your localhost, the CONTAINER's localhost) so it's never available over any network (there's a network, even virtual, between your host and the docker container). – jnovack Jun 18 '20 at 15:16
  • 1
    `--host 0.0.0.0` works because `webpack-dev-server`, by default, only binds itself to listen on localhost - so any traffic coming from outside your container would not reach the server, and `0.0.0.0` makes it listen on all interfaces. And the port changed is essentially the same reason - `webpack-dev-server` listens by default on port 8080, so the port of the container you need to specify must match it. – Leonardo Dagnino Jun 18 '20 at 17:26
  • @LeonardoDagnino well, because 0.0.0.0 is the localhost address of the local machine, right? I tried to put container ip 192.168.99.100 instead of 0.0.0.0, but without success. However, 0.0.0.0 is enough – Giacomo Brunetta Jun 18 '20 at 17:57
  • 1
    No, actually `0.0.0.0` is treated specially to bind to all interfaces. If you try to bind to an IP, you will listen only on traffic coming from the interface it is bound to. You can see [this answer](https://stackoverflow.com/questions/20778771/what-is-the-difference-between-0-0-0-0-127-0-0-1-and-localhost) for a more thorough explanation. – Leonardo Dagnino Jun 18 '20 at 19:29