/

如何使用Netlify Edge功能

如何使用Netlify Edge功能

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

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

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

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

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

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

1
2
3
[[edge_functions]]
function = "hello"
path = "/hello"

其中function是netlify/edge-functions/下的文件名，不包括.js擴展名。

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

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

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

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

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

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

試試看吧！

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

日誌

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

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

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

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

Edge功能接收兩個參數：request和context：

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

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

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

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

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

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

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

日誌

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

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

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

1
2
3
4
5
6
7
[[edge_functions]]
function = "hello"
path = "/hello"

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

如果計劃使用基於Promise的API（如Fetch API）從遠程服務器獲取JSON，則功能可以是async的：

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

或者直接獲取圖像：

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

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

1
2
3
4
5
6
7
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：

1
2
3
4
5
6
export default (request, context) => {
  context.cookies.set({
    name: "alreadyvisited",
    value: "yes",
  });
};

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

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

1
Deno.env.get('YOUR_VARIABLE');

例如：

1
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的更多信息。

tags: [“Netlify”, “Edge Functions”, “Serverless Functions”, “Static Hosting”, “CDN”, “Geolocation”, “Localization”, “A/B Testing”, “Redirects”]