Mengatasi ReactJs File Not Found pada Server Nginx

Saya telah membuat project sederhana untuk implementasi API (Application Programming Interface) dari Laravel yang di-consume di project ReactJs. URL aplikasi tersebut ada di sini (https://srpc-table.ibnuis.dev). Salah satu komponen ReactJs yang saya gunakan di project tersebut adalah react-router-dom. Seperti namanya, package ini adalah untuk meng-handle route atau path pada project reactjs yang biasanya digunakan agar aplikasi kita tersebut menjadi SPA atau Single Page Application.

Saat proses development, semua berjalan dengan baik ya walaupun tetap ada proses error dan harus debugging sana sini, ya itu semua wajar dalam dunia pemrograman atau software development, tetapi setidaknya hasil di local development ini sesuai dengan rencana.

Hingga akhirnya, masuk ke stage production atau saya ingin "meng-online"-kanya ke server. Di sinilah masalah baru muncul.

Sebelum kita membahas masalah itu, saya ingin bercerita dulu tentang server yang saya gunakan. Server yang saya gunakan adalah sebuah VPS dan menggunakan webserver Nginx.

Lalu, kembali ke bahasan masalah tadi. Apakah masalah yang terjadi? Ketika mengakses URL atau path dari setiap tombol navigasi semua berjalan dengan lancar, tampilan di layar sesuai sebagaimana mestinya, tetapi ketika saya mencoba melakukan refresh atau mengakses langsung url yang ada di project tersebut, aplikasi tersebut me-response "File Not Found"

Padahal ketika kita akses menggunakan navigasi tidak terjadi seperti itu. Hmm, lalu saya berfikir mungkin ini konfigurasi server (nginx) ada yang kurang atau salah. Dan benar saja, ternyata konfigurasi di block nginx ada yang harus diperbaiki.

Konfigurasi server-block nginx saya sebelumnya sepert ini:

server {
    server_name srpc-table.ibnuis.dev;
    root /var/www/html/srpc-table.ibnuis.dev;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.php index.html;

    charset utf-8;

    location / {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Origin 'localhost';

        try_files $uri $uri/ /index.php?$query_string;
    }

...

Konfigurasi tersebut memang saya copy dari server-block domain lain, :D

Lalu, bagian yang harus diperbaiki adalah

server {
    server_name srpc-table.ibnuis.dev;
    root /var/www/html/srpc-table.ibnuis.dev;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

-    index index.php index.html;
+    index index.php index.html;

    charset utf-8;

    location / {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Origin 'localhost';

-        try_files $uri $uri/ /index.php?$query_string;
+        try_files $uri $uri/ /index.html?$args;
    }

...

Perhatikan bagian yang saya beri tanda - dan +. Artinya, tanda skrip yang bertanda - harus direplace menjadi skrip yang bertanda +.

Lakukan restart service nginx dan whoolaa. Masalah tersebut sudah hilang dan aplikasi berjalan sesuai dengan harapan kembali.

---

Terima kasih telah berkunjung dan menyempatkan diri untuk membaca artikel ini, sampai jumpa di postingan saya yang lain.

Happy coding