Montando Django REST framework y React en un mismo servidor con Nginx

Supongamos que tenemos un proyecto que vivirá en la siguiente URL: miproyecto.com

El frontend está hecho en React y queremos que se comunique con un backend hecho en Django REST Framework. Pero sólo disponemos de un servidor con Nginx para montar ambos.

Cuando llamemos a miproyecto.com/ Nginx debe servir los archivos estáticos generados por React. A la par React necesita llamar a nuestra API en Django

Podríamos crear un reverse proxy con Nginx, y cuando llamemos a api.miproyecto.com/ redireccionar a nuestra API (que conectaremos por medio de uWSGI).

Pero supongamos que nuestro cliente no quiere agregar subdominios o no tenemos acceso a crearlos, deberemos montar nuestra API en el mismo servidor pero en una ruta específica miproyecto.com/api/.

La solución: Redireccionar cuando se llame a un path específico en la configuración de Nginx

La siguiente es una configuración para React

server {
    listen 80;
    listen [::]:80;
    server_name miproyecto.com;

    location / {
        root /react/files/path/;
        try_files $uri /index.html;
    }
}

Agregaremos a ese archivo el redireccionamiento hacia nuestra API.

server {
    listen 80;
    listen [::]:80;
    server_name miproyecto.com;

    location /api/ {
        try_files $uri @app;
    }
    location @app {
        rewrite  ^/api/(.*) /$1 break;
        include uwsgi_params;
        uwsgi_pass unix:///tmp/uwsgi.sock;
    }
    location / {
        root /react/files/path/;
        try_files $uri /index.html;
    }
}

Con la línea location /api/ estamos redirigiendo las llamadas hacia nuestra API, pero ésta no está diseñada para procesar la cadena de texto /api/ dentro de sus rutas.

Es por eso que agregamos la línea rewrite  ^/api/(.*) /$1 break, en ella se está reescribiendo nuestra uri para que le llegue la llamada a nuestra API sin la cadena de texto no deseada.