开发环境

第1步：安装 Deno CLI #

🌐 Step 1: Install Deno CLI

Supabase CLI 不使用标准的 Deno CLI 来本地运行函数。相反，它使用自己的 Edge Runtime 来保持开发环境和生产环境的一致性。

🌐 The Supabase CLI doesn't use the standard Deno CLI to serve functions locally. Instead, it uses its own Edge Runtime to keep the development and production environment consistent.

你可以参考Deno指南来用你喜欢的编辑器/IDE设置开发环境。

🌐 You can follow the Deno guide for setting up your development environment with your favorite editor/IDE.

单独安装 Deno 的好处是你可以使用 Deno LSP 来提升编辑器的自动补全、类型检查和测试功能。你还可以使用 Deno 内置的工具，比如 deno fmt、deno lint 和 deno test。

🌐 The benefit of installing Deno separately is that you can use the Deno LSP to improve your editor's autocompletion, type checking, and testing. You can also use Deno's built-in tools such as deno fmt, deno lint, and deno test.

安装完成后，你应该已经安装了 Deno，并且可以在终端中使用。用 deno --version 来验证一下

🌐 After installing, you should have Deno installed and available in your terminal. Verify with deno --version

第2步：设置你的编辑器 #

🌐 Step 2: Set up your editor

设置你的编辑器环境，以便获得正确的 TypeScript 支持、自动补全和错误检测。

🌐 Set up your editor environment for proper TypeScript support, autocompletion, and error detection.

VSCode/光标（推荐） #

🌐 VSCode/Cursor (recommended)

1. 从 VSCode 市场安装 Deno 扩展

2. 选项 1：自动生成（最简单） 运行 supabase init 时，当提示 “为 Deno 生成 VS Code 设置？[y/N]” 时选择 y

3. 选项 2：手动设置

   在你的项目根目录下创建一个 .vscode/settings.json：

   1
   {
   2
     "deno.enablePaths": ["./supabase/functions"],
   3
     "deno.importMap": "./supabase/functions/deno.json"
   4
   }

这个配置只为 supabase/functions 文件夹启用 Deno 语言服务器，而对其他所有文件则使用 VSCode 内置的 JavaScript/TypeScript 语言服务器。

🌐 This configuration enables the Deno language server only for the supabase/functions folder, while using VSCode's built-in JavaScript/TypeScript language server for all other files.

多根工作区 #

🌐 Multi-root workspaces

标准的 .vscode/settings.json 设置对于将 Edge Functions 与主应用代码放在一起的项目来说运作得非常顺利。不过，如果你的开发环境涉及以下情况，你可能需要多根工作区：

🌐 The standard .vscode/settings.json setup works perfectly for projects where your Edge Functions live alongside your main application code. However, you might need multi-root workspaces if your development setup involves:

• 多个仓库： 一个仓库放 Edge Functions，另一个仓库放主应用
• 微服务： 你需要并行开发的几个服务

对于这个开发工作流程，创建 edge-functions.code-workspace：

🌐 For this development workflow, create edge-functions.code-workspace:

1
{
2
  "folders": [
3
    {
4
      "name": "project-root",
5
      "path": "./"
6
    },
7
    {
8
      "name": "test-client",
9
      "path": "app"
10
    },
11
    {
12
      "name": "supabase-functions",
13
      "path": "supabase/functions"
14
    }
15
  ],
16
  "settings": {
17
    "files.exclude": {
18
      "node_modules/": true,
19
      "app/": true,
20
      "supabase/functions/": true
21
    },
22
    "deno.importMap": "./supabase/functions/import_map.json"
23
  }
24
}

你可以在 GitHub 找到完整的示例。

🌐 You can find the complete example on GitHub.

推荐的项目结构 #

🌐 Recommended project structure

建议你按照以下结构来整理你的函数：

🌐 It's recommended to organize your functions according to the following structure:

1
└── supabase
2
    ├── functions
3
    │   ├── deno.json           # Top-level Deno configuration
4
    │   ├── _shared             # Shared code (underscore prefix)
5
    │   │   ├── supabaseAdmin.ts # Supabase client with SECRET key
6
    │   │   ├── supabaseClient.ts # Supabase client with PUBLISHABLE key
7
    │   │   └── cors.ts         # Reusable CORS headers
8
    │   ├── function-one        # Use hyphens for function names
9
    │   │   └── index.ts
10
    │   └── function-two
11
    │       └── index.ts
12
    ├── tests
13
    │   ├── function-one-test.ts
14
    │   └── function-two-test.ts
15
    ├── migrations
16
    └── config.toml

• 使用“大函数”。通过组合相关功能来开发少量、大型函数。这可以最小化冷启动。
• 带连字符的名称函数（-）。这是最适合 URL 的方法
• 将共享代码存储在 _shared。将任何共享代码存放在以下划线开头的文件夹中（_）。
• 单独测试。为 单元测试 使用一个单独的文件夹，文件夹名称包括函数的名称，后面跟上 -test 后缀。

常用命令行指令 #

🌐 Essential CLI commands

熟悉一下开发和部署 Edge Functions 时最常用的 CLI 命令。

🌐 Get familiar with the most commonly used CLI commands for developing and deploying Edge Functions.

supabase start#

这个命令会在本地启动你整个 Supabase 堆栈：数据库、身份验证、存储和 Edge Functions 运行时。你开发的环境和最终部署的环境完全一样。

🌐 This command spins up your entire Supabase stack locally: database, auth, storage, and Edge Functions runtime. You're developing against the exact same environment you'll deploy to.

supabase functions serve [function-name]#

开发一个带有热重载的特定功能。你的函数在 http://localhost:54321/functions/v1/[function-name] 运行。当你保存文件时，你会立即看到变化，无需等待。

🌐 Develop a specific function with hot reloading. Your functions run at http://localhost:54321/functions/v1/[function-name]. When you save your file, you’ll see the changes instantly without having to wait.

或者，使用 supabase functions serve 一次性执行所有功能。

🌐 Alternatively, use supabase functions serve to serve all functions at once.

supabase functions deploy hello-world#

准备好就部署这个功能

🌐 Deploy the function when you’re ready