Unable to serve static file in Django deployed to production in Digital ocean

Question

Currently I deployed my django app in Digital ocean droplet. In localhost it works well but it cant serve js/css files in static folder when deployed to prod. Here are configs:

server {
     server_name keywordprocessor.prodsite.com www.keywordprocessor.prodsite.com>

     location = /favicon.ico { access_log off; log_not_found off; }
     location /static/ {
        root /root/projects/backend/crawler;
     }
     location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
     }
     ...
}

BY digital oceans default, the project resides inside root directory

    `cd projects` `pwd`  returns /root/projects/

Settings

     # Static files (CSS, JavaScript, Images)
     # https://docs.djangoproject.com/en/4.0/howto/static-files/

     STATIC_URL = "/static/"
     STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
     STATIC_ROOT = os.path.join(BASE_DIR, "/")

THis is how the project folder looks like

  backend/
        crawler/
        static/
        templates
  .gitignore
  requirements.txt

/etc/systemd/service/gunicorn.service

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


 [Service]
 User=root
 Group=root
 WorkingDirectory=/root/projects/backend/crawler
 ExecStart=/usr/local/bin/gunicorn \
      --access-logfile - \
      --workers 3 \
      --bind unix:/run/gunicorn.sock \
      crawler.wsgi:application


 [Install]
 WantedBy=multi-user.target


 

All js and css files cant be served

  `Failed to load resource: the server responded with a status of 404 (Not Found)`
 

It does load the page but css messed up. I did some googling for possible solutions, nothing works for me.