Bab 5: Hosting Website Statis di Nginx – Panduan Lengkap

Bab 5: Hosting Website Statis di Nginx – Panduan Lengkap

Menyajikan website statis menggunakan Nginx adalah salah satu fungsi paling dasar dan umum. Website statis biasanya berisi file HTML, CSS, JavaScript, gambar, dan aset lain yang tidak memerlukan backend dinamis.

Bab ini membahas cara mengatur root folder, file index default, custom error page, dan MIME types.

1. Menyajikan File HTML, CSS, dan JS

Website statis di Nginx disajikan dari root folder yang telah ditentukan di server block. Misal struktur folder:

/var/www/html/mysite/
├── index.html
├── about.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── images/
    └── logo.png

Contoh Server Block Nginx:

server {
    listen 80;
    server_name mysite.com www.mysite.com;

    root /var/www/html/mysite;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Penjelasan:

  • root → folder tempat Nginx mencari file website
  • index → file default saat mengakses root atau direktori, misal /var/www/html/mysite/ akan menampilkan index.html
  • try_files $uri $uri/ =404; → mencegah error jika file tidak ditemukan, menampilkan error 404

2. Konfigurasi Root Folder

Root folder adalah direktori tempat seluruh file website statis disimpan. Beberapa hal yang perlu diperhatikan:

  1. Pastikan permission folder benar, biasanya www-data sebagai owner:
sudo chown -R www-data:www-data /var/www/html/mysite
sudo chmod -R 755 /var/www/html/mysite
  1. Gunakan path absolut di server block:
root /var/www/html/mysite;
  1. Struktur folder minimal:
/mysite
├── index.html
├── css/
├── js/
└── images/

3. Index File Default

File index adalah halaman yang otomatis dimuat saat user mengakses root folder atau subfolder.

Contoh konfigurasi:

server {
    root /var/www/html/mysite;
    index index.html index.htm;
}

Tips:

  • Urutan index.html index.htm → jika index.html tidak ada, Nginx akan memeriksa index.htm
  • Bisa ditambahkan file lain untuk fallback, misal index.php jika menggabungkan dengan backend

4. Mengatur Error Page Custom

Nginx memungkinkan menampilkan halaman error khusus untuk kesalahan seperti 404, 403, atau 500.

Contoh konfigurasi:

server {
    root /var/www/html/mysite;
    index index.html;

    error_page 404 /404.html;
    location = /404.html {
        internal;
    }

    error_page 403 /403.html;
    location = /403.html {
        internal;
    }
}

Penjelasan:

  • error_page 404 /404.html; → redirect semua error 404 ke halaman custom /404.html
  • internal; → halaman tidak bisa diakses langsung oleh user, hanya melalui error handler
  • Letakkan file 404.html dan 403.html di folder root

5. Mengatur MIME Types

MIME types menentukan jenis file yang dikirim ke browser. File CSS, JS, gambar, atau font harus memiliki MIME type yang tepat agar browser bisa menampilkannya dengan benar.

Konfigurasi default:

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
}

File /etc/nginx/mime.types berisi contoh:

text/html               html htm shtml;
text/css                css;
application/javascript  js;
image/jpeg              jpeg jpg;
image/png               png;
image/gif               gif;
application/font-woff   woff;
application/font-woff2  woff2;

Tips:

  • Jangan lupa reload Nginx setelah mengubah MIME types:
sudo nginx -t
sudo systemctl reload nginx

6. Contoh Server Block Lengkap untuk Website Statis

server {
    listen 80;
    server_name mysite.com www.mysite.com;

    root /var/www/html/mysite;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }

    # Custom error pages
    error_page 404 /404.html;
    location = /404.html {
        internal;
    }

    error_page 403 /403.html;
    location = /403.html {
        internal;
    }

    # Static file caching
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 30d;
        add_header Cache-Control "public";
    }
}

Keterangan:

  • Menyajikan HTML, CSS, JS, gambar
  • Mengatur index file default
  • Menampilkan halaman error custom
  • Memberikan cache untuk static assets agar loading lebih cepat

Kesimpulan

Hosting website statis di Nginx membutuhkan:

  1. Menentukan root folder tempat file HTML, CSS, JS, dan aset lain
  2. Menentukan index file default agar halaman utama otomatis ditampilkan
  3. Mengatur error page custom untuk pengalaman pengguna lebih baik
  4. Memastikan MIME types diatur agar file dikirim ke browser dengan benar
  5. Menyertakan caching static assets untuk performa optimal

Dengan konfigurasi ini, Nginx dapat menyajikan website statis dengan stabil, cepat, dan profesional.

Related Posts