webpackDevServerでドッキングされたDjango

Question

開発モードでwebpack dev serverでDjangoを動作させるには、Dockerの設定に関する助けが必要です。私はdjangoのdockerコンテナがwebpack生成バンドルにアクセスできるようにしたい。

私は、コンテナがdocker-composeでボリュームとファイルをどのように共有しているかを理解するのに苦労しています。

これまで私はdjangoのドッキングされたアプリケーションが正常に動作していましたが、npmを実行すると& & 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 

ドッカー/スタート - 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からバンドルにアクセスする唯一の方法は、バンドルがwebpack-dev-serverによって返されるパブリックパスへのURLをクライアントに提供するか、 DjangoだけがWebpackコンテナにアクセスできる場合、taticアセットが検出され、HTTP経由でこれらを取得するために収集されます。

これで説明したように、私はあなたがそれをしないことをお勧めしたいと思います。代わりに、webpack $ARGSとwebpack --watch $DEV_ARGSを使用してください。これにより出力がボリュームに書き込まれ、Djangoと共有することができます。