Vercel 배포에서 API 라우트를 사용하는 방법은?

Q1: Vercel에서 API 라우트란 무엇인가요?
A1: Vercel의 API 라우트는 서버리스 함수 형태로 동작하는 백엔드 엔드포인트입니다. 프론트엔드와 함께 동일한 프로젝트 내에 API를 작성하고 배포할 수 있어 별도의 서버 없이도 서버 측 로직을 처리할 수 있습니다.

Q2: API 라우트를 작성하려면 어디에 파일을 생성해야 하나요?
A2: 프로젝트 루트의 `api` 폴더(예: `pages/api` 또는 `src/pages/api`) 내에 JavaScript 또는 TypeScript 파일을 생성합니다. 파일 이름이 API 엔드포인트 URL 경로가 됩니다.

Q3: 기본적인 API 라우트 예제는 어떻게 되나요?
A3:
```js
export default function handler(req, res) {
res.status(200).json({ message: "Hello from Vercel API!" });
}
```
위 코드를 `pages/api/hello.js`로 저장하면 `/api/hello` 경로로 호출할 수 있습니다.

Q4: 요청 메서드(GET, POST 등)를 구분해서 처리할 수 있나요?
A4: 네, `req.method`를 사용해 HTTP 메서드를 확인하고 조건문으로 분기할 수 있습니다.
```js
export default function handler(req, res) {
if (req.method === "GET") {
res.status(200).json({ message: "GET 요청" });
} else if (req.method === "POST") {
res.status(200).json({ message: "POST 요청" });
} else {
res.status(405).json({ error: `Method ${req.method} Not Allowed` });
}
} ```

Q5: API 라우트에 환경변수를 사용할 수 있나요?
A5: 네, Vercel 프로젝트 설정에서 환경변수를 정의하고 `process.env.VARIABLE_NAME`으로 접근할 수 있습니다. 개발 과정에서는 `.env.local` 파일도 사용할 수 있습니다.

Q6: API 라우트는 어떤 언어와 프레임워크를 지원하나요?
A6: 기본적으로 Node.js 환경에서 JavaScript 및 TypeScript를 지원합니다. Next.js 기반 프로젝트에서는 Next.js API 라우트 문법을 그대로 사용하면 됩니다.

Q7: API 라우트 배포 시 별도 설정이 필요한가요?
A7: 별도 설정 없이 파일만 `api` 폴더에 배치하면 자동으로 서버리스 함수로 배포됩니다. Vercel이 자동으로 빌드하고 배포해줍니다.

Q8: CORS 문제 해결 방법은?
A8: API 라우트 내에서 직접 `Access-Control-Allow-Origin` 헤더를 설정해서 해결할 수 있습니다.
```js
export default function handler(req, res) {
res.setHeader("Access-Control-Allow-Origin", "*"); // 허용할 도메인으로 변경 권장
res.status(200).json({ message: "CORS 설정 완료" });
}
```

Q9: API 라우트에서 파일 업로드 처리할 수 있나요?
A9: 기본적으로 Vercel 서버리스 함수는 미들웨어 사용에 제약이 있으므로, 파일 업로드 시 폼 데이터 파싱 라이브러리보다 외부 스토리지 서비스(예: S3)와 직접 연동하거나, Vercel Edge Functions를 고려하는 것이 좋습니다.

Q10: API 라우트 호출 시 응답 시간 제한이 있나요?
A10: Vercel 서버리스 함수는 기본적으로 10초 응답 제한이 있으므로, 긴 작업이 필요하면 백그라운드 작업 또는 외부 서비스 활용을 권장합니다.

---
요약하자면, Vercel API 라우트는 `pages/api` 폴더 내 서버리스 함수 파일을 생성하여 HTTP 요청을 처리하는 방식이며, Next.js 문법을 그대로 사용합니다. 환경변수, CORS 설정, HTTP 메서드 분기 등이 가능하며, 별도 서버 없이 쉽게 백엔드 기능을 구현할 수 있습니다.

Vercel에서 API 라우트를 사용하는 방법은 매우 쉽습니다.

Vercel은 Next.js와 함께 작동하면서 서버리스 기능을 제공하므로 API 엔드포인트를 손쉽게 만들고 배포할 수 있습니다.

아래는 Vercel에서 API 라우트를 생성하고 사용하는 방법을 단계별로 설명합니다.

1. Next.js 프로젝트 생성하기 먼저 Next.js 프로젝트를 생성합니다.

다음 명령어를 실행하여 새 프로젝트를 만들 수 있습니다.

```bash npx create-next-app@latest my-api-project cd my-api-project ```

2. API 라우트 생성하기 Next.js 프로젝트의 `pages/api` 디렉토리에서 API 라우트를 생성합니다.

예를 들어, `hello.js`라는 파일을 만들어 보겠습니다.

- `pages/api/hello.js` ```javascript export default function handler(req, res) { res.status(200).json({ message: 'Hello, World!' }); } ``` 위의 코드는 `/api/hello` 엔드포인트로 GET 요청이 들어오면 "Hello, World!"라는 JSON 응답을 반환합니다.



3. API 라우트 테스트하기 로컬 개발 서버를 실행하여 API 라우트를 테스트할 수 있습니다.

```bash npm run dev ``` 브라우저를 열고 `http://localhost:3000/api/hello`에 접속하면 JSON 응답을 확인할 수 있습니다.



4. Vercel에 배포하기 API 라우트를 Vercel에 배포하려면 Vercel CLI를 사용하거나 GitHub와 같은 플랫폼에 배포할 수 있습니다.

a. Vercel CLI 사용하기 1. Vercel CLI를 설치합니다.

```bash npm i -g vercel ```

2. 프로젝트 디렉토리로 이동하여 Vercel에 로그인합니다.

```bash vercel login ```

3. 배포를 시작합니다.

```bash vercel ``` Vercel은 배포 프로세스를 안내하며, 배포가 완료되면 URL을 제공합니다.

b. GitHub와 연결하기 1. GitHub에 프로젝트를 푸시합니다.



2. Vercel 대시보드에 로그인 후, "New Project"를 클릭합니다.



3. GitHub 리포지토리를 선택하고, 설정을 완료한 후 배포합니다.



5. 배포된 API 라우트 사용하기 배포가 완료된 후 제공된 URL을 통해 API 라우트에 접근할 수 있습니다.

예를 들어, `https://your-project-name.vercel.app/api/hello`와 같은 URL로 접근하면 Vercel에서 배포한 API 엔드포인트에 대한 응답을 받을 수 있습니다.

요약 Vercel에서는 Next.js와 함께 API 라우트를 쉽게 만들고 배포할 수 있습니다.

API 라우트를 `/pages/api` 디렉토리에 추가하고, Vercel CLI나 GitHub를 통해 손쉽게 배포할 수 있습니다.

배포 후에는 다음과 같은 API 엔드포인트를 사용할 수 있습니다.