重點整理

• Turborepo 加速構建：Turborepo 是一種提升構建速度的解決方案，特別適合使用 Next.js 的網站。它透過緩存和依賴追蹤技術，只構建必要的部分來加速構建過程。

• 遠端快取的祕密：Turborepo 的一個強大功能是「全球遠端快取」，可以讓開發環境和生產環境之間共享構建成果，同時團隊成員之間也可以共享。

• 自訂遠端快取：儘管 Vercel 推薦使用他們的快取服務，Turborepo 支援自訂遠端快取。本教學展示如何使用 Netlify Edge Function 和 Blobs 來構建自訂的遠端快取系統，並只需不到 100 行程式碼。

• 實作步驟：

  1. 設置 /v8/artifacts/:hash 的 GET 和 PUT 請求端點。
  2. 使用 Bearer token 驗證請求，並在 Netlify 中設置環境變數儲存 token。
  3. 使用 Netlify Blobs 存儲構建工件（artifacts）。
  4. 實作上傳 (PUT) 和下載 (GET) 的功能。

• 簡單的操作流程：

  • 可使用已發佈的版本來自動化快取設置。
  • 在 .turbo/config.json 中設置遠端快取配置，並在環境變數中設定 TURBO_TOKEN。

🏎️💨 使用單一 Edge Function 透過 Turborepo 遠端快取加速構建

TurboRepo 的加速技巧

Monorepo 是組織專案的好工具，但當專案變得複雜、擁有許多相互依賴的封包時，可能導致構建速度變慢。Turborepo 提供了一個很棒的解決方案，特別是對於 Next.js 網站，它使用了很多聰明的技術來確保只構建絕對必要的部分，通過大量的緩存和依賴追蹤來達到加速構建的目的。

TurboRepo 遠端快取的祕密

Turborepo 最巧妙的技術之一是「全局遠端快取」，它允許你在本地開發環境和生產構建之間，以及團隊成員之間共享構建產物。它在背景中工作，無所不在地加速你的構建。

自訂遠端快取伺服器（不到 100 行代碼）

儘管 Turborepo 目前支援的官方遠端快取文件並不完善，但其 API 非常簡單。通過使用 Netlify Blobs 來存儲構建工件，加上 Edge Function 處理 API，實作一個遠端快取伺服器不超過 100 行程式碼。

實作範例代碼

import type { Config } from "@netlify/edge-functions";

export default async function handler(request: Request, context: Context) {
  // 驗證邏輯
  const bearerHeader = request.headers.get("authorization");
  const token = bearerHeader?.replace("Bearer ", "");
  if (!token || token !== Netlify.env.get("TURBO_TOKEN")) {
    console.log("Unauthorized");
    return new Response("Unauthorized", { status: 401 });
  }

  const url = new URL(request.url);
  const teamId = url.searchParams.get("teamId") ?? "team_default";

  // 使用 Netlify Blobs 儲存構建工件
  const store = getStore(`artifacts-${encodeURIComponent(teamId)}`);
  const hash = context.params?.hash || url.pathname.split("/").pop();
  if (!hash) {
    console.log("Missing hash");
    return new Response("Not found", { status: 404 });
  }

  const key = encodeURIComponent(hash);

  if (request.method === "PUT") {
    const blob = await request.arrayBuffer();
    if (!blob) {
      console.log("No content");
      return new Response("No content", { status: 400 });
    }
    await store.set(key, blob);
    return new Response("OK");
  }

  try {
    const blob = await store.get(key, { type: "arrayBuffer" });
    if (!blob) {
      return new Response(`Artifact ${hash} not found`, { status: 404 });
    }

    const headers = new Headers();
    headers.set("Content-Type", "application/octet-stream");
    headers.set("Content-Length", blob.byteLength.toString());
    headers.set("Netlify-CDN-Cache-Control", "public, s-maxage=31536000, immutable");
    headers.set("Netlify-Vary", "header=Authorization,query=teamId");

    return new Response(blob, { headers });
  } catch (e) {
    console.log(e);
    return new Response(e.message, { status: 500 });
  }
}

export const config: Config = {
  method: ["GET", "PUT"],
  path: "/v8/artifacts/:hash",
  cache: "manual",
};

這段代碼展示了如何設置遠端快取伺服器，並在 Netlify 上進行部署，以加速 Turborepo 的構建過程。