Static files only served when debug = True and does not when it is False in production for nginx ubuntu 22.04

Viewed 35

I have followed the setup procedures here https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-22-04 and my Django app is running but whenever I turn debug = False it will not load my static files.

Below is my nginx configuration:

server {
    listen 80;
    server_name server_domain_or_IP;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/sammy/myprojectdir;
    }

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

and my settings.py:

STATIC_URL = 'static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'my_site/static')]

I have tried my best, researched a lot online, and followed many links but still fruitless.

In /etc/nginx/sites-available/etal-project, I have:

server {
    server_name 68.183.101.227 etal.ac www.etal.ac;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        alias /home/yustaoab/pyapps/etal-project/static/;
    }

    location media/ {
        root /home/yustaoab/pyapps/etal-project;
    }


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

In my base html:

{% load static %}
{% load humanize %}
<!doctype html>
<html lang="en" dir="ltr">
<head>
    <!-- Meta data -->
    <meta charset="UTF-8">

    <meta content="" name="">
    <meta content="" name="author">
    <meta name="keywords" content=""/>
    <link rel="icon" type="image/x-icon" href="{% static 'img/logo.ico' %}" />
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/all.css' %}">
        <link rel="stylesheet" href="{% static 'css/morris.css' %}">
        <link rel="stylesheet" href="{% static 'css/style.css' %}">
        <link rel="stylesheet" href="{% static 'css/dark-style.css' %}">
        <link rel="stylesheet" href="{% static 'css/color-styles.css' %}">
        <link rel="stylesheet" href="{% static 'css/skin-modes.css' %}">
        <link rel="stylesheet" href="{% static 'css/p-scroll.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/p-scroll.css' %}">
        <link rel="stylesheet" href="{% static 'css/sidemenu-closed.css' %}">
        <link rel="stylesheet" href="{% static 'css/jquery-jvectormap-2.0.2.css' %}">
        <link rel="stylesheet" href="{% static 'css/plugin.css' %}">
        <link rel="stylesheet" href="{% static 'css/sidebar.css' %}">
        <link rel="stylesheet" href="{% static 'css/sidebar-old.css' %}">
        <link rel="stylesheet" href="{% static 'css/sidebar2.css' %}">
        <link rel="stylesheet" href="{% static 'css/side-bar.css' %}">
        <link rel="stylesheet" href="{% static 'css/sidemenu-responsive-tabs.css' %}">
        <link id="theme" rel="stylesheet" type="text/css" media="all" href="{% static 'css/color15.css">
        <link rel="stylesheet" href="{% static 'css/demo.css' %}">
        <link rel="stylesheet" href="{% static 'css/mine.css' %}">
        <link rel="stylesheet" href="{% static 'css/a.css' %}">
        <link rel="stylesheet" href="{% static 'css/accordion.css' %}">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    {% block title %}
    {% endblock title %}

</head>


    <body class="app sidebar-mini">
        {{ form.media }}
        <!-- Global Loader-->

        <div class="page">
            <div class="page-main">
                <!-- Navbar-->
                <header class="app-header header">
                    <!-- Navbar Right Menu-->
                    <div class="container-fluid">
                        <div class="d-flex">
                            <a class="header-brand">
                                <a href="{% url 'index' %}"><img src="" class="logo2" alt="Logo"> <strong class="text-dark-green"></strong></a>
                            </a>
                            {% if user.is_authenticated %}
                            <!-- Sidebar toggle button-->
                            <div class="d-flex order-lg-2 ml-auto">
                                <div class="dropdown d-sm-flex d-none header-message">
                                    <a class="nav-link icon" href="{% url 'collab' %}">
                                        <strong class="text-black">Collab</strong>
                                    </a>
                                </div>
                                <div class="dropdown d-sm-flex d-none header-message">
                                    <a class="nav-link icon" data-toggle="dropdown">
                                        <strong class="text-black">Discover</strong>
                                    </a>
                                </div>

                                <div class="dropdown d-sm-flex d-none header-message">
                                    <a class="nav-link icon" data-toggle="dropdown">
                                        <strong class="text-black">Community</strong>
                                    </a>
                                </div>

                                <div class="dropdown d-sm-flex d-none header-message">
                                    <a class="nav-link icon" href="{% url 'envelope_notification' %}">
                                        <i class="fa fa-envelope text-info fa-2x"></i>
                                        {% if user.envelope_unreads > 0 %}
                                        <span class=" nav-unread badge badge-danger badge-pill">{{user.envelope_unreads}}</span>
                                        {% else %}
                                        {% endif %}
                                    </a>
                                </div>
                                <div class="dropdown d-sm-flex d-none header-message">
                                    <a class="nav-link icon" href="{% url 'bell_notification' %}">
                                        <i class="fa fa-bell text-info fa-2x"></i>
                                        {% if user.bell_unreads > 0 %}
                                        <span class=" nav-unread badge badge-danger badge-pill">{{user.bell_unreads}}</span>
                                        {% else %}
                                        {% endif %}
                                    </a>

                                </div>

                                <div class="dropdown d-sm-flex d-none header-message">
                                    <a class="nav-link icon" href="{% url 'researcher_profile' %}">
                                        {% if user.photograph %}
                                            <img src="{{ user.photographURL }}" alt="Photograph" class="profile-small">
                                        {% else %}
                                            <i class="fa fa-user-circle text-info fa-2x"></i>
                                        {% endif %}
                                    </a>
                                </div>
                                <button class="navbar-toggler navresponsive-toggler d-sm-none" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
                                    aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
                                    <span class="navbar-toggler-icon fa fa-th-list text-white"></span>
                                </button>
                                <!--Navbar -->

                            </div>
                            {% else %}
                            <!-- Sidebar toggle button-->
                            <div class="d-flex order-lg-2 ml-auto">
                                <div class="dropdown d-sm-flex d-none header-message">
                                            <a class="btn fw-500 ms-lg-4" href="{% url 'join' %}">
                          <strong class="text-dark">Join</strong>
                            </a>
                                </div>
                                <div class="dropdown d-sm-flex d-none header-message">
                                            <a class="btn fw-500 ms-lg-4 btn-outline-info" href="{% url 'login' %}">
                          <strong>Login</strong>
                            </a>
                                </div>

                                <button class="navbar-toggler navresponsive-toggler d-sm-none" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
                                    aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
                                    <span class="navbar-toggler-icon fa fa-th-list text-white"></span>
                                </button>
                                <!--Navbar -->

                            </div>
                            {% endif %}
                        </div>
                    </div>
                </header>
                <div class="mb-1 navbar navbar-expand-lg  responsive-navbar navbar-dark d-sm-none bg-white">
                    <div class="collapse navbar-collapse" id="navbarSupportedContent-4">
                        <br>
                        <br>
                        {% if user.is_authenticated %}
                        <div class="d-flex order-lg-2 ml-auto">
                            <div class="dropdown  d-md-flex header-contact">
                                <a class="nav-link icon" href="{% url 'collabs' %}">
                                    <strong class="text-black">Collab</strong>
                                </a>
                            </div>
                            <div class="dropdown d-md-flex header-message">
                                <a class="nav-link icon" data-toggle="dropdown">
                                    <strong class="text-black">Discover</strong>
                                </a>
                            </div>
                            <div class="dropdown d-md-flex header-message">
                                <a class="nav-link icon" data-toggle="dropdown">
                                    <strong class="text-black">Community</strong>
                                </a>
                            </div>

                            <div class="dropdown  d-md-flex header-contact">
                                <a class="nav-link icon" href="{% url 'envelope_notification' %}">
                                    <i class="fa fa-envelope text-info fa-2x"></i>
                                    {% if user.envelope_unreads > 0 %}
                                    <span class="nav-unread badge badge-danger badge-pill">{{user.envelope_unreads}}</span>
                                    {% else %}
                                    {% endif %}
                                </a>
                            </div>
                            <div class="dropdown d-sm-flex d-none header-message">
                                <a class="nav-link icon" href="{% url 'bell_notification' %}">
                                    <i class="fa fa-bell text-info fa-2x"></i>
                                    {% if user.bell_unreads > 0 %}
                                    <span class=" nav-unread badge badge-danger badge-pill">{{user.bell_unreads}}</span>
                                    {% else %}
                                    {% endif %}
                                </a>

                            </div>

                            <div class="dropdown d-md-flex header-message">
                                <a class="nav-link icon" href="">
                                    {% if user.photograph %}
                                        <img src="{{ user.photographURL }}" alt="Photograph" class="profile-small">
                                    {% else %}
                                        <i class="fa fa-user-circle text-info fa-4x"></i>
                                    {% endif %}
                                </a>

                            </div>
                        </div>
                        {% else %}
                        <div class="d-flex order-lg-2 ml-auto">
                            <div class="dropdown d-sm-flex d-none header-message">
                                        <a class="btn fw-500 ms-lg-4" href="{% url 'join' %}">
                                        <strong class="text-dark">Join</strong>
                                        </a>
                            </div>
                            <div class="dropdown d-sm-flex d-none header-message">
                                        <a class="btn fw-500 ms-lg-4 btn-outline-info" href="{% url 'login' %}">
                                        <strong>Login</strong>
                                        </a>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                <!--/.Navbar -->
                {% if 'login' in request.path or 'create-account' in request.path or 'reset-password' in request.path or '/join' in request.path %}


                {% elif user.is_authenticated %}
                <!-- Sidebar menu-->
                <div class="app-sidebar__overlay" data-toggle="sidebar"></div>
                <aside class="app-sidebar bg-white">
                    <ul class="side-menu">
                        <br>
                        <li class="slide bg-info">
                            <a class="side-menu__item bg-info" data-toggle="slide" href="{% url 'researcher_profile' %}"><i class="fas fa-user fa-1x mr-1"></i><span class="side-menu__label">Profile</span></a>
                        </li>
                        <li class="slide bg-info">
                            <a class="side-menu__item bg-info" data-toggle="slide" href="{% url 'researcher_board' %}"><i class="fas fa-chalkboard-teacher fa-1x mr-1"></i></i><span class="side-menu__label">Dashboard</span></a>
                        </li>
                        <li class="slide bg-info">
                            <a class="side-menu__item bg-info" data-toggle="slide" href="{% url 'collabs' %}"><i class="fa fa-comments fa-1x mr-1"></i></i><span class="side-menu__label">Collabs</span></a>
                        </li>
                        <li class="slide bg-info">
                            <a class="side-menu__item bg-info" data-toggle="slide" href="{% url 'initiated_collabs' %}"><i class="fas fa-american-sign-language-interpreting fa-1x mr-1"></i></i><span class="side-menu__label">Initiated Collabs</span></a>
                        </li>
                        <li class="slide bg-info">
                            <a class="side-menu__item bg-info" data-toggle="slide" href="{% url 'accepted_collabs' %}"><i class="fas fa-handshake fa-1x mr-1"></i></i><span class="side-menu__label">Accepted Collabs</span></a>
                        </li>
                        <li class="slide bg-info">
                            <a class="side-menu__item bg-info" data-toggle="slide" href=""><i class="fas fa-check-circle fa-1x mr-1"></i></i><span class="side-menu__label">Concluded Collabs</span></a>
                        </li>
                        <li class="slide bg-info">
                            <a class="side-menu__item bg-info" data-toggle="slide" href=""><i class="fas fa-tools fa-1x mr-1"></i></i><span class="side-menu__label">Collab Tools</span></a>
                        </li>
                        <li class="slide bg-info">
                            <a class="side-menu__item bg-info" data-toggle="slide" href=""><i class="fas fa-copy fa-1x mr-1"></i><span class="side-menu__label">Templates</span></a>
                        </li>
                        <li class="slide bg-info">
                            <a class="side-menu__item bg-info" data-toggle="slide" href="{% url 'logout' %}"><i class="fa fa-sign-out-alt fa-1x mr-1"></i><span class="side-menu__label">Sign out</span></a>
                        </li>
                    </ul>
                </aside>
                <!--side-menu-->
                {% else %}
                {% endif %}

                {% block content %}

                {% endblock content %}
                    <!--footer-->
                    <footer class="footer">

                            <div class="row">
                                <div class="col-md-2">

                                </div>
                                <div class="col-md-8">

                                    <div class="text-dark">Copyright &copy; <strong class="text-info">Et al.</strong> <span class="year"></span></div>
                                </div>
                                <div class="col-md-2">

                                </div>
                            </div>
                        </div>
                    </footer>
                    <!-- End Footer-->
                </div>
            </div>
        </div>

        <a href="#top" id="back-to-top"><i class="fas fa-angle-up "></i></a>
        <script src="{% static 'js/jquery.js' %}"></script>
    <script src="{% static 'js/jquery.sparkline.min.js' %}"></script>
    <script src="{% static 'js/jquery.sparkline.min0.js' %}"></script>
        <script src="{% static 'js/selectize.min.js' %}"></script>
        <script src="{% static 'js/jquery.tablesorter.min.js' %}"></script>
    <script src="{% static 'js/circle-progress.min.js' %}"></script>
    <script src="{% static 'js/jquery.rating-stars.js' %}"></script>
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/sidemenu.js' %}"></script>
    <script src="{% static 'js/sidemenu-responsive-tabs.js' %}"></script>
        <script src="{% static 'js/left-menu.js' %}"></script>
    <script src="{% static 'js/p-scroll.js' %}"></script>
    <script src="{% static 'js/p-scroll-1.js' %}"></script>
    <script src="{% static 'js/jquery.mask.min.js' %}"></script>
    <script src="{% static 'js/jquery.peity.min.js' %}"></script>
    <script src="{% static 'js/jquery.knob.js' %}"></script>
    <script src="{% static 'js/othercharts.js' %}"></script>
        <script src="{% static 'js/apexcharts.js' %}"></script>
        <script src="{% static 'js/chart.bundle.js' %}"></script>
        <script src="{% static 'js/jquery-jvectormap-2.0.2.min.js' %}"></script>
            <script src="{% static 'js/jquery-jvectormap-world-mill-en.js' %}"></script>
            <script src="{% static 'js/gdp-data.js' %}"></script>
            <script src="{% static 'js/jquery-jvectormap-us-aea-en.js' %}"></script>
            <script src="{% static 'js/jquery-jvectormap-uk-mill-en.js' %}"></script>
            <script src="{% static 'js/jquery-jvectormap-au-mill.js' %}"></script>
            <script src="{% static 'js/jquery-jvectormap-ca-lcc.js' %}"></script>
        <script src="{% static 'js/jvectormap.js' %}"></script>
    <script src="{% static 'js/counterup.min.js' %}"></script>
    <script src="{% static 'js/waypoints.min.js' %}"></script>
    <script src="{% static 'js/sidebar.js' %}"></script>
    <script src="{% static 'js/index5.js' %}"></script>
    <script src="{% static 'js/custom.js' %}"></script>
        <script src="{% static 'js/scripts.js' %}"></script>
        <script src="{% static 'js/select2.js'  %}"></script>
        <script src="{% static 'js/chart.js/jquery-1.6.3.min.js'  %}"></script>
        <script src="{% static 'js/chart.js/jquery-1.9.1.min.js'  %}"></script>
        <script src="{% static 'js/horizontal-menu.js'  %}"></script>
        <script src="{% static 'js/sticky.js'  %}"></script>
        <script src="{% static 'js/chart.min.js'  %}"></script>
        <script src="{% static 'js/chart.extension.js'  %}"></script>
        <script src="{% static 'js/morris.min.js'  %}"></script>
        <script src="{% static 'js/raphael.min.js'  %}"></script>
        <script src="{% static 'js/index4.js'  %}"></script>
        <script src="{% static 'js/accordion.js' %}"></script>
        <script src="{% static 'js/accordion.min.js' %}"></script>
        <script src="{% static 'js/accordion-Wizard-Form.js' %}"></script>
        <script src="{% static 'js/wizard.js' %}"></script>
        <script src="{% static 'js/reconnecting-websocket.js' %}"></script>

        <script data-search-pseudo-elements defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" crossorigin="anonymous"></script>

    </body>
</html>

The site is https://etal.ac
1 Answers

I think this is due to the fact that in your project url.py there is a line:

if settings.DEBUG:
    urlpatterns += static(....)

I also recommend that you replace root with alias:

location /static/ {
        alias /home/sammy/myprojectdir;
    }

and execute the statiс collection command:

python3 manage.py collectstatic

and lastly, make sure that you do not have the conditions for checking the debug mode anywhere

UPDATE: Make sure nginx looks for static where you have STATIC_ROOT:

location /static/ {
        alias /home/sammy/myprojectdir/static/;
    }

STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
Related