使用webpackDevServer的Dockerized Django [英] Dockerized Django with webpackDevServer

问题描述

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

I need some help with a Docker configuration to make Django work with webpack dev server in development mode. I want django docker container to get access to the webpack generated bundle.

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

I'm struggling to understand how containers share files with volumes in docker-compose.

直到现在，我只设法拥有一个工作正常的django dockerized应用，然后运行npm install&&本地节点server.js。

Until now I only managed to have a working django dockerized app and then I run npm install && node server.js locally.

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

And this is my attempt with 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中的代码段

this is the snippet added to 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')
})

推荐答案

感谢此SO

Thanks to this SO thread I found the solution.

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

这篇关于使用webpackDevServer的Dockerized Django的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！