Tutorial Lengkap: Memahami dan Mengatur Static Files & Media di Django dengan Nginx untuk Production

## Pendahuluan
Ketika membangun website Django untuk production environment, penanganan file statis (CSS, JavaScript, gambar) dan media (file yang diupload pengguna) adalah hal yang sangat penting. Tutorial ini akan membahas secara mendalam bagaimana mengatur semua ini dengan benar.

## 1. Memahami Konsep Dasar

### 1.1 Static Files vs Media Files
Static files adalah file yang menjadi bagian dari website kita dan tidak berubah-ubah, seperti:
- File CSS untuk tampilan website
- File JavaScript untuk interaktivitas
- Gambar yang menjadi bagian dari desain website
- File font yang digunakan website

Media files adalah file yang diupload oleh pengguna website, seperti:
- Foto profil yang diupload user
- Dokumen yang diunggah ke website
- Gambar produk yang ditambahkan admin

### 1.2 Perbedaan Development vs Production
Dalam development (saat kita membuat website di komputer lokal):
- Django bisa langsung menangani static dan media files
- Kita tidak perlu webserver khusus
- Settings.DEBUG = True membuat Django melayani file-file ini

Dalam production (website live di internet):
- Nginx yang akan menangani static dan media files
- Django fokus menangani logika aplikasi
- Settings.DEBUG harus False untuk keamanan

## 2. Pengaturan di Django settings.py

### 2.1 Mengatur ALLOWED_HOSTS

ALLOWED_HOSTS = [
    'transaksi.com',        # Domain utama
    'www.transaksi.com',    # Subdomain www
    'localhost',             # Untuk development
    '0.0.0.0'               # IP internal server
]

Pengaturan ini menentukan dari mana website kita bisa diakses. Ini seperti daftar tamu yang diizinkan masuk ke rumah kita.
### 2.2 Mengatur Static Files
 

STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / 'static'
STATICFILES_DIRS = [
    BASE_DIR / 'portfolio/static',
]

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

Berikut penjelasan setiap baris pengaturan static dan media files di settings.py dengan detail:

STATIC_URL = '/static/'

Ini adalah URL prefix yang akan digunakan untuk mengakses file-file statis di browser. Ketika web browser meminta file statis (misalnya CSS atau JavaScript), Django akan menambahkan prefix ini di depan path file. Sebagai contoh, jika Anda memiliki file CSS di `static/css/style.css`, browser akan mengaksesnya melalui URL `http://yourdomain.com/static/css/style.css`. Tanda slash di awal dan akhir penting untuk memastikan URL yang konsisten.

STATIC_ROOT = BASE_DIR / 'static'

Ini menentukan lokasi absolut di sistem file server dimana Django akan mengumpulkan semua file statis saat menjalankan perintah `collectstatic`. `BASE_DIR` mengacu ke direktori root proyek Django Anda, dan dengan operator `/` kita membuat path ke folder 'static' di dalam direktori tersebut. Ketika `collectstatic` dijalankan, Django akan mengambil semua file statis dari setiap aplikasi dan third-party package, lalu menyalinnya ke lokasi ini. Ini penting untuk production environment karena web server seperti Nginx akan melayani file-file dari lokasi ini.

MEDIA_URL = '/media/'

Mirip dengan STATIC_URL, ini adalah URL prefix untuk mengakses file-file yang diupload oleh pengguna (user-uploaded files). Misalnya, jika pengguna mengupload gambar profil, dan file tersebut disimpan sebagai `avatars/profile.jpg`, URL lengkapnya akan menjadi `http://yourdomain.com/media/avatars/profile.jpg`. Pengaturan ini membantu memisahkan file yang diupload user dari file statis aplikasi.

MEDIA_ROOT = BASE_DIR / 'media'

Ini menentukan lokasi absolut di sistem file server dimana file-file yang diupload pengguna akan disimpan. Seperti STATIC_ROOT, ini juga menggunakan BASE_DIR sebagai referensi, tetapi mengarah ke folder 'media'. Setiap kali pengguna mengupload file melalui form Django, file tersebut akan disimpan di dalam struktur folder ini. Penting untuk memastikan folder ini memiliki permissions yang tepat agar Django dapat menulis ke dalamnya dan web server dapat membaca darinya.

Penggunaan operator `/` (forward slash) di sini memanfaatkan fitur `pathlib` Python yang membuat path yang kompatibel dengan sistem operasi manapun, baik Windows maupun Unix-like systems. Ini lebih aman daripada menggabungkan string path secara manual.

Catatan penting: Pengaturan seperti ini, yang menggunakan BASE_DIR sebagai referensi, membuat proyek Anda lebih portable karena path relatif akan tetap berfungsi jika Anda memindahkan proyek ke lokasi atau server lain. Namun, pastikan folder-folder tersebut sudah dibuat dan memiliki permissions yang tepat sebelum menjalankan aplikasi.

## 3. Mengatur URLs untuk Static dan Media

### 3.1 Konfigurasi urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

# URL patterns utama
urlpatterns = [
    path('admin/', admin.site.urls),
    path('captcha/', include('captcha.urls')),
    path('', include('pages.urls')),
    path('', include('transaksi.urls')),
]

# Pengaturan khusus untuk development
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL,
                         document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL,
                         document_root=settings.MEDIA_ROOT)

Bagian if settings.DEBUG hanya aktif saat development, tidak di production.

## 4. Mengumpulkan Static Files

### 4.1 Menjalankan collectstatic

sudo python3 manage.py collectstatic

Perintah ini akan:
1. Mengumpulkan semua static files dari setiap aplikasi Django
2. Menyalin semuanya ke STATIC_ROOT
3. Termasuk file admin Django dan file dari third-party apps

## 5. Konfigurasi Nginx

### 5.1 Mengatur Location Blocks
 

location /static/ {
    alias /home/odin/myproject/portfolio/staticfiles/;
    # Melayani file dari folder static
    expires 30d;  # Browser cache selama 30 hari
    add_header Cache-Control "public, no-transform";
}

location /media/ {
    alias /home/odin/myproject/portfolio/media/;
    # Melayani file dari folder media
    expires 7d;   # Browser cache selama 7 hari
    add_header Cache-Control "public, no-transform";
}

## 6. Mengatur Permissions

### 6.1 File Permissions

# Memberikan kepemilikan folder ke www-data (user Nginx)
sudo chown -R www-data:www-data /home/odin/myproject/portfolio/static
sudo chown -R www-data:www-data /home/odin/myproject/portfolio/media

# Mengatur izin akses
sudo chmod -R 755 /home/odin/myproject/portfolio/static
sudo chmod -R 755 /home/odin/myproject/portfolio/media

## 7. Best Practices dan Tips

### 7.1 Struktur Folder yang Direkomendasikan
 

portfolio/
├── static/          # Untuk collectstatic
├── staticfiles/     # File statis aplikasi
├── media/          # File yang diupload user
└── templates/      # Template HTML

### 7.2 Keamanan
- Selalu validasi file yang diupload user
- Batasi ukuran maksimum file upload di Nginx
- Gunakan HTTPS untuk transfer file
- Regular backup untuk media files

### 7.3 Performance
- Aktifkan Nginx caching untuk static files
- Gunakan CDN untuk static files jika traffic tinggi
- Compress file statis (CSS, JS) sebelum serve
- Optimasi gambar sebelum upload

## 8. Troubleshooting Umum

### 8.1 Static Files 404
1. Periksa STATIC_ROOT di settings.py
2. Pastikan collectstatic sudah dijalankan
3. Cek permissions folder
4. Periksa konfigurasi Nginx

### 8.2 Media Files Tidak Terupload
1. Periksa MEDIA_ROOT di settings.py
2. Cek permissions folder media
3. Pastikan form HTML menggunakan enctype="multipart/form-data"
4. Periksa maksimum upload size di Nginx

## Kesimpulan
Pengaturan static dan media files yang benar sangat penting untuk website Django di production. Dengan mengikuti panduan ini, file-file statis dan media akan tertangani dengan aman dan efisien.

Jangan lupa untuk selalu memperhatikan keamanan dan performa, serta melakukan backup regular untuk media files yang penting.