在 Nginx 服务器上的 Django React 网站上重定向太多次错误答案

【问题标题】：Redirected too many times error on Django React website on Nginx server在 Nginx 服务器上的 Django React 网站上重定向太多次错误
【发布时间】：2021-11-26 11:35:01
【问题描述】：

首先，我知道这个问题已经被问过很多次了，我已经浏览了所有解决方案，但我一直无法解决我的问题。我在 Dockerized Django 和 React Application 上收到上述错误。我可以毫无问题地通过 HTTPS 访问 Django API 和管理站点。但是，当尝试访问 React 站点时，我最终得到了上述错误。这是我的 Nginx 配置

server {
    listen ${LISTEN_PORT_HTTP};

    server_name example.com;
    server_tokens off;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

     location / {
        return 301 https://$server_name$request_uri;
    }

}

server {
    listen 443 default_server ssl http2;

    server_name example.com;

    ssl_certificate /etc/nginx/ssl/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/live/example.com/privkey.pem;

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


    location /static {
        alias /vol/static;
    }

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

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

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


}

我相信问题来自 NGINX。如果需要更多信息，我会提供。谁能帮我解决这个问题？谢谢

更新我意识到try_files $uri $uri/ /index.html; 是导致循环重定向的行。删除它后，我可以看到页面正在加载，但反应静态路由通过 django 的static nginx 路由，因此抛出404 错误，如屏幕截图所示。谁能帮助我如何路由反应静态文件？

FROM nginxinc/nginx-unprivileged:1-alpine

COPY --from=portfolio-front_react-app /app/build /usr/share/nginx/html
COPY ./default.conf.tpl /etc/nginx/default.conf.tpl
COPY ./uwsgi_params /etc/nginx/uwsgi_params
COPY ./run.sh /run.sh

ENV LISTEN_PORT_HTTP=8000
ENV LISTEN_PORT_HTTPS=443
ENV APP_HOST=app
ENV APP_PORT=9000


USER root

RUN mkdir -p /vol/static && \
    chmod 755 /vol/static && \
    touch /etc/nginx/conf.d/default.conf && \
    chown nginx:nginx /etc/nginx/conf.d/default.conf && \
    chmod +x /run.sh


VOLUME /vol/static

# USER nginx

CMD ["/run.sh"]

【问题讨论】：

你的 nginx 配置看起来不错。似乎nginx只是在/usr/share/nginx/html目录中找不到index.html文件，就像它发生在here一样（参见问题下的讨论）。重新检查您的 docker 构建配置。
感谢您的评论。在检查上述文件夹时，我可以看到build 的内容包括index.html

标签： docker nginx

【解决方案1】：

我仔细检查了你的 Nginx 配置，我没有发现任何问题。有必要稍微解释一下项目容器。你使用了Docker-compose 还是有一个单独的 Nginx 容器？此 404 错误更可能与容器无法访问 .css 文件有关。进入Nginx容器，检查容器内是否有以下路径？

/static/css/*.css

请评论我的问题的答案。我们将一起研究这个问题。我想我能帮上忙。我刚刚解决了一个类似的案例。

【讨论】：

我正在将 React 构建文件夹的内容复制到 /usr/share/nginx/html。我已经访问了 nginx 容器，我可以在那里构建内容。我正在更新我的问题以显示 nginx docker 和 docker compose configs
在此处查看 docker-compose github.com/muteshi/portfolio-app/blob/master/…

【解决方案2】：

在构建 React 应用程序时，静态文件夹的默认路径是构建文件夹的根目录。通过编辑您的 Nginx 配置文件，您的静态文件将被加载。

location ^~ /static {
    root   /usr/share/nginx/html;
}

问题是您将静态文件夹的路径更改为其他位置

【讨论】：