How do I run a webpack build from a docker container?

Question

The app I'm making is written in ES6 and other goodies is transpiled by webpack inside a Docker container. At the moment everything works from creating the inner directory, installing dependencies, and creating the compiled bundle file.

When running the container instead, it says that dist/bundle.js does not exist. Except if I create the bundle file in the host directory, it will work.

I've tried creating a volume for the dist directory at it works the first time, but after making changes and rebuilding it does not pick up the new changes.

What I'm trying to achieve is having the container build and run the compiled bundle. I'm not sure if the webpack part should be in the Dockerfile as a build step or at runtime since the CMD ["yarn", "start"] crashes but RUN ["yarn", "start"] works.

Any suggestions ands help is appreciated. Thanks in advance.

|_src
  |_index.js
|_dist
  |_bundle.js
|_Dockerfile
|_.dockerignore
|_docker-compose.yml
|_webpack.config.js
|_package.json
|_yarn.lock

docker-compose.yml

version: "3.3"
services:
  server:
    build: .
    image: selina-server
    volumes:
      - ./:/usr/app/selina-server
      - /usr/app/selina-server/node_modules
      # - /usr/app/selina-server/dist
    ports:
      - 3000:3000

Dockerfile

FROM node:latest

LABEL version="1.0"
LABEL description="This is the Selina server Docker image."
LABEL maintainer="AJ [email protected]"

WORKDIR "/tmp"

COPY ["package.json", "yarn.lock*", "./"]

RUN ["yarn"]

WORKDIR "/usr/app/selina-server"

RUN ["ln", "-s", "/tmp/node_modules"]

COPY [".", "./"]

RUN ["yarn", "run", "build"]

EXPOSE 3000

CMD ["yarn", "start"]

.dockerignore

.git
.gitignore

node_modules
npm-debug.log

dist

package.json

{
  "scripts": {
    "build": "webpack",
    "start": "node dist/bundle.js"
  }
}

Solution 1

I was able to get a docker service in the browser with webpack by adding the following lines to webpack.config.js:

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0',
    port: 3000
  },
};

Docker seems to want the internal container address to be 0.0.0.0 and not localhost, which is the default string for webpack. Changing webpack.config.js specification and copying that into the container when it is being built allowed the correct port to be recognized on `http://localhost:3000' on the host machine. It worked for my project; hope it works for yours.

Solution 2

I haven't included my src tree structure but its basically identical to yours, I use the following docker setup to get it to run and its how we dev stuff every day.

In package.json we have

"scripts": {
    "start": "npm run lint-ts && npm run lint-scss && webpack-dev-server --inline --progress --port 6868",
}

dockerfile

FROM node:8.11.3-alpine

WORKDIR /usr/app

COPY package.json .npmrc ./

RUN mkdir -p /home/node/.cache/yarn && \
  chmod -R 0755 /home/node/.cache && \
  chown -R node:node /home/node && \
  apk --no-cache add \
  g++ gcc libgcc libstdc++ make python

COPY . .

EXPOSE 6868

ENTRYPOINT [ "/bin/ash" ]

docker-compose.yml version: "3"

volumes:
  yarn:

services:
  web:
    user: "1000:1000"
    build:
      context: .
      args:
        - http_proxy
        - https_proxy
        - no_proxy
    container_name: "some-app"
    command: -c "npm config set proxy=$http_proxy && npm run start"
    volumes:
      - .:/usr/app/
    ports:
      - "6868:6868"

Please note this Dockerfile is not suitable for production it's for a dev environment as its running stuff as root.

With this docker file there its a gotcha.

Because alpine is on musl and we are on glib if we install node modules on the host the compiled natives won't work on the docker container, Once the container is up if you get an error we run this to fix it (its a bit of a sticking plaster right now)

docker-compose exec container_name_goes_here /bin/ash -c "npm rebuild node-sass --force"

ikky but it works.