Skip to content
Edge Functions

Edge 函数入门(仪表板)

Learn how to create, test, and deploy your first Edge Function using the Supabase Dashboard.

Supabase 让你可以直接在 Supabase 仪表板上创建 Supabase Edge 功能,这样就能轻松部署功能,无需设置本地开发环境。仪表板中的 Edge 功能编辑器对 Deno 和 Supabase 特定的 API 提供了内置语法高亮和类型检查。

🌐 Supabase allows you to create Supabase Edge Functions directly from the Supabase Dashboard, making it easy to deploy functions without needing to set up a local development environment. The Edge Functions editor in the Dashboard has built-in syntax highlighting and type-checking for Deno and Supabase-specific APIs.

本指南将带你了解如何使用 Supabase 仪表板创建、测试和部署你的第一个 Edge 功能。不到 10 分钟,你就可以让功能在全球运行起来。

🌐 This guide will walk you through creating, testing, and deploying your first Edge Function using the Supabase Dashboard. You'll have a working function running globally in under 10 minutes.


第一步:进入 Edge Functions 标签页 #

🌐 Step 1: Navigate to the Edge Functions tab

进入你的 Supabase 项目仪表板,找到 Edge Functions 部分:

🌐 Navigate to your Supabase project dashboard and locate the Edge Functions section:

  1. 去你的 Supabase 仪表板
  2. 选择你的项目
  3. 在左侧边栏,点击 Edge Functions

你会看到 Edge Functions 概览页面,在这里你可以管理所有的函数。

🌐 You'll see the Edge Functions overview page where you can manage all your functions.


第2步:创建你的第一个函数 #

🌐 Step 2: Create your first function

点击 “部署新函数” 按钮,然后选择 “通过编辑器”,可以直接在仪表板中创建函数。

🌐 Click the "Deploy a new function" button and select "Via Editor" to create a function directly in the dashboard.

Scaffold functions through the dashboard editor

第3步:自定义你的函数代码 #

🌐 Step 3: Customize your function code

仪表板会在代码编辑器中加载你选择的模板。下面是“Hello World”模板的样子:

🌐 The dashboard will load your chosen template in the code editor. Here's what the "Hello World" template looks like:

Hello World template

如果需要,你可以直接在浏览器编辑器中修改这段代码。这个函数接受一个包含 name 字段的 JSON 数据,并返回一个问候信息。

🌐 If needed, you can modify this code directly in the browser editor. The function accepts a JSON payload with a name field and returns a greeting message.


步骤 4:部署你的函数 #

🌐 Step 4: Deploy your function

当你对你的函数代码感到满意时:

🌐 Once you're happy with your function code:

  1. 点击编辑器底部的 “部署函数” 按钮
  2. 等待部署完成(通常需要10-30秒)
  3. 部署完成时你会看到成功消息

🚀 你的功能现在已自动分发到全球各地的边缘节点,在 https://YOUR_PROJECT_ID.supabase.co/functions/v1/hello-world 运行


步骤5:测试你的函数 #

🌐 Step 5: Test your function

Supabase 在仪表板里内置了测试 Edge Functions 的工具。你可以使用不同的请求负载、头信息和查询参数来执行你的 Edge Function。内置的测试工具会返回响应状态、头信息和内容。

🌐 Supabase has built-in tools for testing your Edge Functions from the Dashboard. You can execute your Edge Function with different request payloads, headers, and query parameters. The built-in tester returns the response status, headers, and body.

在你的函数详情页上:

🌐 On your function's details page:

  1. 点击 “测试” 按钮
  2. 配置你的测试请求:
    • HTTP 方法:POST(或你函数期望的任何方法)
    • 标题:添加任何需要的标题,比如 Content-Type: application/json
    • 查询参数:如有需要,请添加 URL 参数
    • 请求体:添加你的 JSON 数据
    • 授权:更改授权令牌(匿名密钥或用户密钥)

点击 "发送请求" 来测试你的功能。

🌐 Click "Send Request" to test your function.

Test your function

在这个例子中,我们通过发送一个带有 name 字段的 JSON 数据成功测试了我们的 Hello World 函数,并收到了预期的问候信息。

🌐 In this example, we successfully tested our Hello World function by sending a JSON payload with a name field, and received the expected greeting message back.


第6步:获取你的函数网址和密钥 #

🌐 Step 6: Get your function URL and keys

你的功能现在已经上线了,地址是:

🌐 Your function is now live at:

1
https://YOUR_PROJECT_ID.supabase.co/functions/v1/hello-world

要在你的应用中调用这个 Edge 函数,你需要 API 密钥。进入你的仪表板,导航到 设置 > API 密钥 来查找:

🌐 To invoke this Edge Function from within your application, you'll need API keys. Navigate to Settings > API Keys in your dashboard to find:

  • 可发布密钥 - 用于客户端请求(在启用 RLS 的浏览器中使用是安全的)
  • 秘密密钥 - 用于服务器端请求(保密!可绕过 RLS)

如果你想更新已部署的函数代码,点击你想编辑的函数,按需要修改代码,然后点击“部署更新”。这会用最新编辑的函数代码覆盖现有的部署。

🌐 If you’d like to update the deployed function code, click on the function you want to edit, modify the code as needed, then click Deploy updates. This will overwrite the existing deployment with the newly edited function code.


用法 #

🌐 Usage

现在你的函数已经部署好了,你可以在应用里调用它:

🌐 Now that your function is deployed, you can invoke it from within your app:

1
import { createClient } from '@supabase/supabase-js'
2
3
const supabase = createClient('https://[YOUR_PROJECT_ID].supabase.co', 'YOUR_PUBLISHABLE_KEY')
4
5
const { data, error } = await supabase.functions.invoke('hello-world', {
6
body: { name: 'JavaScript' },
7
})
8
9
console.log(data) // { message: "Hello JavaScript!" }

通过助手部署 #

🌐 Deploy via Assistant

你也可以使用 Supabase 的 AI 助手来自动生成和部署函数。

🌐 You can also use Supabase's AI Assistant to generate and deploy functions automatically.

进入你的项目 > 部署新函数 > 通过 AI 助手

🌐 Go to your project > Deploy a new function > Via AI Assistant.

Create Edge Function via AI Assistant

在提示中描述你希望函数做什么

🌐 Describe what you want your function to do in the prompt

Create Edge Function via AI Assistant

点击 部署,助手就会为你创建并部署函数。

🌐 Click Deploy and the Assistant will create and deploy the function for you.


下载 Edge 功能 #

🌐 Download Edge Functions

现在你的函数已经部署好了,你可以从本地开发环境访问它。要在本地开发环境中使用你的 Edge 函数代码,你可以通过仪表板或命令行下载你的函数源代码。

🌐 Now that your function is deployed, you can access it from your local development environment. To use your Edge Function code within your local development environment, you can download your function source code either through the dashboard, or the CLI.

仪表盘 #

🌐 Dashboard

  1. 去你的功能页面
  2. 在右上角,点击**“下载”**按钮

命令行接口 #

🌐 CLI

1
# Link your project to your local environment
2
supabase link --project-ref [project-ref]
3
4
# List all functions in the linked project
5
supabase functions list
6
7
# Download a function
8
supabase functions download hello-world

到这一步,你的函数已经下载到本地环境了。做出必要的修改,准备好后再重新部署吧。

🌐 At this point, your function has been downloaded to your local environment. Make the required changes, and redeploy when you're ready.

1
# Run a function locally
2
supabase functions serve hello-world
3
4
# Redeploy when you're ready with your changes
5
supabase functions deploy hello-world