部署您的第一个函数
编写并部署一个简单的 Edge Function，直接通过 Supabase 项目处理自定义 API 端点或后端逻辑。
部署您的第一个函数 是 CoddyKit 上的免费 Supabase Backend as a Service 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Supabase Backend as a Service 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Supabase Backend as a Service 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Making Your Code Go Live
Welcome to deploying your first Supabase Edge Function! This lesson will guide you through taking your function code and making it accessible via an API endpoint.
Deploying means publishing your function so it can be called from your app, a web browser, or other services. It's how your backend logic goes live!
The Supabase CLI
To deploy Edge Functions, you'll primarily use the Supabase Command Line Interface (CLI). This tool helps you manage your Supabase project locally and interact with your remote backend.
- Ensure the CLI is installed and configured for your project.
- You'll use commands like
supabase functions newandsupabase functions deploy.
Creating a New Function
Let's start by creating a new Edge Function. Navigate to your project's root directory in your terminal and use the supabase functions new command:
This command creates a new folder for your function with an index.ts file, which is where your Deno (TypeScript/JavaScript) code will live.
supabase functions new my-first-functionFunction Code Structure
After creating the function, you'll find a new directory (e.g., supabase/functions/my-first-function) containing an index.ts file. This file is the entry point for your Edge Function.
Supabase Edge Functions are built on Deno, a secure runtime for JavaScript and TypeScript. They export a default function that handles incoming HTTP requests.
Writing a Simple Function
Now, let's write a basic 'Hello, World!' function. Open the index.ts file inside your new function's directory and replace its content with the following code:
This function simply returns a plain text response. It's a great starting point!
import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'
serve(async (req) => {
return new Response("Hello from your first Edge Function!", {
headers: { 'Content-Type': 'text/plain' },
})
})Deploying Your Function
With your code ready, it's time to deploy! Use the supabase functions deploy command, specifying your function's name:
The CLI will build your function and upload it to your Supabase project. Once deployed, it becomes a live API endpoint!
supabase functions deploy my-first-functionInvoking with cURL
After deployment, you can test your function. The easiest way is using cURL in your terminal. You'll need your Supabase project URL and your project's Anon Key (found in your project settings).
Replace the placeholders with your actual project details:
curl -X POST 'https://your-project-ref.supabase.co/functions/v1/my-first-function' \
-H 'Authorization: Bearer YOUR_ANON_KEY' \
-H 'Content-Type: application/json' \
-d '{}'Invoking from Web (JS)
You can also call your Edge Function from any web application using standard fetch API. Here's how you might invoke it from client-side JavaScript:
Remember to replace the placeholder URL and key with your actual project details.
async function callMyFunction() {
const SUPABASE_URL = "https://your-project-ref.supabase.co";
const SUPABASE_ANON_KEY = "YOUR_ANON_KEY";
try {
const res = await fetch(
`${SUPABASE_URL}/functions/v1/my-first-function`,
{
method: 'POST',
headers: {
'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({})
}
)
const data = await res.text() // Use .text() for plain text response
console.log(data)
} catch (error) {
console.error("Error calling function:", error)
}
}
callMyFunction()Passing Data & Redeploying
Functions are more useful when they can accept input! Let's update our function to take a name from the request body and respond with a personalized greeting.
After modifying the index.ts file, you'll need to run supabase functions deploy my-first-function again to push the changes live.
import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'
serve(async (req) => {
const { name } = await req.json() // Expects { "name": "..." }
const greeting = name ? `Hello, ${name}!` : "Hello there!"
return new Response(
JSON.stringify({ message: greeting }),
{ headers: { 'Content-Type': 'application/json' } },
)
})Quick Check: Deployment Steps
Which of the following is the correct sequence of steps to deploy a Supabase Edge Function after writing its code?
Recap: Your First Deployment!
You've successfully deployed your first Supabase Edge Function! Here's what we covered:
- Used the Supabase CLI to manage functions.
- Created a new function with
supabase functions new. - Wrote a simple Deno function in
index.ts. - Deployed it using
supabase functions deploy. - Invoked the function using
cURLand client-side JavaScript. - Learned to pass data to functions and redeploy changes.
Now you have a live backend endpoint ready for action!
常见问题解答
「部署您的第一个函数」课时是免费的吗？
是的 — 「部署您的第一个函数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Supabase Backend as a Service 课程的其余内容，请升级到 CoddyKit PRO。 Supabase Backend as a Service 课程共包含 4 节课。
「部署您的第一个函数」这节课中我会学到什么？
编写并部署一个简单的 Edge Function，直接通过 Supabase 项目处理自定义 API 端点或后端逻辑。 你通过在浏览器中直接运行的动手代码来练习 Supabase Backend as a Service，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Supabase Backend as a Service 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Supabase Backend as a Service 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「部署您的第一个函数」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Supabase Backend as a Service 课中编写并运行代码吗？
能。每节 Supabase Backend as a Service 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。