dockerized Django with webpackDevServer

Question

我需要一些Docker配置的幫​​助才能使Django在開發模式下使用webpack dev服務器。我想讓django docker容器訪問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 

這是片段加到泊塢窗-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 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 

docker/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，實際輸出去一個in-memory output filesystem，所以從Django訪問捆綁軟件的唯一方法是向客戶端提供URL到公用路徑的地址，該路徑由webpack-dev-server返回，或者擴展到s如果只有Django可以訪問Webpack容器，則會發現並收集tatic資產以通過HTTP檢索這些資產。

現在已經涵蓋了，我建議你不要這樣做。相反，請使用webpack $ARGS和webpack --watch $DEV_ARGS。這會將輸出寫入音量，然後您可以與Django共享音量。