첫 함수 배포하기
Supabase 프로젝트에서 직접 사용자 지정 API 엔드포인트나 백엔드 로직을 처리하는 간단한 Edge Function을 작성하고 배포합니다.
첫 함수 배포하기은(는) CoddyKit의 무료 Supabase Backend as a Service 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 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!
자주 묻는 질문
“첫 함수 배포하기” 강의는 무료인가요?
네 — “첫 함수 배포하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Supabase Backend as a Service 강의 전체를 잠금 해제할 수 있습니다. Supabase Backend as a Service 강의에는 총 4개의 강의가 포함되어 있습니다.
“첫 함수 배포하기”에서 뭘 배우나요?
Supabase 프로젝트에서 직접 사용자 지정 API 엔드포인트나 백엔드 로직을 처리하는 간단한 Edge Function을 작성하고 배포합니다. 브라우저에서 직접 실행하는 실습 코드로 Supabase Backend as a Service을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Supabase Backend as a Service을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Supabase Backend as a Service은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“첫 함수 배포하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Supabase Backend as a Service 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Supabase Backend as a Service 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.