Cloudflare Workers에 Upstash Redis 손쉽게 연결하기: 서버리스 URL 단축기 구축 가이드

Cloudflare가 최근 Cloudflare Workers를 위한 Upstash 통합 기능을 정식 출시했습니다. 이를 통해 Workers 환경에서 Upstash 제품을 훨씬 더 간편하게 활용할 수 있게 되었습니다. 이번 포스트에서는 Upstash Redis 통합을 사용해 서버리스 URL 단축기를 직접 만들어 보겠습니다.

시작하기

이 프로젝트는 다음 순서로 진행합니다.

• Upstash 데이터베이스 설정
• Cloudflare에서 Worker 생성
• Cloudflare Workers와 Upstash 연동
• 프로젝트 알고리즘 구현
• 애플리케이션 배포

1. 데이터베이스 생성하기

Upstash 콘솔로 이동한 뒤, Redis 섹션에서 Create database(데이터베이스 생성) 버튼을 클릭해 Redis 데이터베이스를 생성하세요.

이것으로 데이터베이스 준비가 끝났습니다. 정말 간단하죠!

2. Cloudflare Worker 생성하기

여기서는 Cloudflare CLI 도구를 사용해 Worker를 생성하겠습니다. 절차는 매우 간단합니다. 터미널을 열고 아래 명령어를 입력하세요.

npm create cloudflare@latest

명령어를 실행하면 애플리케이션의 옵션과 구성 설정이 차례로 안내되며, 마지막에는 Cloudflare 로그인을 요청합니다. 아래는 필자의 설정 예시와 그 결과 출력입니다.

단 한 줄의 명령어로 애플리케이션 생성과 배포까지 모두 마쳤습니다. 이 명령은 다음과 같은 폴더 구조를 초기화합니다.

url-shortener/
├── src/
│   └── worker.ts
├── node_modules/
├── package-lock.json
├── package.json
├── tsconfig.json
└── wrangler.toml

Upstash 통합 활성화 역시 마찬가지로 어렵지 않습니다.

3. Cloudflare – Upstash 연동하기

Cloudflare 대시보드에 접속하여 url-shortener 애플리케이션을 생성할 때 사용한 것과 동일한 계정으로 로그인합니다. 그런 다음 사이드바의 Workers & Pages > Overview(개요) 섹션으로 이동하면 목록에서 url-shortener 애플리케이션을 찾을 수 있습니다.

애플리케이션을 클릭하면 상세 페이지로 이동하며, 연동 작업은 여기서 진행합니다. 상세 페이지에서 Settings(설정) 탭으로 전환한 후 Integrations(통합) 섹션으로 이동하세요. 다양한 Worker 통합 목록이 표시되는데, 그중 Upstash Redis 항목의 Add Integration(통합 추가) 버튼을 클릭합니다.

통합 페이지에서 Upstash 계정에 연결한 후, 드롭다운 메뉴에서 url-shortener 데이터베이스를 선택하고 Save(저장) 버튼을 누르면 완료됩니다.

참고: Configure secrets(시크릿 구성) 단계에서는 시크릿 이름을 절대 변경하지 마세요. 이 자격 증명은 코드의 Redis.fromEnv(env) 라인에서 UPSTASH_REDIS_REST_URL과 UPSTASH_REDIS_REST_TOKEN으로 자동 인식됩니다.

4. URL 단축기 구현하기

구현은 꽤 단순합니다. 크게 두 가지 기능을 가집니다.

• POST 방식으로 URL이 전송되면 무작위로 생성된 키가 해당 URL에 할당됩니다. 이 키-URL 쌍은 나중에 조회할 수 있도록 Redis에 저장되며, 키는 Worker URL의 경로에 덧붙여져 <YOUR_WORKER_URL>/<KEY> 형식으로 사용자에게 전달됩니다.

• 사용자가 이전에 등록된 키를 경로로 하여 Worker URL에 접속하면, Redis에서 해당 키의 값을 조회합니다. 이후 307 응답 코드와 함께 사용자를 해당 URL로 리디렉션합니다.

애플리케이션은 src/worker.ts 파일에 구현하겠습니다. 아래는 URL 단축기의 기본 구현 코드입니다.

src/worker.ts

import { Redis } from "@upstash/redis/cloudflare";
 
export interface Env {
 UPSTASH_REDIS_REST_URL: string;
 UPSTASH_REDIS_REST_TOKEN: string;
}
 
export default {
 async fetch(
 request: Request,
 env: Env,
 ctx: ExecutionContext,
 ): Promise<Response> {
 const redis = Redis.fromEnv(env);
 
 /*
 generateRandomKey 함수는 7자리 영숫자 키를 반환합니다.
 동일한 키가 Redis에 이미 존재하면 새 키를 생성합니다.
 */
 async function generateRandomKey(): Promise<string> {
 const key: string = btoa(
 crypto.getRandomValues(new Uint8Array(2)).toString(),
 ).replaceAll("=", "");
 if (await redis.exists(key)) {
 return generateRandomKey();
 }
 return key;
 }
 
 /*
 요청 메서드가 POST인 경우, 요청 본문에서 "longUrl" 필드를 추출하고
 이 URL에 대한 새 키를 생성합니다.
 그런 다음 이 키-값 쌍을 Redis에 저장합니다.
 */
 if (request.method === "POST") {
 const requestUrl = request.url;
 const body = await request.text();
 const { longUrl } = JSON.parse(body);
 const key = await generateRandomKey();
 redis.set(key, longUrl);
 
 const responseUrl = requestUrl + key;
 return new Response(responseUrl);
 }
 
 const slug: string = request.url.split("/").pop() || "";
 const url = (await redis.get(slug)) as string;
 
 /*
 slug가 Redis DB의 키로 존재하면, 값에 담긴 URL로 리디렉션됩니다.
 slug가 Redis에 없거나 아예 입력되지 않았다면 오류를 반환합니다.
 */
 if (url) {
 return Response.redirect(url, 307);
 } else {
 const errorText = !slug
 ? "Please provide a slug."
 : `Slug ${slug} not found. `;
 
 return new Response(errorText, { status: 404 });
 }
 },
};

이제 알고리즘이 준비되었으니 마지막 단계만 남았습니다. 바로 애플리케이션 배포입니다. 터미널에서 url-shortener 폴더로 이동한 후 아래 명령어를 실행하세요.

npm run deploy

Cloudflare Worker가 이제 정상적으로 실행되고 있습니다! 애플리케이션 대시보드에서 테스트하거나 curl 요청으로 확인할 수 있습니다. 예시 요청은 다음과 같습니다. URL을 본인의 Worker URL로 바꿔 사용하거나, 필자의 구현으로 직접 테스트해 보셔도 좋습니다.

curl -X POST https://url-shortener.fahreddin.workers.dev \
 -d '{ "longUrl" : "https://google.com" }'

응답으로 받은 URL을 클릭하면 https://google.com으로 리디렉션되는 것을 확인할 수 있습니다.

마치며

튜토리얼을 끝까지 따라와 주셔서 감사합니다!

직접 확인하셨겠지만, 서버리스 함수와 강력한 Upstash Redis의 조합은 프로젝트에 무한한 가능성을 열어줍니다. 이 조합의 유연성과 효율성은 혁신적이면서도 반응성이 뛰어난 솔루션을 만들 수 있는 힘이 됩니다.

이 가이드는 어디까지나 시작점이라는 점을 기억하세요. 이 프로젝트를 확장하고 개선하는 데에는 한계가 없습니다.

궁금한 점이나 문제가 있다면 fahreddin@upstash.com으로 언제든지 문의해 주세요.

즐거운 코딩 되세요!