После большого количества ошибок и двойной проверки каталогов я не могу получить от своего сервера доступ к файлам CSS, используя Python, Flask, nginx и gunicorn. Сервер запускает мое флеш-веб-приложение без проблем, но статические файлы не загружаются. Элемент Inspect показывает, что серверу не удалось загрузить статические ресурсы (хотя я проверял свои каталоги бесчисленное количество раз). Я приложил фотографии, чтобы помочь показать потенциальные местоположения проблемы и каталоги. Любые идеи о том, как исправить эту ошибку доступа?
Ошибки, отображаемые элементом inspect
Каталоги
CSSссылка на HTML в layout.html
код Nginx
код layout.html, который ссылается на файл CSS:
<!DOCTYPE html>
<html>
<head>
<!-- Browser taskbar title --->
{% if title %}
<title>{{title}} – HCSS Crusader Interviews</title>
{% else %}
<title>HCSS Crusader Interviews</title>
{% endif %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='main.css')}}">
</head>
<body>
<!-- bootstrap format from https://www.youtube.com/watch?v=QnDWIZuWYW0-->
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<!--
<div>
<img src="/static/img/crest.jpg" width="30" height="30" alt="Crest"/>
</div>
--->
<div class="container">
<a class="navbar-brand mr-4" href="/">HCSS Crusader Interviews</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if current_user.user_type == "admin" %}
<a class="nav-item nav-link" href="/admin" style="color:#ff0000;">New Session</a>
<p class="nav-item nav-link"> </p>
<a class="nav-item nav-link" href="{{url_for('schedule')}}">Schedule</a>
<p class="nav-item nav-link"> </p>
<a class="nav-item nav-link" href="{{url_for('requests')}}">Requests</a>
<p class="nav-item nav-link"> </p>
<a class="nav-item nav-link" href="{{url_for('database')}}">Database</a>
<p class="nav-item nav-link"> </p>
{% endif %} {% if current_user.user_type == "staff" %}
<a class="nav-item nav-link" href="/staff">Schedule</a>
<p class="nav-item nav-link"> </p>
<a class="nav-item nav-link" href="/availability">Edit Availability</a>
<p class="nav-item nav-link"> </p>
{% endif %} {% if current_user.user_type == "parent"%}
<a class="nav-item nav-link" href="/book-interviews">Book Interviews</a>
<p class="nav-item nav-link"> </p>
{% endif %} {% if current_user.is_authenticated %}
<a class="nav-item nav-link" href="/account">Account</a>
<p class="nav-item nav-link"> </p>
<a class="nav-item nav-link" href="/logout">Logout</a> {% else %}
<a class="nav-item nav-link" href="/login">Login</a>
<p class="nav-item nav-link"> </p>
<a class="nav-item nav-link" href="/register">Register</a> {% endif %}
</div>
</div>
</div>
</nav>
</header>
<!-- Accesses bootstrap format for flashed messages -->
<main role="main" class="container">
{% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %}
<div class="alert alert-{{ category }}">
{{ message }}
</div>
{% endfor %} {% endif %} {% endwith %}
<br> {% block content %}{% endblock %}
<br>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>