وبلاگ نت‌آرامآموزش، تجربه و راهکارهای زیرساخت

سایت جنگو روی هاست بدون CSS باز می‌شود؛ رفع مشکل فایل‌های static

راهنمای رفع CSS و تصاویر static جنگو در محیط انتشار؛ بررسی آدرس، collectstatic، مسیر فایل‌ها و تنظیم وب‌سرور با مثال.

انتشار:
توسط تیم فنی نت‌آرام
۷ دقیقه زمان مطالعه
۰ دیدگاه
محتوای تخصصی، ساده و کاربردی
هماهنگ با هویت حرفه‌ای نت‌آرام
بازگشت به لیست مقالات
تصویر شاخص مقاله سایت جنگو روی هاست بدون CSS باز می‌شود؛ رفع مشکل فایل‌های static در وبلاگ نت‌آرام
محتوای آموزشی وبلاگ نت‌آرام
سایت جنگو بعد از انتقال روی هاست باز می‌شود، اما رنگ‌ها، چیدمان یا تصاویر قالب از بین رفته‌اند. در رایانه خودتان همه‌چیز درست بود و حالا متن‌ها ساده نمایش داده می‌شوند. معمولاً فایل‌های CSS و JavaScript که به آن‌ها فایل ثابت یا static می‌گوییم، در نشانی مورد انتظار مرورگر تحویل داده نمی‌شوند؛ اما دلیل می‌تواند نشانی اشتباه، جمع‌آوری‌نشدن فایل، تنظیم وب‌سرور یا حتی کش قدیمی باشد.
در این آموزش، ابتدا آدرس دقیق فایل مشکل‌دار را پیدا می‌کنیم و بعد مسیر فایل، تنظیمات جنگو و پاسخ وب‌سرور را به هم وصل می‌کنیم. مثال‌ها برای پروژه‌ای با Django و هاست پایتون لینوکسی هستند. نام پوشه‌ها، پنل و روش اتصال دامنه در حساب شما ممکن است متفاوت باشد. این راهنما برای فایل‌های قالب است؛ تصاویر آپلودشده توسط کاربران معمولاً بخش جداگانه‌ای به نام media دارند.

۱. یک فایل خراب را در مرورگر پیدا کنید

صفحه مشکل‌دار را در Chrome یا Firefox باز کنید. کلید F12 را بزنید، به زبانه Network بروید و صفحه را دوباره بارگذاری کنید. در فیلتر نوع فایل، CSS را انتخاب کنید و روی اولین فایل قرمز یا ناموفق بزنید. سه چیز را یادداشت کنید: نشانی کامل درخواست، کد پاسخ و نوع محتوای برگشتی.
برای مثال اگر /static/css/site.css کد 404 می‌دهد، فایل در مسیر مورد انتظار تحویل داده نشده است. کد 403 می‌تواند نشانه محدودیت دسترسی باشد. اگر کد 200 است اما محتوای پاسخ یک صفحه HTML یا صفحه ورود است، مرورگر به‌جای CSS فایل دیگری گرفته است. خطای گواهی، اتصال یا محتوای ناامن HTTP هم مسئله متفاوتی است. صرف دیدن یک صفحه بدون رنگ، به‌تنهایی ثابت نمی‌کند collectstatic اجرا نشده است.
برای آزمایش مستقل، نشانی همان فایل را با نشانی واقعی سایت خود در ترمینال جایگزین کنید:
کد / دستورcurl -I https://example.com/static/css/site.css
این فرمان سرآیند پاسخ را نشان می‌دهد. به کد پاسخ و Content-Type توجه کنید؛ CSS معمولاً text/css است. اگر انتقال ۳۰۱ یا ۳۰۲ دارید، خط Location مقصد را نشان می‌دهد. برخی سرورها به HEAD و GET متفاوت پاسخ می‌دهند؛ برای یک فایل کوچک می‌توانید GET را هم امتحان کنید:
کد / دستورcurl -sS -L -D - -o /dev/null https://example.com/static/css/site.css
اگر پاسخ، صفحه خطا یا صفحه ورود است، اول باید علت آن مسیر را حل کنید؛ تغییر رنگ مرورگر یا نصب دوباره جنگو مشکل را رفع نمی‌کند.

۲. پوشه پروژه و تنظیمات فعال را مشخص کنید

در cPanel قسمت Setup Python App یا پنل برنامه پایتون را باز کنید. مسیر Application root و فرمان ورود به محیط مجازی برنامه را از همان صفحه بردارید. در Terminal یا SSH حساب، فرمان اختصاصی محیط را اجرا کنید و به پوشه‌ای بروید که manage.py در آن قرار دارد. نمونه زیر فقط مسیر فرضی است:
کد / دستورcd ~/myproject pwd ls -la manage.py python --version
اگر فایل پیدا نشد، در پوشه درست نیستید؛ تغییرات را روی پروژه دیگری انجام ندهید. پس از فعال‌شدن محیط، این فرمان مقدار تنظیمات مؤثر را چاپ می‌کند:
کد / دستورpython manage.py shell -c 'from django.conf import settings; print("settings:", settings.SETTINGS_MODULE); print("STATIC_URL:", settings.STATIC_URL); print("STATIC_ROOT:", settings.STATIC_ROOT); print("DEBUG:", settings.DEBUG)'
STATIC_URL بخش نشانی عمومی فایل‌ها و STATIC_ROOT پوشه مقصد جمع‌آوری آن‌هاست. اگر در ترمینال متغیرهای محیطی متفاوتی با برنامه واقعی دارید، ممکن است نتیجه متفاوت باشد؛ نام فایل تنظیمات فعال را با تنظیمات پنل برنامه تطبیق دهید. DEBUG را برای رفع این مشکل در سایت عمومی روشن نکنید؛ محیط تولید به تنظیم درست تحویل فایل نیاز دارد.

۳. منبع و مقصد static را به اشتباه یکی نکنید

در تنظیمات پروژه، مثال ساده زیر نشان می‌دهد جنگو قرار است فایل‌های جمع‌آوری‌شده را در کجا قرار دهد:
کد / دستورSTATIC_URL = "/static/" STATIC_ROOT = BASE_DIR / "collected-static"
این مثال به‌تنهایی کافی نیست: وب‌سرور باید درخواست /static/ را از همان پوشه collected-static تحویل دهد. اگر BASE_DIR یا ساختار پروژه شما متفاوت است، تنظیم را متناسب با پروژه خود بنویسید. STATIC_ROOT پوشه خروجی جمع‌آوری است؛ آن را با پوشه منبع فایل‌های پروژه یا فایل‌های media یکی نکنید. قبل از هر تغییر از فایل تنظیمات و مقصد موجود نسخه قابل بازگشت داشته باشید.
برای پیدا کردن فایل منبع از نظر جنگو، نام فایل نمونه را با مسیر نسبی واقعی جایگزین کنید:
کد / دستورpython manage.py findstatic css/site.css --verbosity 2
اگر مسیر پیدا شد، جنگو فایل منبع را می‌شناسد. اگر چیزی پیدا نشد، اول وجود فایل در برنامه، نام حروف بزرگ و کوچک و تنظیم پوشه‌های منبع را بررسی کنید. برای مثال، Site.css در لینوکس با site.css یکسان نیست. اگر از تگ قالب جنگو استفاده می‌کنید، ابتدای قالب {% load static %} و آدرس ساخته‌شده توسط تگ را نیز در فایل واقعی پروژه بررسی کنید؛ مسیرهای ثابت‌نویسی‌شده قدیمی ممکن است به جای دیگری اشاره کنند.

۴. فایل‌ها را ابتدا آزمایشی و سپس واقعی جمع کنید

از همان پوشه پروژه و محیط فعال، ابتدا جمع‌آوری آزمایشی را اجرا کنید:
کد / دستورpython manage.py collectstatic --dry-run --noinput
حالت آزمایشی قرار است تغییرات مورد انتظار را بدون انجام کپی واقعی نشان دهد. اگر تنظیمات یا مجوز مسیر خطا دارند، قبل از ادامه آن‌ها را رفع کنید. سپس، بعد از تهیه نسخه پشتیبان از مقصد فعلی و اطمینان از مسیر درست، جمع‌آوری واقعی را اجرا کنید:
کد / دستورpython manage.py collectstatic --noinput
این فرمان ممکن است فایل‌های موجود مقصد را جایگزین کند؛ آن را روی پوشه‌ای که داده شخصی یا فایل کاربران در آن است اجرا نکنید. گزینه حذف سراسری یا --clear برای حل عجولانه مسئله لازم نیست. پس از اجرا، وجود فایل موردنظر را در مسیر مقصدی که مرحله قبل چاپ کرد تأیید کنید. برای نمونه، اگر مسیر مقصد واقعاً همین باشد:
کد / دستورls -lh ~/myproject/collected-static/css/site.css
اگر فایل آنجاست ولی مرورگر ۴۰۴ می‌گیرد، مشکل احتمالاً در اتصال URL به پوشه مقصد یا کش وب‌سرور است، نه در کپی فایل. اگر فایل نیست، خروجی جمع‌آوری و نام فایل منبع را دوباره بررسی کنید.

۵. نشانی وب را به پوشه خروجی وصل کنید

در هاست اشتراکی، اتصال /static/ به یک پوشه به تنظیم وب‌سرور و مسیر عمومی دامنه بستگی دارد. در پنل هاست مسیر Document Root دامنه را پیدا کنید. اگر پنل اجازه می‌دهد یک پوشه عمومی مشخص برای فایل ثابت به این مسیر وصل شود، مقصد جمع‌آوری را با همان مسیر تأییدشده هماهنگ کنید؛ قبل از کپی روی پوشه موجود، از محتوا پشتیبان بگیرید. در بعضی تنظیمات Passenger، درخواست‌ها به برنامه فرستاده می‌شوند و صرف وجود پوشه زیر public_html کافی نیست.
اگر امکان تعریف مسیر یا Alias در حساب شما وجود ندارد، آدرس فایل نمونه، خروجی STATIC_ROOT، مسیر Document Root و نتیجه curl را بدون رمزها برای پشتیبانی بفرستید و بخواهید /static/ به مقصد جمع‌آوری فایل‌های همین برنامه متصل شود. ساخت تنظیم Nginx یا Apache در سطح سرور از حساب اشتراکی معمولاً مجاز نیست. فایل‌های محرمانه پروژه و داده‌های media را به امید درست‌شدن CSS وارد پوشه عمومی نکنید.

۶. نتیجه را بررسی کنید

نشانی فایل CSS را دوباره در Network مرورگر و با curl بررسی کنید. پاسخ باید فایل درست و نوع محتوای مناسب را بدهد. سپس صفحه را با بارگذاری سخت یا پنجره خصوصی باز کنید. اگر فایل جدید روی سرور است ولی مرورگر همچنان نسخه قدیمی دارد، کش همان فایل را در CDN یا مرورگر بررسی کنید و در صورت نیاز نسخه‌بندی فایل‌های ثابت را مطابق روش پروژه تنظیم کنید.
اگر فقط تصاویر کاربران نمایش داده نمی‌شوند، مسیر MEDIA_URL و محل نگهداری فایل‌های آپلودی را جداگانه بررسی کنید؛ جمع‌آوری static نباید آن‌ها را جایگزین کند. اگر صفحه اصلی ۴۰۰ می‌دهد، رفع DisallowedHost جنگو به تشخیص آن کمک می‌کند. برای بررسی امکانات اجرا به صفحه هاست پایتون نت‌آرام و برای جزئیات نسخه مورد استفاده به راهنمای رسمی استقرار فایل‌های static جنگو مراجعه کنید.
اشتراک‌گذاری:
لینکدینتلگرامایکس
مقاله قبلی
مقاله قبلی وجود ندارد.

دیدگاه‌ها (۰)

دیدگاه‌های تاییدشده و پاسخ‌های تیم نت‌آرام