CODEWITHSUNDEEP
reactjsnginxhttps
Kevin
Kevin

Reputation: 83

Why can NGINX not load my react app with the right css & js files

So the issue i am facing is very frustating because is not clear to me what the problem is. I will do my best to describe it as best as i can.

I have a kubernetes cluster running in Azure. I have two components running which is a nginx ingress load balancer and a react application that is also running on a nginx server. Both services are running on their own pod. The load balancer is directing traffic to my react application via HTTPS.

Before this implementation i was exposing the react application directly to the internet. That was working good without any issue's since i am using the load balancer my react app does not work anymore.

This is the error that i am getting: error1 error2

What the errors are saying is that the js and css files are loaded with the index.html code, so thats why my react app cannot be loaded. I tried to figure out why this is happening, but did not have any success. I also checked the files on the server and there they are not showing the content of the index.html files. They are showing the content that came out of my react build which is correct.

This is my config file for nginx:

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

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

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

The contents of my html folder:

Hope somebody can help me with this, thanks in advance and if you need more info pls let me know.

Upvotes: 3

Views: 4404

Answers (3)

irfan Quresh
irfan Quresh

Reputation: 59

Static Block required to map static files

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name my_server_name;

    proxy_read_timeout 300;
    proxy_connect_timeout 300;
    proxy_send_timeout 300;

    location / {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_bind 127.0.0.1;
        proxy_pass http://localhost:3000/;
        proxy_ssl_session_reuse off;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }


    location /static/ {
       root /home/myusername/my-react-app-dir/build/;
    }
}

Upvotes: -1

Kevin
Kevin

Reputation: 83

So the issue was with my nginx ingress. This annotation was messing with the routing of my frontend application:

nginx.ingress.kubernetes.io/rewrite-target

My website is working!

Upvotes: 2

Steve Holgado
Steve Holgado

Reputation: 12089

Try adding try_files to your location block:

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

It will first look for the file in your root directory.

If it cannot find the file, it will serve your index.html file, which is what you want for a single page app.

Failing that, it will fall back to 404.

I hope this helps.

Upvotes: 1

Related Questions