Config Nginx with NextJs and Django rest framework

Question

front of my site written with .next and back of my site written with DRF(Django rest framework)

how i can configure Nginx to run .next for front and Django for Back? my current Nginx conf is:

server {
        listen 80;
        listen [::]:80;
    
    server_name portal.asem.com www.portal.asem.com;
    
    include snippets/letsencrypt.conf;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    server_name www.portal.asema.com;

    ssl_certificate /etc/letsencrypt/live/portal.asem.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/portal.asem.com/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/portal.asem.com/chain.pem;
    include snippets/ssl.conf;
    include snippets/letsencrypt.conf;

    return 301 https://portal.asem.com$request_uri;
}

server {
    listen 443 ssl http2;
    server_name portal.asem.com;

    ssl_certificate /etc/letsencrypt/live/portal.asem.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/portal.asem.com/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/portal.asem.com/chain.pem;
    include snippets/ssl.conf;
    include snippets/letsencrypt.conf;


    error_page 404 /custom_404.html;
    location = /custom_404.html {
        root /usr/share/nginx/html;
        internal;
    }


        location /STATIC/ {
            root /home/.../asem/static;
        }

        location /MEDIA/ {
            root /home/.../asem;
        }

        location / {
        proxy_pass http://localhost:3000;
            try_files $uri /index.html =404;

        }


        location /admin {
            include proxy_params;
            proxy_pass http://unix:/run/gunicorn.sock;
        }


        location /user {
            include proxy_params;
            proxy_pass http://unix:/run/gunicorn.sock;
        }

my systemd service for nextJs is:

[Unit]
Description=Asem Front
After=syslog.target network.target


[Service]
Environment=NODE_PORT=3000
Type=simple
User=...
Group=www-data
Restart=on-failure
WorkingDirectory=/home/.../asem-frontend
ExecStart=npm start


[Install]
WantedBy = multi-user.target

my next.config.js is :

const withPWA = require('next-pwa');

const settings = {
  env: {
    API_URL : 'http://portal.asem.com/'
  },
  devIndicators: {
    autoPrerender: false,
  },
  pwa: {
    dest: 'public',
  },
};

module.exports = process.env.NODE_ENV === 'development' ? settings : withPWA(settings);

gunicorn of Django Backend is:

[Unit]
Description=gunicorn daemon
Requires=gunicorn.socket
After=network.target

[Service]
User=...
Group=www-data
WorkingDirectory=/home/.../asem
ExecStart=/home/.../asem/.env/bin/gunicorn \
          --access-logfile - \
          --workers 3 \
          --bind unix:/run/gunicorn.sock \
          asem.wsgi:application

[Install]
WantedBy=multi-user.target

i think when front of my site for example need : portal.asem.com/user instead of going to "location/user" in Nginx conf go to "localtion /" and request from front instead of back!? how i can solve this problem?

Config Nginx with NextJs and Django rest framework

0 Answers