Django-React 应用程序中的静态文件未在生产环境中加载

我正在 Docker 容器中运行 Django 应用程序，但在生产中提供静态文件时遇到问题。本地一切工作正常，但是当我部署到生产环境时，静态文件不会加载，并且出现 404 错误。

以下是我的设置的相关部分：

Django settings.py :

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'build')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

STATIC_URL = '/static/'
MEDIA_URL = '/media/'
STATIC_ROOT = '/vol/web/static'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'build', 'static')]

build 文件夹是由 React 应用程序中的 npm run build 命令生成的。

运行后 collectstatic ，卷 /vol/web/static 已正确填充。然而，浏览器对静态文件显示404错误，例如

GET https://site/static/js/main.db771bdd.js [HTTP/2 404 161ms]
GET https://site/static/css/main.4b763604.css [HTTP/2 404 160ms]

Loading failed for the <script> with source “https://www.aloconcursos.com/static/js/main.db771bdd.js”.

这些文件存在于 build/static 目录中，但我认为浏览器应该使用收集到 /vol/web/static 中的静态文件。

Nginx配置：| ||Dockerfile:

server {
    listen ${LISTEN_PORT};

    location /static {
        alias /vol/static;
    }

    location / {
        uwsgi_pass              ${APP_HOST}:${APP_PORT};
        include                 /etc/nginx/uwsgi_params;
        client_max_body_size    10M;
    }
}

我怀疑文件权限可能存在问题，但在更改权限后错误仍然存​​在。关于可能出现问题或如何进一步调试的任何见解？

FROM python:3.9-alpine

ENV PYTHONUNBUFFERED 1
ENV PATH="/scripts:${PATH}"

RUN pip install --upgrade "pip<24.1"

COPY ./requirements.txt /requirements.txt
RUN apk add --update --no-cache postgresql-client jpeg-dev \
    && apk add --update --no-cache --virtual .tmp-build-deps \
       gcc libc-dev linux-headers postgresql-dev musl-dev zlib zlib-dev libffi-dev \
    && pip install -r /requirements.txt \
    && apk del .tmp-build-deps

RUN mkdir -p /app /vol/web/media /vol/web/static
RUN adduser -D user
RUN chown -R user:user /vol /app

COPY ./app /app
COPY ./scripts /scripts
COPY ./requirements.txt /requirements.txt

RUN chmod -R 755 /vol/web /app /scripts \
    && chmod +x /scripts/*

USER user
WORKDIR /app

VOLUME /vol/web

CMD ["entrypoint.sh"]

任何帮助将不胜感激！

Any help would be greatly appreciated!

问题出在你的 Nginx 配置中。你正在使用 alias 指令来提供静态文件，但 alias 指令不修改 URL，因此 Nginx 会在错误的位置查找文件。

你应该使用 root 指令来代替 alias 。 root 指令会修改 URL，并将请求指向正确的位置。

以下是更新后的 Nginx 配置：

server {
    listen ${LISTEN_PORT};

    location /static {
        root /vol/web;
    }

    location / {
        uwsgi_pass              ${APP_HOST}:${APP_PORT};
        include                 /etc/nginx/uwsgi_params;
        client_max_body_size    10M;
    }
}

这个配置将 /static URL 前缀映射到 /vol/web 目录。 因此，当浏览器请求 /static/js/main.db771bdd.js 时，Nginx 会在 /vol/web/static/js/main.db771bdd.js 中查找文件。

其他建议:

• 确保 /vol/web/static 目录及其内容对 Nginx 进程有读取权限。 可以通过运行 chown -R www-data:www-data /vol/web/static 来实现这一点 (将 www-data 替换为你的 Nginx 用户)。
• 在部署更改后，重启 Nginx ( sudo service nginx restart ) 以加载新的配置。
• 为了更好地调试，可以查看 Nginx 错误日志，看看是否有其他错误信息。

希望这些信息能帮助你解决问题!