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"
其中function
是netlify/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功能接收兩個參數:request
和context
:
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的更多信息。