如何从docker容器运行webpack构建?

AJ_*_*310 13 node.js docker webpack docker-compose devops

我正在制作的应用程序是用ES6编写的,其他好东西是由Docker容器中的webpack编译的.目前,一切都可以从创建内部目录,安装依赖项和创建编译的bundle文件开始.

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

我已经尝试为dist目录创建一个卷,它第一次工作,但在进行更改和重建之后它不会获取新的更改.

我想要实现的是让容器构建并运行已编译的bundle.我不确定webpack部分是作为构建步骤在Dockerfile中还是在运行时,因为CMD ["yarn", "start"]崩溃但是RUN ["yarn", "start"]有效.

任何建议和帮助表示赞赏.提前致谢.

|_src
  |_index.js
|_dist
  |_bundle.js
|_Dockerfile
|_.dockerignore
|_docker-compose.yml
|_webpack.config.js
|_package.json
|_yarn.lock
Run Code Online (Sandbox Code Playgroud)

泊坞窗,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
Run Code Online (Sandbox Code Playgroud)

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"]
Run Code Online (Sandbox Code Playgroud)

.dockerignore

.git
.gitignore

node_modules
npm-debug.log

dist
Run Code Online (Sandbox Code Playgroud)

的package.json

{
  "scripts": {
    "build": "webpack",
    "start": "node dist/bundle.js"
  }
}
Run Code Online (Sandbox Code Playgroud)

小智 5

webpack通过添加以下几行,我可以在浏览器中获得 docker 服务webpack.config.js

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0',
    port: 3000
  },
};
Run Code Online (Sandbox Code Playgroud)

Docker 似乎希望内部容器地址为 ,0.0.0.0而不是localhost,这是 的默认字符串webpackwebpack.config.js在构建容器时更改规范并将其复制到容器中可以在主机上的“http://localhost:3000”上识别正确的端口。它对我的项目有用;希望它对你有用。


kry*_*our 1

我没有包含我的 src 树结构,但它与你的基本相同,我使用以下 docker 设置来让它运行以及我们每天的开发方式。

在 package.json 中我们有

"scripts": {
    "start": "npm run lint-ts && npm run lint-scss && webpack-dev-server --inline --progress --port 6868",
}
Run Code Online (Sandbox Code Playgroud)

docker文件

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" ]
Run Code Online (Sandbox Code Playgroud)

docker-compose.yml 版本:“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"
Run Code Online (Sandbox Code Playgroud)

请注意,此 Dockerfile 不适合生产,它适合开发环境,因为它以 root 身份运行。

有了这个 docker 文件,就有一个问题。

因为 alpine 在 musl 上,而我们在 glib 上,如果我们在主机上安装节点模块,编译后的本机将无法在 docker 容器上工作,一旦容器启动,如果出现错误,我们会运行它来修复它(有点现在用的是膏药)

docker-compose exec container_name_goes_here /bin/ash -c "npm rebuild node-sass --force"
Run Code Online (Sandbox Code Playgroud)

ikky 但它有效。