用webpackDevServer Docker化Django

我需要一些Dockerconfiguration的帮​​助，使Django能够在开发模式下使用webpack dev服务器。 我想Django泊坞窗容器访问webpack生成的包。

我正在努力了解容器如何在docker-compose中与卷共享文件。

到目前为止，我只设法有一个工作的Django dockerized应用程序，然后在本地运行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 

泊坞窗，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') }) 

Answer 1

感谢这个SO 线程，我find了解决scheme。

泊坞窗，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 

Answer 2

当使用webpack-dev-server ，实际的输出会转到内存中的输出文件系统 ，所以从Django访问bundle的唯一方法是为客户端提供一个到公共path的URL， webpack-dev-server ，或者扩展如何发现和收集静态资产以通过HTTP检索这些资源，只要Django能够访问Webpack容器。

现在已经涵盖了，我build议你不要这样做。 相反，使用webpack $ARGS和webpack --watch $DEV_ARGS 。 这会将输出写入到卷中，然后您可以与Django共享这些输出。