Nginx with React

17 Views Asked by At

I have a React app that I want to use Nginx so I can proxy api requests. I'm running it on http://127.0.0.1:5173. I installed Nginx and I know it's running since when I change the conf file to

  server {
    listen       8080;
    server_name  localhost;

    ssl_certificate localhost.crt;
    ssl_certificate_key localhost.key;

    location /portfolio {
      proxy_pass https://api.coingecko.com/api/v3/ping;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

and go to localhost:8080 on the browser I see the nginx welcome page. When I change

  listen 5173
  server_name 127.0.0.1

and check the Network tab in the inspection tool on the browser, I don't see nginx as the server under Response Headers, so I'm not sure it's working properly.

I'm also trying to test if nginx will proxy a request from a public api in my react app

 useEffect(() => {
   const testurl = 'http://127.0.0.1:5173/portfolio';
     axios.get(testurl)
        .then((response) => {
           console.log(response);
   })
 }, []);

But it doesn't seem to be working. Am I correct that because the /portfolio that nginx should then change the request url from http://127.0.0.1:5173/portfolio to https://api.coingecko.com/api/v3/ping? Thanks.

0

There are 0 best solutions below