Konfigurasi NGINX untuk SPA (Single Page Application)

Konfigurasi NGINX untuk SPA (Single Page Application)#

Halo, teman-teman! Kali ini kita bakal ngomongin tentang konfigurasi NGINX untuk SPA (Single Page Application). Buat yang belum tau, SPA itu tipe aplikasi web yang cuma punya satu halaman HTML, tapi isinya bisa berubah-ubah pake JavaScript. Contohnya tuh kayak React, Vue, atau Angular. Nah, NGINX adalah web server yang bisa kita pake buat nge-host SPA kita. Yuk, kita langsung aja ke konfigurasinya!

1. Instalasi NGINX#

Pertama-tama, pastiin dulu NGINX udah terinstall di server kamu. Kalo belum, kamu bisa install pake perintah berikut:

sudo apt update
sudo apt install nginx

Setelah itu, pastiin NGINX udah jalan dengan perintah:

sudo systemctl status nginx

2. Buat Konfigurasi untuk SPA#

Biasanya, file konfigurasi NGINX ada di /etc/nginx/sites-available/. Kita bisa bikin file baru dengan nama spa atau sesuai kebutuhan. Buka file tersebut dengan editor teks favorit kamu, misalnya nano:

sudo nano /etc/nginx/sites-available/spa

Lalu, masukkan konfigurasi berikut:

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

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

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Penjelasan:

• listen 80: NGINX bakal dengerin port 80 (HTTP).
• server_name: Ganti yourdomain.com dengan domain kamu.
• root: Path ke folder tempat file SPA kamu disimpan. Misalnya, /var/www/spa.
• index: File utama yang bakal diload, biasanya index.html.
• location /: Blok ini ngehandle semua request ke root.
  • try_files: Coba cari file yang diminta, kalo nggak ketemu, arahin ke index.html. Ini penting biar routing di SPA bisa jalan dengan baik.

3. Aktifkan Konfigurasi#

Setelah bikin konfigurasi, kita perlu aktifin dengan bikin symlink ke folder sites-enabled:

sudo ln -s /etc/nginx/sites-available/spa /etc/nginx/sites-enabled/

Terus, test konfigurasi NGINX biar nggak ada error:

sudo nginx -t

Kalo keluar pesan nginx: configuration file /etc/nginx/nginx.conf test is successful, berarti konfigurasi kamu bener. Terakhir, restart NGINX:

sudo systemctl restart nginx

4. Optimasi untuk SEO#

Biar SPA kamu SEO friendly, ada beberapa hal yang perlu diperhatikan:

• Server-Side Rendering (SSR): Pake framework yang support SSR kayak Next.js (React) atau Nuxt.js (Vue). Tapi kalo nggak pake SSR, kita bisa optimasi dengan NGINX.
• Meta Tags: Pastiin meta tags (title, description, dll.) diatur dengan baik di index.html.
• Sitemap: Buat sitemap dan submit ke Google Search Console.
• Pre-rendering: Pake tools seperti Prerender.io buat generate halaman statis.

5. Contoh Konfigurasi dengan Prerender#

Kalo kamu pake Prerender, konfigurasi NGINX-nya bakal kaya gini:

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

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

    location / {
        try_files $uri @prerender;
    }

    location @prerender {
        set $prerender 0;
        if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
            set $prerender 1;
        }
        if ($args ~ "_escaped_fragment_") {
            set $prerender 1;
        }
        if ($http_user_agent ~ "Prerender") {
            set $prerender 0;
        }
        if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
            set $prerender 0;
        }

        if ($prerender = 1) {
            rewrite .* /$scheme://$host$request_uri? break;
            proxy_pass http://localhost:3000;
        }
        if ($prerender = 0) {
            rewrite .* /index.html break;
        }
    }
}

Penjelasan:

• Blok location @prerender ngecek apakah request berasal dari bot atau nggak. Kalo iya, arahin ke Prerender (yang jalan di localhost:3000). Kalo nggak, arahin ke index.html.

6. SSL/TLS#

Jangan lupa buat pake HTTPS biar lebih aman dan SEO friendly. Kamu bisa dapetin sertifikat SSL gratis dari Let’s Encrypt pake Certbot. Caranya:

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Ikuti aja instruksinya, dan Certbot bakal otomatis nge-setup SSL buat kamu.

Nah, itu dia konfigurasi NGINX buat SPA. Semoga bermanfaat, ya! Kalo ada pertanyaan, tinggalin aja di komentar. Happy coding!