Ad

Nginx Reverse Proxy Config - 404 Not Found

I have deployed a react app on a remote server (digital ocean), and I want to be able to access the localhost of the server from the react app client-side.

I have tried setting up a reverse proxy with Nginx, however I am getting an awful 404.

The site is deployed, https://www.jonasgroenbek.com. The problem occurs under the game sections when you choose either rock, scissor or paper and then the button to fight the AI.

This is my sites-enabled inside of the Nginx

server {
  root /var/www/jonasgroenbek.com/build;
  index index.html;
  server_name jonasgroenbek.com  www.jonasgroenbek.com;
  location / {
    try_files $uri $uri/ =404;
  }
    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/jonasgroenbek.com/fullchain.pem; # managed b$
    ssl_certificate_key /etc/letsencrypt/live/jonasgroenbek.com/privkey.pem; # managed$
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
location /game {
        rewrite /game/(.*)  /$1 break;
        proxy_pass http://localhost:1234;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
server {
    if ($host = www.jonasgroenbek.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    if ($host = jonasgroenbek.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
  listen 80 default_server;
  listen [::]:80 default_server;
  server_name jonasgroenbek.com  www.jonasgroenbek.com;
    return 404; # managed by Certbot
}

this is the port and path the node.js express service is listening on:

app.listen(PORT,  function(){
console.log(`listening on port:${PORT}...`)
})

app.get("/game/play/:choice", function(req,res){
    pythonProcess = spawn('python',["./script.py", req.params.choice]);
    pythonProcess.stdout.on('data', function(data) {
    res.status(200).send(data.toString('utf-8'))})
})

this is how i fetch from the react app

fetch(`104.248.28.88/game/play/rock`)

Is the problem to detect, because I am slowly losing my sanity.


EDIT

I have tried on both

fetch("104.248.28.88/game/play/rock")

which yields this error message: Game.js:46 GET https://jonasgroenbek.com/jonasgroenbek.com/game/play/rock 404 (Not Found)

and fetch("jonasgroenbek.com/play/rock")

which yields this error message:

Game.js:46 GET https://jonasgroenbek.com/jonasgroenbek.com/game/play/rock 404 (Not Found)

Trying to access it with postman through

jonasgroenbek.com/game/play/rock 

gives following error message:

<html>
    <head>
        <title>404 Not Found</title>
    </head>
    <body bgcolor="white">
        <center>
            <h1>404 Not Found</h1>
        </center>
        <hr>
        <center>nginx/1.14.0 (Ubuntu)</center>
    </body>
</html>
Ad

Answer

The issue is that you're using the IP address instead of the domain you have set on server_name directive. So instead of using that site configuration, it's going to the default Nginx configuration.

Try:

fetch('https://jonasgroenbek.com/game/play/rock')

You can also drop:

    rewrite /game/(.*)  /$1 break;
Ad
source: stackoverflow.com
Ad