Cara Nginx Include Html File dan SSI untuk Pemula

Secara default, Nginx tidak memiliki fungsi penyertaan file (include) secara langsung di dalam blok HTML statis seperti halnya bahasa pemrograman server-side (PHP atau ASP). Untuk melakukan include file HTML di dalam file HTML lainnya menggunakan Nginx, metode paling standar dan efisien adalah memanfaatkan modul bawaan bernama Server Side Includes (SSI). Modul ini memungkinkan server menyisipkan konten dari file eksternal (seperti header, footer, atau komponen navigasi) sebelum halaman dikirimkan ke peramban pengguna.

Penerapan SSI di Nginx memerlukan pengaktifan direktif ssi on; di dalam blok server atau location, diikuti dengan penggunaan tag khusus komentar HTML pada dokumen Anda. Pendekatan ini menjaga performa web server tetap tinggi karena pemrosesan dilakukan langsung di tingkat Nginx tanpa memerlukan interpreter bahasa pemrograman tambahan.

Langkah Konfigurasi Nginx untuk Mengaktifkan SSI

Untuk memulai proses include file HTML, Anda harus menyunting berkas konfigurasi Nginx (biasanya terletak di /etc/nginx/nginx.conf atau di dalam direktori sites-available/ domain Anda). Tambahkan direktif SSI pada blok konfigurasi server yang melayani situs web Anda.

server {
    listen 80;
    server_name contohdomain.com;
    root /var/www/html;

    index index.html index.htm;

    # Mengaktifkan Server Side Includes
    ssi on;

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

Setelah menambahkan baris ssi on;, simpan berkas konfigurasi tersebut dan lakukan pengujian sintaks untuk memastikan tidak ada kesalahan pengetikan sebelum melakukan reload pada layanan Nginx.

sudo nginx -t
sudo systemctl reload nginx

Sintaks HTML untuk Menyisipkan Berkas (Include)

Setelah SSI aktif di level server, Anda dapat memasukkan file HTML lain (misalnya komponen header.html atau footer.html) ke dalam berkas utama menggunakan tag khusus SSI di dalam markup HTML Anda.

<!-- #include virtual="/includes/header.html" -->
<main>
    <h1>Selamat Datang di Situs Kami</h1>
    <p>Ini adalah halaman utama yang memuat komponen secara dinamis.</p>
</main>
<!-- #include virtual="/includes/footer.html" -->

Perhatikan penggunaan atribut virtual pada tag tersebut. Jalur yang dimasukkan bersifat relatif terhadap direktori root situs web (root директори), bukan relatif terhadap posisi berkas yang sedang disunting.

Tabel Metode Include pada Nginx

Parameter Tambahan SSI yang Sering Digunakan

Modul SSI Nginx mendukung beberapa parameter tambahan selain fungsi dasar virtual. Anda dapat mengatur bagaimana Nginx bereaksi jika berkas yang ingin di-include mengalami kegagalan pemuatan atau tidak ditemukan.

• virtual: Menentukan jalur berbasis URI absolut dari root server (contoh: /components/nav.html).
• file: Menentukan jalur relatif berdasarkan posisi file saat ini (contoh: nav.html atau ../sub/nav.html). Penggunaan file dibatasi demi keamanan direktori.
• stub: Menentukan variabel nama jika file yang di-include kosong atau gagal dimuat, sehingga tidak menampilkan pesan error bawaan yang merusak tampilan.

<!-- #include virtual="/nonexistent.html" stub="error_fallback" -->

Troubleshooting Masalah Umum Nginx Include

Kendala yang sering ditemui saat menerapkan include file HTML di Nginx biasanya berkaitan dengan hak akses berkas atau konfigurasi modul yang belum sempurna. Berikut adalah langkah penyelesaiannya:

1. File yang di-include tidak muncul (kosong): Pastikan direktif ssi on; benar-benar aktif di dalam blok server atau location yang tepat, bukan di luar konteks HTTP.
2. Muncul Error 403 Forbidden: Periksa izin akses (permission) pada berkas dan folder yang ingin di-include. Pastikan user Nginx (biasanya www-data atau nginx) memiliki hak baca (read permission) pada berkas tersebut.
3. Jalur Error 404 Not Found: Verifikasi apakah parameter virtual diawali dengan garis miring (/) yang merujuk langsung ke direktori root konfigurasi Nginx Anda.