Menyajikan File Statis — CompileDaily Study

Penjelasan

Meski Axum terutama dipakai untuk API JSON, kadang kamu juga perlu menyajikan file statis — misalnya frontend hasil build (`index.html`, file JS/CSS) atau folder upload gambar. Untuk ini, `tower-http` menyediakan `ServeDir`, sebuah `Service` Tower yang otomatis membaca file dari folder di disk dan mengirimkannya sebagai response dengan `Content-Type` yang sesuai. `ServeDir` dipasang sebagai fallback service (`.fallback_service(...)`) atau didaftarkan langsung sebagai handler pada path tertentu lewat `.nest_service(prefix, service)`. Ini bermanfaat kalau kamu ingin Axum sekaligus melayani API (`/api/*`) dan frontend statis (semua path lain) dari satu server yang sama. Untuk aplikasi production skala besar, biasanya file statis lebih baik disajikan lewat CDN atau web server khusus (Nginx), tapi untuk development atau aplikasi kecil, `ServeDir` bawaan Axum sudah lebih dari cukup.

Contoh Konsep

// cargo add tower-http --features fs

use axum::{routing::get, Router};
use tower_http::services::ServeDir;

async fn api_status() -> &'static str {
    "API jalan normal"
}

#[tokio::main]
async fn main() {
    let app = Router::new()
        .route("/api/status", get(api_status))
        // Semua path lain dilayani dari folder ./public
        .fallback_service(ServeDir::new("public"));

    let listener = tokio::net::TcpListener::bind("127.0.0.1:3000").await.unwrap();
    axum::serve(listener, app).await.unwrap();
}

Praktikum

Daftarkan folder "assets" agar bisa diakses lewat prefix "/static" memakai `.nest_service(...)`.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

`ServeDir` juga mendukung fallback file (misalnya `index.html` untuk Single Page Application) lewat `.not_found_service(ServeFile::new("public/index.html"))` — berguna kalau frontend-mu pakai client-side routing dan semua path yang tidak cocok file fisik harus tetap menampilkan `index.html`.