티스토리 뷰

Programming/All

Vercel에서 간단히 서버리스 함수 사용하기(Next.js 없이)

플릭L 2024. 11. 22. 00:00

서론

프론트엔드 개발을 하다 보면 서버리스 함수(Serverless Functions)를 사용하는 일이 잦다. 특히 Next.js에서는 pages/api 폴더에 함수만 작성하면 자동으로 서버리스 함수로 동작하는 것은 익숙한 사실이다. Vercel에 프로젝트를 배포할 때 Functions라는 기능으로 서비리스 함수를 구현하는 방식을 제공하는 것이 생각나서 한번 테스트 겸 작성을 해보았다.

꼭 Next.js 프로젝트가 아니어도 프로젝트의 api 폴더 안에 작성된 함수 파일을 Vercel에서는 서버리스 함수로 인식하고 동작한다는 것이다. 단순한 HTML 파일만 있는 프로젝트에서도 서버리스 함수를 간단하게 구현해서 api를 만들 수 있다는 것이 가능하다. 간단한 사실이지만, 누군가에는 새로운 사실이 될 수 있을 것 같아서 좀 더 정리를 해 보았다.

프론트엔드 개발자로서 서버 코드를 작성하는 게 익숙하지 않은 경우, 이 방법으로 간단한 API를 테스트하거나 빠르게 프로토타입을 만들 때 꽤 유용하다.


1. 기본 프로젝트 구조

아주 간단하게 시작했다. 아래처럼 폴더를 구성했다

project-root/
├── api/
│   └── hello.js
├── index.html
  • api/hello.js: 서버리스 함수 역할을 할 파일.
  • index.html: 브라우저에서 함수를 호출할 간단한 페이지.

2. 서버리스 함수 작성

api/hello.js 파일을 만들어 다음 코드를 작성했다.

export default function handler(req, res) {
    res.status(200).json({ message: 'Hello from Vercel Serverless Function!' });
}

이 함수는 GET 요청을 처리하며, 클라이언트가 /api/hello 경로로 호출하면 "Hello from Vercel Serverless Function!"이라는 메시지를 반환한다.

여기서 알게 된 점

  • req 객체로 요청 데이터를 읽을 수 있고,
  • res 객체로 클라이언트에 응답을 보낼 수 있다.

3. Vercel에 배포

프로젝트 준비가 끝나면 Vercel에 배포했다. 방법은 간단했다

  1. Vercel에 로그인.
  2. 프로젝트를 업로드하거나, vercel CLI를 사용해 배포.
npm install -g vercel
vercel

배포가 완료되면 /api/hello 경로에서 서버리스 함수가 잘 동작하는지 확인할 수 있다. 나의 경우, 배포된 URL에서 응답 메시지를 바로 확인할 수 있었다.

4. 클라이언트에서 함수 호출

index.html에서 이 서버리스 함수를 호출해 봤다. 간단한 버튼을 추가해, 클릭하면 API 호출 결과를 화면에 표시하도록 만들었다

<!DOCTYPE html>
<html>
<head>
    <title>Vercel Serverless Example</title>
</head>
<body>
    <h1>Vercel Serverless Functions</h1>
    <button id="callApi">Call API</button>
    <div id="response"></div>

    <script>
        document.getElementById('callApi').addEventListener('click', async () => {
            const response = await fetch('/api/hello');
            const data = await response.json();
            document.getElementById('response').innerText = data.message;
        });
    </script>
</body>
</html>

결과: 버튼을 누르자 서버리스 함수가 반환한 메시지가 화면에 출력되었다.

마무리하며

먼저 알게된 점, 느낀점을 정리해본다.

  • Next.js 없이도 서버리스 함수를 쓸 수 있다는 점이 정말 편리하다.
  • 단순한 정적 사이트에서도 API 호출을 테스트하거나 간단한 서버 로직을 구현하는 데 활용할 수 있다.
  • 프론트엔드 중심의 프로젝트에서 별도의 백엔드 환경 없이도 빠르게 데이터를 처리할 수 있다는 점이 강점이다.

외부 API 호출 연동하기, 기본 인증이나 API 키로 보안 강화하기, 간단한 CRUD API 예제 만들어 보기 등 서버리스 함수를 활용해서 만들어볼 거리가 많다. Vercel로 인해 작은 아이디어를 실험하는 문턱이 많이 낮아지는 것 같다.

반응형
저작자표시 비영리 변경금지

'Programming > All' 카테고리의 다른 글

웹용 이미지 파일에 대한 a to z  (0) 2024.11.22
텍스트가 포함된 이미지 생성하는 파이썬 코드  (1) 2024.11.15
Github Actions로 이미지 생성 자동화 하기  (5) 2024.11.14
Github Actions 의 workflow 주기적으로 실행하기(crontab 활용하기)  (9) 2024.11.10
Streamlit과 Cursor를 활용하여 빠르게 웹 어플리케이션 만들기  (1) 2024.11.08
댓글