使用Docker容器化的Django和webpackDevServer

Question

我需要一些帮助来配置 Docker，以使 Django 在开发模式下与 webpack dev server 协同工作。我希望 Django 的 Docker 容器可以访问 webpack 生成的捆绑包。

我很难理解如何在 docker-compose 中使用卷共享文件的容器。

到目前为止，我只能运行一个可工作的 Django Docker 应用程序，然后在本地运行 npm install && node server.js。

Dockerfile：

# use base python image with python 2.7
FROM python:2.7
ENV PYTHONUNBUFFERED 1

# set working directory to /code/
RUN mkdir /code
WORKDIR /code

# add requirements.txt to the image
ADD requirements.txt /code/

# install python dependencies
RUN pip install -r requirements.txt

ADD . /code/

# Port to expose
EXPOSE 8000

docker-compose.yml

version: '2'
services:
  db:
    image: postgres
  redis:
    image: redis
  rabbitmq:
    image: rabbitmq:3-management
    ports:
      - "5672:5672"  # we forward this port because it's useful for debugging
      - "15672:15672"  # here, we can access rabbitmq management plugin
  worker:
    build: .
    command: celery worker -A example -l info
    volumes:
      - .:/code
    links:
      - db
      - rabbitmq
      - redis
  web:
    build:
      context: .
      dockerfile: Dockerfile
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
      - ./assets/bundles:/webpack (here I'm trying in some way to address webpack files to assets/bundles)
    ports:
      - "8000:8000"
    links:
      - db
      - rabbitmq
      - redis

这是我使用webpack的尝试

Dockerfile.webpack

FROM node:latest

WORKDIR /webpack
COPY package.json /webpack/
COPY server.js /webpack/

RUN npm config set registry http://registry.npmjs.org/ && npm install

ADD . /webpack/

# Port to expose
EXPOSE 3000

这是添加到docker-compose.yml的片段。

webpack:
    build:
      context: .
      dockerfile: Dockerfile.webpack
    command: node server.js
    volumes:
      - .:/webpack
    ports:
      - "3000:3000"

server.js

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.config')

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  inline: true,
  historyApiFallback: true
}).listen(3000, '0.0.0.0', function (err, result) {
  if (err) {
    console.log(err)
  }

  console.log('Listening at 0.0.0.0:3000')
})

- Pietro

Answer 1

感谢这个SO 线程，我找到了解决方案。

docker-compose.yml

version: '2'
services:
  webpack:
    build:
      context: .
      dockerfile: docker/webpack
    volumes_from:
      - webapp:rw

  webapp:
    build:
      context: .
      dockerfile: docker/webapp
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"

docker/webapp

FROM python:latest
ENV PYTHONUNBUFFERED 1

# set working directory to /code/
RUN mkdir /code
WORKDIR /code

# add requirements.txt to the image
ADD ./requirements.txt /code/

# install python dependencies
RUN pip install -r requirements.txt

ADD . /code/

# Port to expose
EXPOSE 8000

docker/webpack

from node:latest

RUN npm install webpack -g

ADD docker/start-webpack.sh .
RUN chmod +x /start-webpack.sh

CMD ./start-webpack.sh

docker/start-webpack.sh

#!/usr/bin/env bash

until cd /code && npm install
do
  echo "Retrying npm install"
done

webpack --watch --watch-polling

- Pietro

Answer 2

当使用webpack-dev-server时，实际的输出会进入内存输出文件系统，因此从Django访问bundle的唯一方法是要么向客户端提供一个URL，该URL指向webpack-dev-server返回bundle的公共路径，要么扩展静态资源的发现和收集方式，以便通过HTTP检索这些资源，如果只有Django可以访问Webpack容器。

既然已经讲到了这点，我建议您不要这样做。相反，使用webpack $ARGS和webpack --watch $DEV_ARGS。这将把输出写入卷中，然后您可以与Django共享它们。

- Filip Dupanović

---

我需要更多的帮助。我对此感到沮丧。在这种情况下，编写容器（在本例中为webpack）的输出到另一个容器（在本例中为web）可以从目录（在本例中为./code）访问它的正确方法是什么？我一整天都在尝试弄清楚它 :/ - Pietro