如何从Docker容器运行Webpack构建? [英] How do I run a webpack build from a docker container?

问题描述

我正在制作的应用程序是用ES6编写的，其他东西是通过Docker容器内的webpack进行编译的.目前，从创建内部目录，安装依赖项以及创建已编译的捆绑软件文件，一切正常.

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.

当运行容器时，它说dist/bundle.js不存在.除非我在主机目录中创建捆绑文件，否则它将起作用.

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.

我尝试在第一次运行时为dist目录创建一个卷，但是在进行更改并重建后，它并没有采用新的更改.

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.

我想要实现的是让容器构建并运行编译后的捆绑软件.由于 CMD ["yarn"，"start"] 崩溃，但 RUN ["yarn"，开始"] 有效.

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

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

Dockerfile

FROM node:latest

LABEL version="1.0"
LABEL description="This is the Selina server Docker image."
LABEL maintainer="AJ [e-mail]"

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

.dockerignore

.git
.gitignore

node_modules
npm-debug.log

dist

package.json

package.json

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

推荐答案

通过在 webpack.config中添加以下行，我能够使用 webpack 在浏览器中获取docker服务.js :

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似乎希望内部容器地址为 0.0.0.0 ，而不是 localhost ，这是 webpack 的默认字符串.更改 webpack.config.js 规范并将其构建时将其复制到容器中，从而可以在主机上的"http://localhost: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.

这篇关于如何从Docker容器运行Webpack构建?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！