使用 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），但這應該讓您的站點現在可以正常工作。