نحوه مدیریت فایل های استاتیک در جنگو

جنگو یک راه ساده و کارآمد برای مدیریت فایل‌های استاتیک، مانند CSS، جاوا اسکریپت و تصاویر، که بخش مهمی از یک برنامه یا یک وب‌سایت هستند، ارائه می‌کند.

در این آموزش، روش مدیریت فایل‌های استاتیک جنگو را توضیح می‌دهیم تا اطمینان حاصل کنیم که در طول توسعه و استقرار به درستی سرویس و سازماندهی شده‌اند.

راه اندازی فایل های استاتیک در جنگو

در زیر دستورالعمل ها را خواهید یافت روی چگونه می توانید فایل های استاتیک را تنظیم و پیکربندی کنید.

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

برای مدیریت فایل های استاتیک در جنگو، باید پروژه خود را پیکربندی کنید تا بدانید کجا به دنبال آنها بگردید و آنها را سرویس کنید. شما می توانید این کار را با مشخص کردن URL استاتیک و دایرکتوری در تنظیماتpy.

# settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",  # Optional: Add this if you want to store static files in a 'static' folder within your project
]

را STATIC_URL پارامتر پیشوند URL را که جنگو هنگام ارائه فایل‌های استاتیک استفاده می‌کند، تعیین می‌کند. در همین حال، STATICFILES_DIRS دایرکتوری های اضافی را مشخص می کند که جنگو به دنبال فایل ها خواهد بود.

فایل های استاتیک مخصوص برنامه

به طور پیش‌فرض، جنگو به دنبال فایل‌های استاتیک در داخل هر برنامه می‌گردد ایستا دایرکتوری به عنوان مثال، اگر برنامه ای به نام دارید myapp، می توانید یک ساختار پوشه مانند زیر ایجاد کنید:

myapp/
│
├── static/
│   └── myapp/
│       └── style.css
└── views.py

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

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

برای استفاده از فایل های ثابت در قالب های جنگو، ابتدا باید جنگو را بارگذاری کنید {% ثابت %} تگ قالب سپس، می‌توانید فایل‌های استاتیک خود را بر اساس مسیرهای مربوط به آنها ارجاع دهید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
    {% load static %}
    <link rel="stylesheet" href="https://www.hostinger.com/tutorials/{% static"myapp/style.css' %}">
</head>
<body>
    <h1>Welcome to My Django App</h1>
    <img src="https://www.hostinger.com/tutorials/{% static"myapp/images/logo.png' %}" alt="Logo">
</body>
</html>

در اینجا توضیح تگ های استاتیک آورده شده است:

  • {% بار ثابت %}: برچسب الگوی فایل های ثابت را بارگیری می کند.
  • {% static ‘myapp/style.css’ %}: مسیر را حل می کند style.css فایل در static/myapp دایرکتوری
  • {% static ‘myapp/images/logo.png’ %}: مسیر یک فایل تصویری را حل می کند.

جمع آوری فایل های ثابت برای استقرار

در طول توسعه، جنگو فایل های استاتیک را به طور خودکار در زمانی که DEBUG = درست است. با این حال، در تولید، باید تمام فایل‌های ثابت را از مکان‌های مختلف جمع‌آوری کنید و آنها را در یک فهرست واحد ذخیره کنید که سرور وب شما بتواند پیدا کند.

پیکربندی استاتیک root دایرکتوری

برای پیکربندی استاتیک root دایرکتوری، جنگو فراهم می کند جمع آوری استاتیک فرمان مدیریت

پیشنهاد می‌کنیم بخوانید:  معماری وردپرس: درک ساختار وب سایت، فایل های رایج و دایرکتوری ها

قبل از استفاده، مطمئن شوید که آن را وارد کرده اید django.contrib.staticfiles در INSTALLED_APPS تنظیم از تنظیماتpy:

INSTALLED_APPS = [
    # Other installed apps
    'django.contrib.staticfiles',
]

اکنون، پیکربندی کنید دایرکتوری ریشه استاتیک در تنظیماتpy. این پوشه ای است که جنگو برای جمع آوری فایل های ثابت برای استقرار استفاده می کند.

STATIC_ROOT = BASE_DIR / 'staticfiles'

در طول استقرار، جنگو دیگر فایل‌های استاتیک را سرویس نمی‌دهد و وب سرور شما کنترل می‌شود. اگر از پیش فرض استفاده کنیم ایستا دایرکتوری در برنامه جنگو.

اجرای دستور collectstatic

را جمعی دستور تمام فایل های ثابت را از هر برنامه جمع آوری می کند ایستا دایرکتوری و هر مکان اضافی مشخص شده در STATICFILES_DIRSسپس، آنها را در STATIC_ROOT دایرکتوری

در اینجا روش اجرای آن آمده است جمع آوری استاتیک دستور:

python manage.py collectstatic

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

پس از راه اندازی root فهرست استاتیک و جمع آوری تمام فایل ها، وب سرور خود را برای سرویس دهی به آنها پیکربندی کنید. بسته به روی وب سرور شما، ممکن است پیکربندی متفاوت باشد.

به عنوان مثال، در اینجا روش پیکربندی ممکن است برای NGINX مشاهده شود:

erver {
    listen 80;
    server_name yourdomain.com;

    location /static/ {
        alias /path/to/your/project/staticfiles/;  # The path to STATIC_ROOT
    }

    location / {
        proxy_pass http://127.0.0.1:8000;  # Pass requests to Django app
    }
}

در این پیکربندی، NGINX فایل‌های استاتیک را مستقیماً از قسمت سرویس می‌دهد /استاتیک/ دایرکتوری در حالی که همه درخواست های دیگر را به برنامه جنگو منتقل می کند.

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

ذخیره فایل های استاتیک

از آنجایی که فایل‌های استاتیک هر زمان که کاربران به آن‌ها دسترسی پیدا می‌کنند یکسان به نظر می‌رسند، کش کردن آنها یک استراتژی عالی برای بهبود سرعت بارگذاری وب‌سایت شما است. با این حال، شما باید آن را پیکربندی کنید روی مرورگر وب شما از آنجایی که جنگو نمی تواند آن فایل ها را مستقیماً سرویس دهد.

برای فعال کردن کش، باید آن را اضافه کنیم کنترل کش هدر به مرورگر وب کاربران می گوید که می توانند محتوای ثابت را برای استفاده مجدد ذخیره کنند.

برای NGINX، می توانید با افزودن کد زیر به فایل پیکربندی خود، آن را فعال کنید. این را حتما بعد از اضافه کنید نام مستعار:

 expires 30d;  # Cache for 30 days
        add_header Cache-Control "public, max-age=2592000, immutable";

برای بهینه سازی بیشتر کش خود، می توانید از جنگو استفاده کنید ManifestStaticFilesStorage. فایل‌های استاتیک شما را هش می‌کند، به این معنی که پس از تغییر محتوای آن‌ها، نام آن‌ها به‌طور خودکار تغییر می‌کند.

هش کردن مرورگرهای وب کاربران را قادر می‌سازد تا حافظه پنهان را تا زمانی که به حداکثر سن برسد برای حفظ زمان بارگذاری بهینه ذخیره کنند. مرورگرها فقط زمانی فایل های جدید را دانلود می کنند که نام آنها تغییر کند.

می توانید فعال کنید ManifestStaticFilesStorage با افزودن کد زیر در خود تنظیماتpy فایل:

STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage'

یکپارچه سازی کتابخانه های استاتیک شخص ثالث

برای بهبود کارایی توسعه، جنگو به شما امکان می دهد فایل های ثابت را از کتابخانه های شخص ثالث اضافه کنید. به عنوان مثال، می توانید یکپارچه سازی کنید بوت استرپ برای اضافه کردن CSS یا جی کوئری برای جاوا اسکریپت

پیشنهاد می‌کنیم بخوانید:  روش به روز رسانی ایمن PHP در وردپرس: درک سازگاری + نکات ارتقا

راه‌های مختلفی برای انجام این کار وجود دارد، اما افزودن دستی فایل‌های کتابخانه به پروژه جنگو رایج‌ترین روش است. علاوه بر این، بدون توجه به کتابخانه، مراحل یکسان است.

به عنوان مثال، در اینجا روش نصب بوت استرپ در پروژه جنگو آمده است:

  1. دانلود کنید نسخه CSS و JS کامپایل شده بوت استرپ:
wget https://github.com/twbs/bootstrap/releases/download/v4.0.0/bootstrap-4.0.0-dist.zip
  1. فایل بایگانی دانلود شده را با استفاده از این دستور استخراج کنید:
unzip bootstrap-4.0.0-dist.zip
  1. ایجاد یک ایستا پوشه داخل پروژه جنگو شما root دایرکتوری در همان مکان مدیریت کنید.py. اگر از قبل پوشه را دارید از این مرحله رد شوید.
mkdir myapp/static
  1. بایگانی که قبلا استخراج کردیم دو پوشه به نام‌ها به دست آمد css و js. آنها را با استفاده از این دستورات به پوشه استاتیک منتقل کنید:
mv css myapp/static
mv js myapp/static
  1. باز کنید تنظیماتpy با استفاده از ویرایشگر متن یا کد
  2. را تغییر دهید STATIC_URL ارزش به /استاتیک/. اگر نمی توانید پارامتر را پیدا کنید، آن را به صورت دستی اضافه کنید:
STATIC_URL = '/static/'
  1. تغییرات را ذخیره کنید.

اکنون می توانید فایل های استاتیک را از کتابخانه خود با تماس با آنها بارگیری کنید {% ثابت %} مانند مثال زیر برچسب بزنید:

<head>
    <title>My Django Project</title>
    <link rel="stylesheet" href="https://www.hostinger.com/tutorials/{% static"css/bootstrap.min.css' %}">
</head>

نتیجه گیری

فایل های استاتیک مانند CSS، جاوا اسکریپت و تصاویر عناصر مهمی در یک برنامه وب هستند. در جنگو، می‌توانید با استفاده از ویژگی‌های داخلی و ابزار فرمان، آن را به طور مؤثر مدیریت کنید.

در مرحله توسعه، فایل‌های استاتیک جنگو در داخل برنامه شما قرار دارند ایستا پوشه با ویرایش تنظیماتpy فایل، می‌توانید پوشه‌های اضافی را برای ذخیره‌سازی مشخص کنید و URL‌هایی را تنظیم کنید که به آن‌ها خدمت می‌کنند. برای بارگذاری فایل های استاتیک، از {% ثابت %} در قالب خود تگ کنید

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

روش رسیدگی به سوالات متداول فایل های استاتیک جنگو

فایل های استاتیک در جنگو چیست؟

در جنگو، فایل‌های استاتیک دارایی‌هایی مانند CSS، جاوا اسکریپت و تصاویری هستند که به صورت پویا توسط backend تولید نمی‌شوند، اما برای قسمت جلویی یک برنامه وب ضروری هستند. آنها با هر درخواست تغییر نمی کنند، بنابراین “ایستا” هستند و معمولاً همانطور که هستند به کاربران ارائه می شوند.

چگونه فایل های استاتیک را در جنگو سرو کنیم؟

برای ارائه فایل های استاتیک در جنگو، تنظیم کنید STATIC_URL و STATICFILES_DIRS در تنظیماتpy، که CSS، جاوا اسکریپت و تصاویر را ارائه و ذخیره می کند. در طول توسعه، جنگو این فایل ها را به صورت خودکار ارائه می کند. در تولید، اجرا کنید python مدیریت کنید.py جمع آوری استاتیک برای جمع آوری تمام فایل های استاتیک در STATIC_ROOT برای وب سرور شما

آیا می توانم از CDN برای فایل های استاتیک جنگو استفاده کنم؟

بله، با تنظیم می توانید از CDN برای فایل های استاتیک جنگو استفاده کنید STATIC_URL به آدرس CDN در تنظیماتpy. بعد از دویدن جمع آوری استاتیک برای جمع آوری فایل ها، آنها را در CDN آپلود کنید. این رویکرد زمان بارگذاری را بهبود می بخشد و بار سرور را با ارائه دارایی ها از طریق یک شبکه جهانی کاهش می دهد.