Reverse Proxy Nginx dan Docker Compose di Balik Cloudflare

    ports:
      # Bind to loopback only — nginx terminates TLS and proxies to this port.
      - "127.0.0.1:${APP_PORT:-3002}:3000"

Inilah seluruh kontrak antara proxy dan aplikasi. Port container 3000 hanya dipublikasikan di loopback host, pada APP_PORT, jadi satu-satunya jalan masuk dari luar adalah lewat nginx. Nomor port-nya berasal dari .env yang ditulis proses deploy.

      {
        source: "/images/(.*)",
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=31536000, immutable",
          }, // Cache images for 1 year
        ],
      },

Aplikasi, bukan nginx, yang menentukan kebijakan cache, lalu proxy dan CDN meneruskannya. Perhatikan apa yang dicocokkan aturan ini: setiap path di bawah /images/, termasuk yang ternyata 404. Bagian What breaks di bawah membahas kenapa itu penting.

      // Production only. Build chunks are content-hashed there, so a year of
      // immutable caching is safe. Turbopack's dev chunks keep the same name
      // across edits, and this header in development made browsers keep
      // running stale game code for as long as their cache lived — the
      // "sometimes WASD stops working" reports were a mix of old and new
      // modules, not the controller.
      ...(process.env.NODE_ENV === "production"
        ? [
            {
              source: "/_next/static/(.*)",
              headers: [
                {
                  key: "Cache-Control",
                  value: "public, max-age=31536000, immutable",
                }, // Cache static assets for 1 year
              ],
            },
          ]
        : []),

immutable adalah janji bahwa isi di balik sebuah URL tidak akan pernah berubah. Di production itu benar, karena nama chunk membawa hash isinya. Di development itu salah, dan browser terus menjalankan kode lama; komentarnya mencatat bug yang mengajarkan hal ini.

      {
        // The films, their posters and captions. A re-render keeps the file
        // names, so only a request carrying the render stamp
        // (lib/film-manifest.ts prints `?v=` on every URL) may be cached as
        // immutable; Cloudflare then serves the films from its edge. A bare
        // URL, from an old link, keeps revalidating against the origin.
        source: "/videos/:path*",
        has: [{ type: "query", key: "v" }],
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=31536000, immutable",
          },
        ],
      },

Cache busting saat nama file tidak bisa berubah. Kondisi has membuat header setahun hanya berlaku untuk URL yang membawa stempel ?v=, jadi render ulang mendapat URL baru, sementara tautan lama tanpa stempel tetap melakukan revalidasi.

/**
 * Every page answers in two representations at the same URL: HTML for
 * browsers, Markdown for agents that ask for it with `Accept: text/markdown`
 * (rendered by app/agent-md from the site's own data). Markdown requests are
 * rewritten before the locale middleware, so they get 200 at the URL they
 * asked for instead of a locale redirect, and carry `Vary: Accept`.
 *
 * Everything else goes through next-intl as before. Its locale redirects get
 * `Vary: Accept` here too; a rendered HTML page does not, because Next's App
 * Router page handler replaces the Vary header at render time (setHeader in
 * build/templates/app-page.js). Nothing caches in front of the site today;
 * if a shared cache is ever added, add `Vary: Accept` in nginx instead.
 */
export default function middleware(request: NextRequest): NextResponse {
  if (prefersMarkdown(request.headers.get("accept"))) {
    const url = request.nextUrl.clone();
    url.pathname = `${MARKDOWN_ROUTE}${request.nextUrl.pathname}`;
    return NextResponse.rewrite(url);
  }
  const response = intlMiddleware(request);
  response.headers.append("Vary", "Accept");
  return response;
}

Content negotiation di satu URL. Request Markdown ditulis ulang ke route-nya sendiri dan membawa Vary: Accept; halaman HTML tidak bisa membawanya. Satu baris di sini sudah usang: Cloudflare mem-proxy www sejak 2026-10-12, jadi sekarang memang ada yang meng-cache di depan situs. Kesimpulannya tetap berlaku, karena edge tidak pernah menyimpan HTML.