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

问题

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 alvaroo@selina.com"

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

回答1:

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.

回答2:

Try changing your start script in the package.json to perform the build first (doing this, you won't need the RUN command to perform the build in your Dockerfile:

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

来源：https://stackoverflow.com/questions/45471730/how-do-i-run-a-webpack-build-from-a-docker-container

标签

node.js

Docker

Webpack

docker-compose

devops