使用 gunicorn nginx 在 aws 上部署 django 应用程序后，css 无法正常工作

Question

我已经在 EC2 上部署了我的 django 项目，但部署后 css 无法正常工作。 我还运行了 colcectstatic 命令，但仍然不走运，当我签入 nginx error.log 时，它在 css 文件前面显示权限被拒绝，如下所示：

2022/07/18 17:38:01 [错误] 2262#2262: *4 open() "/home/ubuntu/theoj/online_judge_project/staticindex.css" 失败（13：权限被拒绝），客户端：49.38.225.106，服务器：13.126.144.76，请求：“GET /static/index.css HTTP/1.1”，主机：“13.126.144.76”，

我的项目目录结构：

online_judge_project/
                    account/
                    homesrc/
                    language/
                    media/
                    oj/ /*name of my project*/
                      settings.py
                    problempg/
                    static/ /* folder containing css files*/
                    staticfiles/ /* folder made after running command collectstatics*/
                    template/
                    manage.py

**设置.py：**

"""
Django settings for oj project.

Generated by 'django-admin startproject' using Django 4.0.5.

For more information on this file, see
https://docs.djangoproject.com/en/4.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.0/ref/settings/
"""

from importlib.resources import path
from pathlib import Path
import os
from .info import *

EMAIL_USE_TLS = EMAIL_USE_TLS
EMAIL_HOST = EMAIL_HOST
EMAIL_HOST_USER = EMAIL_HOST_USER
EMAIL_HOST_PASSWORD = EMAIL_HOST_PASSWORD
EMAIL_PORT = EMAIL_PORT
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR=os.path.join(BASE_DIR,'template')
FILES_DIR=os.path.abspath(os.path.join(BASE_DIR,'language'))

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!

SECRET_KEY = "django-insecure-14$m%70aq1-xqy9z2jt9nva)f_&y5xba3j3g40!3oaqvvyu8_p"

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False

ALLOWED_HOSTS = ["my_IP_address","localhost"]


# Application definition

INSTALLED_APPS = [
    'widget_tweaks',
    'account.apps.AccountConfig',
    'problempg.apps.ProblempgConfig',
    'homescr.apps.HomescrConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'ckeditor',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'oj.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [TEMPLATE_DIR],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'oj.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/
STATIC_ROOT= os.path.join(BASE_DIR,'staticfiles')
STATIC_URL = 'static/'
MEDIA_ROOT= os.path.join(BASE_DIR,'media')
MEDIA_URL='/media/'
LOGOUT_REDIRECT_URL = "index"

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

# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

from django.contrib.messages import constants as messages

MESSAGE_TAGS = {
    messages.DEBUG: 'alert-info',
    messages.INFO: 'alert-info',
    messages.SUCCESS: 'alert-success',
    messages.WARNING: 'alert-warning',
    messages.ERROR: 'alert-danger',
}

nginx 配置文件：

server {
    listen 80;
    server_name 13.126.144.76;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/ubuntu/theoj/online_judge_project;
    }

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

Answer 1

为了让静态文件为我正确加载，我必须将它们放入 /var/ 文件夹中的目录中，然后添加location /static { autoindex on; root /var/WebApp_Static_Files/site_static; } location /static { autoindex on; root /var/WebApp_Static_Files/site_static; } location /static { autoindex on; root /var/WebApp_Static_Files/site_static; }到该站点的 nginx 配置。 确保 /var/WebApp_Static_Files 目录有 777 权限

澄清一下，这是该目录中所有静态文件的副本，位于运行 Nginx 的服务器上，项目结构不需要更改

每次更改 CSS、图像和所有内容时，都需要将文件推送到服务器。 我设置了一个 cron 作业来定期执行此操作，因此我不需要手动执行此操作

此外，您可能希望从上述代码中删除您的密钥

Answer 2

在没有 STATICFILES_STORAGE 的情况下，您在 nginx 配置中的位置值应该反映您放置文件的文件夹的名称。在这种情况下，与您的 STATIC_ROOT 相同的文件夹。

location /static/ {
    alias /home/ubuntu/theoj/online_judge_project/staticfiles/;
}

（使用alias而不是root ，因为最终目录具有不同的名称）

理想情况下，STATIC_ROOT 是在其他地方部署之前的一个保持笔（例如 STATICFILES_STORAGE），但这应该让您的站点现在可以正常工作。