Docker

Question

我是网络开发的新手，我运行遇到了一个奇怪的错误。我有一个 React/Django 应用程序，我正在尝试使用 nginx 和 docker 进行生产。 Django 运行s 在 postgres 数据库上，nginx 只是将端口 80 重新路由到我的反应和 django 端口。

当我使用

在本地部署应用程序时

npm run build
serve -s build

一切如愿。

然而，通过 Docker 做同样的事情却不会。

我有一个构建 React 应用程序的 Docker 文件：

FROM node:12.18.3-alpine3.9 as builder
WORKDIR /usr/src/app
COPY ./react-app/package.json .
RUN apk add --no-cache --virtual .gyp \
        python \
        make \
        g++ \
    && npm install \
    && apk del .gyp
COPY ./react-app .
RUN npm run build
FROM node:12.18.3-alpine3.9
WORKDIR /usr/src/app
RUN npm install -g serve
COPY --from=builder /usr/src/app/build ./build

现在当我使用

docker-compose build
docker-compose up

我看到我的 Django、React、Postgres 和 nginx 容器都是运行ning，nginx 在端口 80 可见。当我在浏览器中打开 localhost 时，我看到 nginx 正在寻找一些静态反应正确目录中的文件。但是，它正在寻找的反应文件与静态文件具有不同的哈希值。 nginx 和 react 容器的静态文件是一样的。所以不知何故，我的 asset-manifest.json 包含错误的文件名。知道是什么原因造成的，或者我该如何解决这个问题？

编辑：添加了 docker-compose.yml:

version: "3.7"

services:
  django:
    build:
      context: ./backend
      dockerfile: Dockerfile
    volumes:
      - django_static_volume:/usr/src/app/static
    expose:
      - 8000
    env_file:
      - ./backend/.env
    command: gunicorn core.wsgi:application --bind 0.0.0.0:8000
    depends_on:
      - db
  db:
    image: postgres:12.0-alpine
    volumes:
      - postgres_data:/var/lib/postgresql/data/
    env_file:
      - ./postgres/.env
  react:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    volumes:
      - react_static_volume:/usr/src/app/build/static
    expose:
      - 5000
    env_file:
      - .env
    command: serve -s build
    depends_on:
      - django
  nginx:
    restart: always
    build: ./nginx
    volumes:
      - django_static_volume:/usr/src/app/django_files/static
      - react_static_volume:/usr/src/app/react_files/static
    ports:
      - 80:80
    depends_on:
      - react

volumes:
  postgres_data:
  django_static_volume:
  react_static_volume:

Answer 1

您需要运行在单独的容器中进行 React 吗？这样做有什么理由吗？（可能是）

在我的方法中，我在 nginx Docker 文件中构建 React 静态文件，并将它们复制到 /usr/share/nginx/html。然后 nginx 在 location /.

提供它

nginx Docker文件

# The first stage
# Build React static files
FROM node:13.12.0-alpine as build

WORKDIR /app/frontend
COPY ./frontend/package.json ./
COPY ./frontend/package-lock.json ./
RUN npm ci --silent
COPY ./frontend/ ./
RUN npm run build

# The second stage
# Copy React static files and start nginx
FROM nginx:stable-alpine
COPY --from=build /app/frontend/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

nginx 配置文件

server {
    listen 80;
    server_name _;
    server_tokens off;
    client_max_body_size 20M;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        try_files $uri @proxy_api;
    }
    location /admin {
        try_files $uri @proxy_api;
    }

    location @proxy_api {
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Url-Scheme $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass   http://backend:8000;
    }

    location /django_static/ {
        autoindex on;
        alias /app/backend/server/django_static/;
    }
}

Docker-撰写

version: '2'

services:
    nginx: 
        restart: unless-stopped
        build:
            context: .
            dockerfile: ./docker/nginx/Dockerfile
        ports:
            - 80:80
        volumes:
            - static_volume:/app/backend/server/django_static
            - ./docker/nginx/development:/etc/nginx/conf.d
        depends_on: 
            - backend
    backend:
        restart: unless-stopped
        build:
            context: .
            dockerfile: ./docker/backend/Dockerfile
        volumes:
            
        entrypoint: /app/docker/backend/wsgi-entrypoint.sh
        volumes:
            - static_volume:/app/backend/server/django_static
        expose:
            - 8000        

volumes:
    static_volume: {}

请查看我的文章 Docker-Compose for Django and React with Nginx reverse-proxy and Let's encrypt certificate 了解更多详情。 docker-compose 中还有如何颁发 Let's encrypt 证书和更新证书的示例。如果您需要更多帮助，请告诉我。

Docker - 服务的 React 应用程序，asset-manifest.json 文件名不正确

Docker - served react app, asset-manifest.json with incorrect filenames

reactjs

django

nginx

django-react

nginx Docker文件

nginx 配置文件

Docker-撰写