ارائه فایل های استاتیک در پایتون با جنگو، AWS S3 و WhiteNoise

معرفی

وب‌سایت‌ها معمولاً به فایل‌های اضافی مانند تصاویر، CSS و فایل‌های جاوا اسکریپت نیاز دارند که برای ارائه کامل صفحات وب در مرورگر ضروری هستند. در پروژه‌های کوچک، می‌توانیم با ارائه مسیرهای مطلق به منابع خود یا با نوشتن توابع CSS و جاوا اسکریپت درون فایل‌های HTML راه خود را ادامه دهیم. این نه تنها بر خلاف بهترین شیوه‌های کدنویسی است، بلکه زمانی که پروژه‌های بزرگ‌تری را مدیریت می‌کنیم، به‌ویژه با برنامه‌های متعدد، دشوار می‌شود.

در جنگو، فایل های مورد نیاز برای تجربه کاربری تعاملی، ارائه اسناد و صفحات وب کاربردی نامیده می شوند. فایل های استاتیک.

در این مقاله، خواهیم دید که چگونه می‌توانیم با مجموعه‌ای از فایل‌های ثابت ارائه شده توسط هر اپلیکیشن برای شخصی‌سازی ظاهر و احساس یک وب‌سایت مقابله کنیم.

پیکربندی فایل های استاتیک

جنگو انعطاف پذیری فوق العاده ای را ارائه می دهد روی چگونه می توانید فایل های استاتیک را سرویس کنید. ما استفاده از فایل های استاتیک را در توسعه محلی و همچنین در تولید که کمی پیچیده تر است پوشش خواهیم داد. اول از همه، اجازه دهید پیکربندی اولیه را انجام دهیم.

جنگو فراهم می کند django.contrib.staticfiles به شما کمک می کند تا فایل های ثابت را از هر یک از برنامه های خود (و هر مکان دیگری که مشخص می کنید) را در یک مکان واحد جمع آوری کنید که به راحتی می توان در تولید ارائه کرد.

در شما settings.py فایل، شما INSTALLED_APPS باید شبیه این باشد:

INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.sites',
    'django.contrib.contenttypes',
    'django.contrib.admin',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles', 
)

STATIC_ROOT مسیری است که تعیین می کند فایل های استاتیک شما در کجا جمع آوری شوند. ما یک مسیر مطلق به ارائه خواهیم کرد STATIC_ROOT که در settings.py.

برای انجام این کار، ما از os ماژول ها dirname() تابع برای دریافت نام دایرکتوری مورد نظر ما host این فایل ها را وارد کرده و مسیر را مشخص کنید:

import os

PROJECT_ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'staticfiles')

سپس، باید a را مشخص کنید STATIC_URL که URL مورد استفاده هنگام مراجعه به فایل های استاتیک است. باید به پایان برسد / اگر روی هر مقداری تنظیم شود به جز None. مسیر زیر به این معنی است که فایل های ثابت در محل ذخیره می شوند http://localhost:8000/static/ یا http://127.0.0.1:8000/static/:

STATIC_URL = '/static/'

جنگو فهرستی از یابنده ها را دارد STATICFILES_FINDERS که برای مکان یابی فایل های استاتیک استفاده می کند. یکی از یاب های پیش فرض این است AppDirectoriesFinder که به دنبال پوشه ای به نام می گردد static درون هر یک از شما INSTALLED_APPS.

به عنوان مثال، اگر پروژه شما حاوی برنامه ای به نام است users، ممکن است یک دایرکتوری مانند ایجاد کنید project_name/users/static/index.css برای اضافه کردن فایل های CSS مربوط به آن برنامه.

حتی اگر این کار می کند، بهتر است یک زیر شاخه دیگر با نام برنامه خود ایجاد کنید project_name/users/static/users/index.css. این زمانی مهم است که دو یا چند فایل ثابت با نام های مشابه داشته باشیم.

بیایید در نظر بگیریم که شما یک index.css در هر برنامه ای که هر کدام شامل سبک های CSS مختلف است. جنگو به دنبال اولین خواهد بود index.css می تواند در آن پیدا کند app/static/ دایرکتوری ها قادر نخواهد بود بین انواع مختلف تمایز قائل شود index.css که ما در هر برنامه داریم static فهرست راهنما. به همین دلیل است که یک زیر شاخه با نام برنامه ایجاد کردیم app/static/app/.

علاوه بر این، اکثر پروژه ها دارای چندین برنامه کاربردی هستند که می توانند فایل های ثابت مشترک داشته باشند، بنابراین معمولا بهتر است یک پوشه ایجاد کنید. static در پروژه شما root دایرکتوری به جای ساختن a static پوشه در هر برنامه:

برای استفاده از یک مکان معمولی برای همه فایل های استاتیک در فهرست پروژه خود، باید پیکربندی کنیم STATICFILES_DIRS برای اطلاع جنگو در مورد دایرکتوری جدید ما زیرا AppDirectoriesFinder به دنبال خواهد بود static که در app فقط دایرکتوری ها همچنین می توانیم چندین مکان برای فایل های استاتیک خود تعریف کنیم.

اگر چندین پوشه دارید، این جایی است که می‌توانید پوشه‌های ثابت پروژه را تعریف کنید:

STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, 'static'),
    
)

توجه داشته باشید که STATICFILES_DIRS فقط در صورتی کار می کند که حذف نکنید FileSystemFinder از جانب STATICFILES_FINDERS.

به عنوان یک جمع بندی کوتاه، ما settings.py عبارتند از:

import os

PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT  = os.path.join(PROJECT_ROOT, 'staticfiles')
STATIC_URL = '/static/'


STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, 'static'),
)

فایل های استاتیک آماده استفاده در پروژه شما هستند. ما فقط باید بارگیری کنیم static برچسب الگو توسط {% load static %} و سپس از static تگ قالب برای ساخت URL برای مسیر نسبی داده شده. بیایید ببینیم چگونه می توانیم از فایل های استاتیک در فایل قالب خود استفاده کنیم base.html:

<!doctype html>
{% load static %}
<html lang="en">
    {% include 'head.html' %}
 <style>
    body{
      background: url('{% static "bg.png" %}') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
 </style>
  <body>
      <div class="row justify-content-center">
        <div class="col-8">
            <h1 class="mainbtn">MY CUSTOM CSS CLASS</h1>
          {% block content %}
          <hr class="mt-0 mb-4">
          {% endblock %}
        </div>
      </div>
    </div>
  </body>
</html>

این base.html شامل الف head.html قالبی برای تفکیک مناسب، زیرا پروژه های بزرگتر معمولاً حاوی کد طولانی هستند head برچسب ها این mainbtn کلاس برای h1 در تعریف شده است static/index.css فایل. تصویر پس زمینه bg.png نیز در وجود دارد static فهرست راهنما.

این head.html به نظر می رسد این است:

<head>
    {% block css_block %}{% endblock %}
    {% load static %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <script src="{% static 'js/functions.js' %}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <title>{% block title %} Title to be changed in included files {% endblock %}</title>
</head>

ارائه فایل های استاتیک

علاوه بر تنظیمات فوق، ما باید فایل های استاتیک را نیز واقعاً سرویس کنیم. این به طور خودکار توسط جنگو انجام می شود runserver دستور اگر Debug = True. شما باید از این روش در مرحله توسعه استفاده کنید زیرا آسان است، اما برای تولید توصیه نمی شود زیرا ناکارآمد و ناامن است.

جنگو با یک فرمان داخلی ارائه می شود collecstatic. تمام فایل های استاتیک را در یک دایرکتوری کامپایل می کند STATIC_ROOT که قبلا تنظیم کردیم قطعه نهایی موتور ذخیره سازی است که هنگام جمع آوری فایل های استاتیک با استفاده از collectstatic فرمان موتور ذخیره سازی را می توان توسط STATICFILES_STORAGE. جنگو موتور ذخیره سازی خود را دارد بنابراین مقدار پیش فرض آن است STATICFILES_STORAGE تنظیم شده است django.contrib.staticfiles.storage.StaticFilesStorage.

فایل های استاتیک در حال تولید

دو مرحله اصلی برای قرار دادن فایل های استاتیک در یک محیط تولید وجود دارد:

• را اجرا کنید collectstatic هر زمان که فایل های استاتیک تغییر کرد دستور دهید
• ترتیب برای STATIC_ROOT به سرور فایل استاتیک منتقل شده و ارائه می شود

این post_process() روش از Storage کلاس می تواند از مرحله دوم مراقبت کند اما واقعاً بستگی دارد روی موتور ذخیره سازی شما یعنی STATICFILES_STORAGE.

توجه داشته باشید: باید بدانید که ارائه فایل های استاتیک در هر تولیدی به دلیل تفاوت در محیط ها متفاوت خواهد بود اما ایده اصلی و مراحل ثابت باقی می ماند. سه تاکتیک اصلی برای مدیریت فایل های استاتیک در تولید وجود دارد:

• سرویس فایل های ثابت و سایت از همان سرور: اگر می خواهید فایل های استاتیک شما از سروری که قبلاً برنامه وب شما را اجرا می کند، از این روش استفاده کنید. علیرغم مشکل عملکرد بالقوه آن، می تواند مقرون به صرفه باشد زیرا فقط باید برای یک میزبان سرور هزینه کنید. برای انجام این کار، کد خود را به سرور استقرار فشار دهید و سپس اجرا کنید collectstatic برای کپی کردن همه فایل ها STATIC_ROOT. در نهایت، وب سرور خود را به گونه ای پیکربندی کنید که فایل های استاتیک زیر را ارائه دهد STATIC_URL.

• ارائه فایل های ثابت از یک سرور اختصاصی: رایج ترین انتخاب ها برای سرورهای اختصاصی فایل های ثابت هستند nginx و نسخه حذف شده آپاچی. برنامه وب اجرا می شود روی یک سرور کاملاً متفاوت در حالی که فایل های استاتیک شما مستقر هستند روی یک سرور اختصاصی که به طور کلی عملکرد سریع تری ارائه می دهد. اجرا کن collectstatic به صورت محلی هر زمان که فایل های استاتیک تغییر کرد، سپس فشار دهید STATIC_ROOT به دایرکتوری سرور اختصاصی شما که در حال سرویس دهی است. برای دستورالعمل های دقیق، باید اسناد سرور مربوطه را بررسی کنید.

• ارائه فایل های ثابت از یک سرویس ابری: یکی دیگر از تاکتیک‌های رایج، ارائه فایل‌های استاتیک از یک ارائه‌دهنده ذخیره‌سازی ابری مانند آمازون، مایکروسافت آژور و علی‌بابا کلود است.

بیایید ببینیم چگونه می توانیم استفاده کنیم آمازون S3 به این منظور. ابتدا دو کتابخانه پایتون را با استفاده از این دستورات نصب کنید:

$ python -m pip install boto3
$ pip install django-storages

این boto3 کتابخانه یک سرویس گیرنده API عمومی برای دسترسی به Amazon S3 و سایر خدمات وب آمازون (AWS) است. این django-storages پشتیبان های ذخیره سازی مانند Amazon S3، OneDrive و غیره را مدیریت می کند. به API ذخیره سازی داخلی جنگو متصل می شود. همچنین باید اضافه کنید storages در شما INSTALLED_APPS. ما INSTALLED_APPS like در حال حاضر به این شکل است:

INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.sites',
    'django.contrib.contenttypes',
    'django.contrib.admin',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'users',
    'storages', 
)

پس از آن تنظیمات زیر را در خود اضافه کنید settings.py:

AWS_ACCESS_KEY_ID = your_access_key_id
AWS_SECRET_ACCESS_KEY = your_secret_access_key
AWS_STORAGE_BUCKET_NAME = 'sibtc-static'
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400',
}
AWS_LOCATION = 'static'
  
STATIC_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

در نهایت، اجرا کنید python manage.py collectstatic و پیکربندی آمازون S3 برای فایل های استاتیک خود تمام شده است.

ارائه فایل های استاتیک با استفاده از نویز سفید

مردم اغلب به چند دلیل از جمله اشتراک های پولی از خدمات ابری شخص ثالث مانند آمازون S3 استفاده نمی کنند. نویز سفید به پروژه جنگو شما اجازه می‌دهد تا فایل‌های استاتیک خود را ارائه کند، و آن را به یک واحد مستقل تبدیل می‌کند که می‌توانیم بدون وابستگی آن را در هر جایی مستقر کنیم. روی ارائه دهندگان خدمات.

اگرچه با هر برنامه وب سازگار با WSGI کار می کند، اما به راحتی با پروژه جنگو پیکربندی می شود.

پیکربندی برای WhiteNoise

نصب کنیم نویز سفید با:

$ pip install whitenoise

در شما settings.py، WhiteNoise را به MIDDLEWARE لیست به ترتیب زیر:

MIDDLEWARE = (
    'django.middleware.security.SecurityMiddleware',
    
    'whitenoise.middleware.WhiteNoiseMiddleware', 
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
  )

برای استفاده از پشتیبانی فشرده‌سازی و فایل‌های ذخیره‌سازی برای همیشه، این را در خود اضافه کنید settings.py
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

اجرا کن python manage.py collectstatic.

خودشه! اکنون می توانید برنامه وب خود را در هر پلتفرم میزبانی مانند هیروکو.

نتیجه

هر توسعه دهنده وب سایتی برای ایجاد یک وب سایت زیبا و کاربردی به فایل های ثابت نیاز دارد. جنگو نه تنها پیکربندی آسان فایل‌های استاتیک را ارائه می‌کند، بلکه انعطاف‌پذیری فوق‌العاده‌ای برای بازی با استقرار آنها ارائه می‌دهد.

در این مقاله، ما چندین روش برای ادغام فایل‌های استاتیک در یک برنامه وب جنگو در توسعه محلی و همچنین تولید پوشش دادیم.