How to set up a docker project with django and next

Hi there,

To serve both Django and Next.js from the same DigitalOcean IP using nginx, you will need to set up a reverse proxy. This means that nginx will listen for requests and forward them to the appropriate application based on the path of the URL or the port number.

Here’s a general template of what your nginx configuration file might look like, located at /etc/nginx/sites-available/default or /etc/nginx/conf.d/default.conf, depending on the Docker image that you are using:

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;  # NextJS App
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /api {
        proxy_pass http://localhost:8000;  # Django API
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

In this configuration, nginx listens on port 80 (the default HTTP port). It then routes requests to your Django API if the URL path begins with /api and to your Next.js app for all other requests. You’ll replace yourdomain.com with your actual domain name or IP address.

Note that this assumes your Django application is set up to treat /api as a base path for all its routes. If it isn’t, you’ll need to adjust the configuration and your Django routes accordingly.

Also remember to restart or reload nginx after changing the configuration:

sudo systemctl restart nginx

Let me know how it goes!

For more information on Nginx reverse proxy setups, I would recommend the following tutorial:

https://www.digitalocean.com/community/tutorials/how-to-configure-nginx-as-a-reverse-proxy-on-ubuntu-22-04

Hope that this helps!

Best,

Bobby