Back to Blog
egiesem.com

Cara memberikan cache image atau static file di Nginx Reverse Proxy

Selasa, 19 Maret 2024 (1:3:44 WIB) · 1 min read


egiesem.com - Cara memberikan cache image atau static file di Nginx Reverse Proxy. Dalam pengaturan reverse proxy, kita tidak langsung melakukan serve dari sebuah directory, makanya jika kita membuat cache langsung seperti ini:

# cache for image
location ~* \.(jpg|jpeg|gif|png|bmp|ico|svg|tif|tiff|webp)$ {
location ~* \.(jpg|jpeg|gif|png|bmp|ico|svg|tif|tiff|webp)$ {
    expires 360d;
    add_header Cache-Control "public, no-transform";
}

Kita akan temui gambar akan menjadi 404, alias tidak ditemukan, hal ini terjadi karena code ini akan mencari root directory untuk path imagenya. Sedangkan kita tidak melakukan itu untuk reverse proxy. Lalu solusinya bagaimana? Solusi untuk mengatasi gambar yang jadi 404 ketika di cache di reverse proxy adalah dengan memasukan proxy_pass nya ke block cache itu, contohnya begini:

location ~* \.(?:css|js)$ {
       expires 1d;  
        add_header Vary Accept-Encoding;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        add_header Cache-Control private;
        proxy_pass http://localhost:3000;
     }

atau jika gambar jadi begini:

location ~* \.(jpg|jpeg|gif|png|bmp|ico|svg|tif|tiff|webp)$ {
    expires 360d;
    #add_header Cache-Control "public, no-transform";
    add_header Vary Accept-Encoding;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        add_header Cache-Control private;
        proxy_pass http://localhost:1337;
}

Block confignya tetap ditaruh sejajar dengan location... Sekian terimakasih.

Sumber refernsi: https://stackoverflow.com/questions/69398786/adding-caching-for-specific-static-files-in-a-reverse-proxy-in-nginx