Netlify Edge功能是Netlify提供的一個非常有趣的功能,Netlify是一個流行的托管平台。

這個功能非常有趣,因為雖然Netlify以靜態托管聞名,但Edge功能允許您進行一些不太靜態的操作。

讓我們可以做到以下這些事情:

  • 地理定位
  • 本地化
  • A/B測試
  • 重定向
  • …等等

它們與Netlify Serverless功能類似,只不過它們運行在Netlify邊緣(Edge)上,這意味著它們更接近用戶並在多個CDN位置運行,計算方式也不同(每月3百萬次呼叫,而不是每個站點每月12.5萬呼叫)。

要啟用Edge功能,請在您的網站存儲庫中創建一個netlify.toml文件(如果您尚未擁有),並添加以下內容:

[[edge_functions]]
function = "hello"
path = "/hello"

其中functionnetlify/edge-functions/下的文件名,不包括.js擴展名。

path是此功能將可用於的URL路徑。

然後,您可以在文件netlify/edge-functions/hello.js中編寫一個功能:

export default () => new Response("Hello world");

Response是可用於將回應發送回客戶端的對象。

一旦您部署了存儲庫,就可以使用以下URL訪問其結果:

https://<您的網站域名>/hello

試試看吧!

在部署期間,您將在日誌中看到以下信息:

日誌

一旦部署完成,您將看到動態生成的帶有內容Hello, World!的頁面。

但是我建議您預先使用Netlify CLI的netlify dev在本地測試它們。請確保使用npm i -g netlify-cli將其更新到最新版本,否則它可能沒有啟用此功能。

您可以設置回應標頭,例如內容類型,通過將第二個參數傳遞給new Response()

export default () =>
  new Response('Hello world', {
    headers: { 'content-type': 'text/html' },
  });

Edge功能接收兩個參數:requestcontext

export default (request, context) => {
  //...
};

這兩個對象提供了一些有用的功能。

request允許您訪問所有request數據,它與使用Fetch API時獲得的請求對象相同。

context允許您訪問cookie、地理位置數據、json、日誌等。

您可以使用context.log()將日誌寫入日誌:

export default (request, context) => {
  context.log('test');
};

您可以在網站的Edge功能菜單中查看日誌:

日誌

您可以使用context.json函數返回JSON:

export default (request, context) => {
  return context.json({ hello: 'world' });
};

如果要編寫多個功能,則在netlify.toml中添加其他條目:

[[edge_functions]]
function = "hello"
path = "/hello"

[[edge_functions]]
function = "second"
path = "/second"

如果計劃使用基於Promise的API(如Fetch API)從遠程服務器獲取JSON,則功能可以是async的:

export default async () => await fetch('https://dog.ceo/api/breeds/image/random');

或者直接獲取圖像:

export default async () => await fetch('https://placekitten.com/g/300/300');

您可以獲取用戶的位置信息:

export default async (request, context) =>
  new Response(`
    Country code: ${context.geo?.country?.code}
    Country name: ${context.geo?.country?.name}
    City: ${context.geo?.city}
    Subdivision: ${context.geo?.subdivision?.code} - ${context.geo?.subdivision?.name}
  `);

提示:只適用於Edge,本地不起作用

在Netlify文檔中有一個示例,演示如何使用它來阻止來自某個國家的訪問。

使用cookie時,您可以以以下方式設置cookie

export default (request, context) => {
  context.cookies.set({
    name: "alreadyvisited",
    value: "yes",
  });
};

您可以使用context.cookies.get()來讀取cookie的值,或者使用context.cookies.delete()來刪除cookie。

您可以使用Deno.env.get()來訪問環境變量,例如:

Deno.env.get('YOUR_VARIABLE');

例如:

export default () => new Response(Deno.env.get('YOUR_VARIABLE'));

我在最後一個示例中提到Netlify Edge功能是基於Deno運行的。

在我的Deno教程中了解更多關於Deno的內容!

以上是關於Netlify Edge功能的概述,希望能給您一些在您的用例中如何使用它們的想法。

我認為它們非常酷,也許在您部署Next.js、Remix或SvelteKit應用程序到Netlify時,您甚至會在不知不覺中使用此功能。

建議您在https://edge-functions-examples.netlify.app上查看完整的示例庫,並在https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/api/上閱讀有關您可以使用的Web API的更多信息。