Nginx无法提供静态文件：Django+React+Docker部署问题求助

我是Web开发新手，在使用Django、React搭配Nginx和Gunicorn部署Web应用时遇到问题：Nginx无法提供静态文件。我的服务器无真实IP地址，因此Nginx部署在localhost上，问题可能源于Docker配置。以下是相关配置文件及目录结构：

Nginx.conf配置 #

server {
    listen 80;
    server_name localhost;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/rroxxxsii/PycharmProjects/web-for-cyclers/backend;
    }

    location /media/ {
        autoindex on;
        autoindex_exact_size off;
        root /home/rroxxxsii/PycharmProjects/web-for-cyclers/backend;
    }


    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
}

Nginx Dockerfile #

FROM nginx:1.24.0-alpine
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d

Docker Compose配置 #

services:

  # Django
  web-backend:
    build: ./backend
    volumes:
      - .:/backend
      - static_volume:/backend/static
      - media_volume:/backend/media
    ports:
      - '8000:8000'
    env_file:
      - backend/web.env
    image: backend
    container_name: django_cycle_api
    command: >
      bash -c "cd ./backend && ./manage.py collectstatic --noinput && ./manage.py migrate  && gunicorn -b 0.0.0.0:8000 core.wsgi:application"
    depends_on:
      - db


  # PostgreSQL
  db:
    image: postgres:14.1-alpine
    restart: always
    env_file:
      - backend/web.env
    ports:
      - '5432:5432'
    volumes:
      - db:/var/lib/postgresql/data

  # React
  web-frontend:
    container_name: cycle_frontend
    build: ./frontend
    expose:
      - 3000
    command: serve -s /usr/src/app/build -l 3000
    depends_on:
      - web-backend
    ports:
      - '3000:3000'

  # Nginx
  nginx:
    image: nginx
    depends_on:
      - web-backend
      - web-frontend
      - db
    ports:
      - '80:80'
    volumes:
      - static_volume:/cycle_proj/static
      - media_volume:/cycle_proj/media


volumes:
  db:
    driver: local
  react_build:
  static_volume:
  media_volume:

前端Dockerfile #

FROM node:18-alpine
WORKDIR /frontend

COPY . .

RUN npm install -g serve
RUN npm install

RUN npm run build

后端Dockerfile #

FROM python:3.11.1

SHELL ["/bin/bash", "-c"]


ENV PYTHONDONTWRITEBYTECODE=1
ENV PYTHONBUFFERED=1

EXPOSE 8000

WORKDIR /backend

RUN pip install --upgrade pip
RUN mkdir /backend/static && mkdir /backend/media

RUN apt update && apt -qy install gcc libjpeg-dev libxslt-dev \
    libpq-dev libmariadb-dev libmariadb-dev-compat gettext cron \
    openssh-client flake8 python3-venv python3-dev locales \
    postgresql postgresql-contrib nginx curl


COPY . .
COPY requirements.txt requirements.txt
RUN pip3 install -r requirements.txt

CMD ["gunicorn","-b","0.0.0.0:8001","core.wsgi:application"]

项目目录结构 #

web-for-cyclers/
  backend/
    core/
      __init.py__
      asgi.py
      settings.py
      urls.py
      wsgi.py
     
    static
    venv
    Dockerfile
    manage.py
    requirements.txt
    web.env
    .dockerignore
    .gitignore

 
  frontend/
    node_modules/
    public/
    src/
    .dockerignore
    Dockerfile
    package.json
    package-lock.json
    .gitignore
    

  nginx/
    Dockerfile
    nginx.conf
  docker-compose.yml

内容的提问来源于stack exchange，提问作者Mihail Bury