Question 98427 in Nginx Question posted in
The official documentation can be found here.

Redirected too many times error on Django React website on Nginx server

First, i understand this question has been asked numerous times and i have crwaled through all solutions and i have been unable to solve my issue. I am getting the above error on Dockerized Django and React Application. I am able to access Django API and Admin site over HTTPS with no issue. However when trying to access the React Site i end up getting the above error. Here is my Nginx configs

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; 
    }


}

I believe the issue is coming from NGINX. If more information is needed i will provide. Could anyone help me fix this issue? Thanks

UPDATE
I am realizing the line try_files $uri $uri/ /index.html; is the one causing the looping redirects. Upon removing it, i can see the page is bale to load but react static is routing through django’s static nginx route hence throwing 404 errors as shown on teh screenshot. Can anyone help me how to route reacts static files?

enter image description here

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"]
Tags:

2

Answers


  1. 0

    I double checked you Nginx configs, I did not see any problem.
    It is necessary to explain a little about the project containers. Did you use Docker-compose or do you have a separate container for Nginx?
    This 404 error is more likely to be related to the container not having access to the .css files.
    Enter to Nginx container and check if the following path is available inside the container?

    /static/css/*.css

    please comment on the answers to my questions.we will examine this issue together. I think I can help. I have just solved a similar case.

    Login or Signup to reply.
  2. 0

    When you build a react application, the default path for the static folder is the root of the build folder. by editing your Nginx config file your static files will be loaded.

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

    The problem is you changed the path of the static folder to somewhere else

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search