django - Docker 和 webpack 包在本地生成，但不在容器中

Question

无法让 webpack 在 docker 中捆绑 react.js。
我的 webpack 配置和前端包正确。这个问题与 docker 集成有关。
当我在 docker 容器启动之前或容器启动时运行 webpack 时，webpack 会生成捆绑包并将它们复制到容器中。这行得通，我可以这样开发，但感觉很草率。
相反，我希望 npm run build 在 docker 容器内以生产模式运行 webpack。如果我只是说 docker-compose build and up，它会自行生成捆绑包。
我已经有一个带有 django 后端工作的 docker 容器。我所需要的只是让 webpack 使用 babel 转译 djangoproj/static/js 中的 react 代码并将其移动到 djangoproj/static/bundles。将文件捆绑到该文件夹​​后，django 端的其余部分就可以工作并呈现页面。
值得注意的是，除了 404 之外，我没有收到错误，因为捆绑包不存在。我在控制台中的输出显示 webpack 使用 babel 进行转译，然后捆绑代码。
但是，在 django 容器上执行 docker ps 和 docker exec 之后，不会生成捆绑包。 node_modules 也没有安装在/app/目录中。节点模块在/tmp/目录中安装良好，但无法复制到/app/。
另一个担忧或问题是，我是否应该在单独的容器中处理此捆绑？对我来说，将它保存在 django 容器中似乎更容易，它只是运行 webpack 来捆绑。所以如果没有必要，我不想要另一个容器的开销，对吧？我可以想象，因为它必须被复制到 django 容器中的静态文件夹中，另一个用于捆绑的单独容器会更糟。
感谢您的任何建议。
这是我试图管理这个的配置:

Webpack.config.js

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  mode: 'development',
  context: __dirname,

  entry: {
    'index': './sam_site/static/js/index.js',
    'about': './sam_site/static/js/about.js',
    'project': './sam_site/static/js/project.js',
  },

  output: {
      path: path.resolve('./sam_site/static/bundles'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new BundleTracker({filename: './sam_site/webpack-stats.json'}),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }

};

包.json

{
  "name": "sam_site",
  "version": "1.0.0",
  "description": "It's my site.",
  "main": "index.js",
  "directories": {
    "doc": "docs"
  },
  "scripts": {
    "start": "webpack-dev-server --host 0.0.0.0 --inline --content-base .",
    "build": "webpack --config webpack.config.js --progress --colors --mode production",
    "watch": "webpack --config webpack.config.js --watch --mode development"
  },
  "author": "Samuel Piecz",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "webpack": "^4.39.2",
    "webpack-bundle-tracker": "^0.4.2-beta",
    "webpack-cli": "^3.3.7"
  },
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  }
} 

.babelrc

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ]
}

local.yml 与 compose.yml

相同

version: '3'

volumes:
  local_postgres_data: {}
  local_postgres_data_backups: {}

services:
  django: &django
    build:
      context: .
      dockerfile: ./compose/local/django/Dockerfile
    image: sam_site_local_django
    depends_on:
      - postgres
    volumes:
      - .:/app
    env_file:
      - ./.envs/.local/.django
      - ./.envs/.local/.postgres
    ports:
      - "8000:8000"
    command: /start

  postgres:
    build:
      context: .
      dockerfile: ./compose/production/postgres/Dockerfile
    image: sam_site_production_postgres
    volumes:
      - local_postgres_data:/var/lib/postgresql/data
      - local_postgres_data_backups:/backups
    env_file:
      - ./.envs/.local/.postgres

  redis:
    image: redis:5.0

  celeryworker:
    <<: *django
    image: sam_site_local_celeryworker
    depends_on:
      - redis
      - postgres
      
    ports: []
    command: /start-celeryworker

  celerybeat:
    <<: *django
    image: sam_site_local_celerybeat
    depends_on:
      - redis
      - postgres
      
    ports: []
    command: /start-celerybeat

  flower:
    <<: *django
    image: sam_site_local_flower
    ports:
      - "5555:5555"
    command: /start-flower

django Dockerfile

FROM python:3.6-alpine

ENV PYTHONUNBUFFERED 1

RUN apk update \
  # psycopg2 dependencies
  && apk add --virtual build-deps gcc python3-dev musl-dev \
  && apk add postgresql-dev \
  # Pillow dependencies
  && apk add jpeg-dev zlib-dev freetype-dev lcms2-dev openjpeg-dev tiff-dev tk-dev tcl-dev \
  # CFFI dependencies
  && apk add libffi-dev py-cffi \
  # Translations dependencies
  && apk add gettext \
  # https://docs.djangoproject.com/en/dev/ref/django-admin/#dbshell
  && apk add postgresql-client \
    # NPM
    && apk add --update npm

# Npm & webpack goodness
WORKDIR /app
COPY . /app
CMD npm install 
CMD npm audit fix 
CMD npm run build 

# Requirements are installed here to ensure they will be cached.
COPY ./requirements /requirements
RUN pip install -r /requirements/local.txt

COPY ./compose/production/django/entrypoint /entrypoint
RUN sed -i 's/\r$//g' /entrypoint
RUN chmod +x /entrypoint

COPY ./compose/local/django/start /start
RUN sed -i 's/\r$//g' /start
RUN chmod +x /start

COPY ./compose/local/django/celery/worker/start /start-celeryworker
RUN sed -i 's/\r$//g' /start-celeryworker
RUN chmod +x /start-celeryworker

COPY ./compose/local/django/celery/beat/start /start-celerybeat
RUN sed -i 's/\r$//g' /start-celerybeat
RUN chmod +x /start-celerybeat

COPY ./compose/local/django/celery/flower/start /start-flower
RUN sed -i 's/\r$//g' /start-flower
RUN chmod +x /start-flower

WORKDIR /app

ENTRYPOINT ["/entrypoint"]

.dockerignore

.*
!.coveragerc
!.env
!.pylintrc
!.babelrc
node_modules

Answer 1

您的 volumes:正在打破这个设置。删除将内容绑定(bind)到 /app 的行在你的容器中。

您在此处显示的 Dockerfile 序列将创建一个镜像，该镜像将您的本地源代码树复制到 /app并运行 npm run build在上面。这发生在 docker-compose.yml 中的大多数设置之前。 ，包括 volumes: , 考虑。然后 Compose 启动一个容器，该容器获取该图像并将当前目录绑定(bind)到 /app。 ，隐藏构建过程中发生的一切。

如果您需要实时开发环境，我建议直接使用您的主机系统工具(Python 虚拟环境，npm run start)；这很好用，并且避免了 Docker 在此处添加的所有复杂性。

我不会添加单独的容器来执行构建时任务。在 Dockerfile 中执行这些任务更有意义，或者对于主机依赖很少的事情(如 Webpack)直接在主机上运行它们。

一种可能对此类情况有所帮助的技巧是使用 multi-stage build :在你的 Dockerfile 中有多个部分，分别打包应用程序及其 UI，然后将它们组合在一起。

FROM python:3.6-alpine AS wheel
...
WORKDIR /app
COPY . .
RUN pip wheel

FROM node:12 AS webpack
WORKDIR /app
COPY . .
RUN npm install && npm run build

FROM python:3.6-alpine
WORKDIR /app
COPY --from=wheel /app/dist/wheel/myapp-*.whl .
RUN pip install myapp-*.whl
COPY --from=webpack /app/dist dist
COPY ./compose/... .
CMD ["/app/entrypoint"]

如果需要C库依赖，构建阶段需要安装 -dev像你上面显示的包，但最终的图像只需要安装相应的库包，而不是完整的 C 工具链。