node.js - Docker Compose Django、Webpack 和构建静态文件

Question

我正在尝试弄清楚如何在生产构建期间使用 Node 和 Webpack 构建静态文件，并将它们安装为卷，该卷将用于 Django webapp 并用于 Djangocollectstatic。

我已将所有服务分离到其自己的容器中，并且每个服务都有自己的 Dockerfile。

当前的问题是我无法访问由 Django 应用程序内的 webpack 生成的访问文件。问题是，我可以使用 Node 和 Django 的单独 Dockerfile 来实现这一目标，还是应该在一个 Dockerfile 中完成此操作？

Node Dockerfile

FROM node:alpine
WORKDIR ./code
COPY ./package.json ./yarn.lock /code/
COPY ./webpack.base.config.js ./webpack.prod.config.js /code/
RUN yarn install --production
ADD static /code/static/
RUN yarn run prod

Python 应用程序 Dockerfile

FROM python:3.6.2-alpine
ENV PYTHONUNBUFFERED 1

RUN apk update \
  && apk add \
    bash \
    curl \
    build-base \
    postgresql-dev \
    postgresql-client \
    libpq \
    tzdata

    WORKDIR /code
    ADD requirements.txt /code
    RUN pip install --upgrade pip
    RUN pip install -r requirements.txt
    ADD ./ /code
    ENV TZ=Europe/London

    EXPOSE 8000

Docker Compose 生产

version: '3'

services:

  frontend:
    build: docker/services/node
    volumes:
      - static_files:/code/static

  webapp:
    build: .
    env_file:
      - .env
    expose:
      - "8000"
    volumes:
      - ./public:/code/public/
      - static_files:/code/static
    command: ["./docker/scripts/wait-for-it.sh", "database:5432", "--", "./docker/services/webapp/run-prod.sh"]
    depends_on:
      - frontend
      - database

  database:
    image: postgres
    env_file:
      - .env
    expose:
      - "5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data/

  nginx:
    build: docker/services/nginx
    env_file:
      - .env
    ports:
      - "80:80"
    volumes:
      - ./public:/www/public/
    depends_on:
      - webapp
    healthcheck:
      test: ["CMD", "curl", "-f", "http://0.0.0.0:8000"]
      interval: 30s
      timeout: 10s
      retries: 3

volumes:
  postgres_data:
  static_files:

Answer 1

您可以为此使用多阶段构建。在您的情况下，第一阶段将生成静态文件，而第二阶段将打包您的 python 应用程序并从 node.js docker 镜像复制静态文件。生成的图像将仅包含 python 依赖项。

这是多级dockerfile，文档可以在这里找到https://docs.docker.com/develop/develop-images/multistage-build/#use-multi-stage-builds

# static files build stage
FROM node:alpine as static # named as static for easy reference
WORKDIR /code
COPY ./package.json ./yarn.lock /code/
COPY ./webpack.base.config.js ./webpack.prod.config.js /code/
RUN yarn install --production
ADD static /code/static/
RUN yarn run prod

# python app package stage 
FROM python:3.6.2-alpine as final # named as final because it's final :)
ENV PYTHONUNBUFFERED 1

RUN apk update \
  && apk add \
    bash \
    curl \
    build-base \
    postgresql-dev \
    postgresql-client \
    libpq \
    tzdata

WORKDIR /code
ADD requirements.txt /code
RUN pip install --upgrade pip
RUN pip install -r requirements.txt
ADD ./ /code
# This next command has access to the file contents of the previous stage. 
# Ideally you should rewrite the paths to copy the static files from where they have been generated to where they should end up
# The 'from' clause is used to reference the first build stage 
COPY --from=static /code/static/path/to/static/files /code/desired/location


ENV TZ=Europe/London

EXPOSE 8000

然后您可以在 docker-compose 文件中使用这个单个镜像。