Charleess
Charleess

Reputation: 73

NginX : Serve static content and proxy pass to Node API

I'm running a website composed of an API in a docker on port 8080, and a static folder containing the front-end react app.

The api is at /api

I'm trying to configure NginX to correctly serve this configuration, but I can't seen to figure out how to have both working.

If I setup my default like this:

server {
    root /var/www/html;
        server_name DOMAIN; # managed by Certbot

    location @nodeapp {
        # Redirect to the api
        proxy_pass   http://localhost:8080;
    }

    location / {
        # Map all the routes to the index.html
        try_files $uri @nodeapp;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/DOMAIN/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/DOMAIN/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

Then everything is redirected to my API, and the static content is not delivered if not explicitly specified (e.g. going to https://host/index.html)

If I add try_files $uri $uri/ @nodeapp; to serve the root folder as a directory, the index gets served, but I can't access the API anymore, it always serve the react app

I also tried to add

location /api/ {
    proxy_pass   http://localhost:8080
}

But no difference

What am I doing wrong ?

Upvotes: 2

Views: 939

Answers (1)

Charleess
Charleess

Reputation: 73

I found the answer, the react app I was using was setup with a service worker, which was messing with the routing. I removed it and it works like a charm now !

Upvotes: 1

Related Questions