Dockerized Django与webpackDevServer

时间:2016-12-09 10:53:44

标签: django docker webpack docker-compose dockerfile

我需要一些Docker配置方面的帮助,以使Django能够在开发模式下使用webpack dev服务器。我希望django docker容器能够访问webpack生成的包。

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

到目前为止,我只设法使用django dockerized app,然后运行npm install&&节点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

搬运工-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')
})

2 个答案:

答案 0 :(得分:3)

感谢这个SO thread我找到了解决方案。

<强>搬运工-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"

<强>搬运工/ web应用

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

<强>搬运工/的WebPack

from node:latest

RUN npm install webpack -g

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

CMD ./start-webpack.sh

<强>搬运工/ start-webpack.sh

#!/usr/bin/env bash

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

webpack --watch --watch-polling

答案 1 :(得分:1)

使用webpack-dev-server时,实际输出转到in-memory output filesystem,因此从Django访问捆绑包的唯一方法是向客户端提供到捆绑包的公共路径的URL由webpack-dev-server返回,或者如果只有Django可以访问Webpack容器,则扩展静态资产的发现和收集方式,以便通过HTTP检索这些资产。

现在已经涵盖了,我建议你不要这样做。相反,请使用webpack $ARGSwebpack --watch $DEV_ARGS。这会将输出写入卷,然后您可以与Django共享。