Render와 서버리스 Redis(Upstash)로 Next.js 앱 배포하기

Render는 즉각적인 배포와 자동 스케일링(오토스케일링) 등을 지원하는 강력한 인프라 플랫폼입니다. 이번 튜토리얼에서는 Upstash를 활용해 간단한 Next.js 애플리케이션을 만들고, 이를 Render에 배포하는 과정을 단계별로 살펴보겠습니다.

참고: 이 튜토리얼은 Upstash에 Redis 인스턴스가 이미 생성되어 있다고 가정합니다. 아직 설정하지 않았다면 Upstash 콘솔에서 몇 분 안에 무료로 생성할 수 있습니다.

시작하기

먼저 새로운 Next.js 앱을 생성하고 해당 폴더로 이동합니다.

npx create-next-app upstash-render && cd upstash-render

여기서는 폴더 이름을 upstash-render로 지정했지만, 원하는 이름으로 자유롭게 변경하셔도 됩니다.

다음으로 Upstash Redis SDK를 설치합니다. 이 SDK를 사용하면 Redis 인스턴스와 훨씬 간편하게 통신할 수 있습니다. npm 또는 Yarn 중 편한 패키지 매니저를 사용하세요.

Yarn 사용 시:

yarn add @upstash/redis

npm 사용 시:

npm i @upstash/redis

환경 변수 복사하기

SDK 설치가 완료되었으니, 이제 필요한 환경 변수를 .env.local 파일에 저장하겠습니다. Upstash 콘솔에서 UPSTASH_REDIS_REST_URL과 UPSTASH_REDIS_REST_TOKEN 두 값을 복사해 아래와 같이 입력합니다.

UPSTASH_REDIS_REST_URL=YOUR_REST_URL_HERE
UPSTASH_REDIS_REST_TOKEN=YOUR_REST_TOKEN_HERE

Q: 왜 .env 대신 .env.local을 사용하나요?
A: 로컬 환경 파일을 사용하면 개발 단계에서 환경 변수를 안전하게 관리할 수 있고, Render에 배포하기 전에 대시보드에서 환경 변수를 별도로 설정할 수 있기 때문입니다.

조회수 카운터 구현하기

이제 애플리케이션에 간단한 조회수 카운터를 구현해 보겠습니다. 먼저 pages/index.js 파일을 열고 앞서 설치한 SDK를 임포트합니다. 파일 상단은 다음과 같아야 합니다.

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { Redis } from "@upstash/redis";

const redis = Redis.fromEnv();

파일 하단에는 getServerSideProps를 활용해 서버 사이드에서 Upstash 데이터베이스에 요청을 보내도록 작성합니다.

export async function getServerSideProps(ctx) {
  // 현재 경로를 키로 사용
  const key = ctx.req.url;
  // 현재 조회수 가져오기
  const views = await redis.get(key);
  // 조회수 1 증가
  await redis.incr(key);
  return {
    props: {
      views: views ? parseInt(views) : 0,
    },
  };
}

완성되었습니다! 이제 누군가 페이지를 요청할 때마다 해당 페이지의 조회수가 1씩 올라갑니다. 이 구현은 [slug].js 같은 동적 라우트 페이지에서도 그대로 재사용할 수 있습니다. 그렇다면 이 값을 웹페이지에 어떻게 표시할 수 있을까요?

페이지 상단, 임포트 문 바로 아래에서 다음 코드를 찾을 수 있습니다.

export default function Home() {

이 줄을 아래와 같이 수정합니다.

export default function Home({ views }) {

getServerSideProps를 통해 반환된 views 값은 props로 전달되며, 컴포넌트 내에서 views 변수를 참조하는 것만으로 화면에 표시할 수 있습니다. 이 예제에서는 헤딩 아래의 설명 문구를 제거하고 다음과 같이 바꿔 보았습니다.

<p className={styles.description}>이 페이지는 지금까지 {views}번 조회되었습니다</p>

이제 페이지를 새로고침할 때마다 조회수가 1씩 증가하는 것을 확인할 수 있습니다!

GitHub에 푸시하기

다음 단계에서 Render로 손쉽게 배포하기 위해 코드를 GitHub에 푸시하겠습니다. GitHub에서 새 저장소를 만든 뒤, 아래 명령어를 순서대로 실행합니다.

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/your_username/repo_you_just_made.git
git push origin main

위 명령어를 실행하면 방금 생성한 GitHub 저장소에 코드가 업로드됩니다.

Render에 배포하기

Upstash와 함께 앱을 잘 만들었습니다. 이제 어떻게 배포해야 할까요? Render가 그 답을 가지고 있습니다. 무료 계정을 만드는 것부터 시작해 보겠습니다.

먼저 Render 대시보드로 이동합니다.

Google, GitHub 등 제공되는 인증 공급자로 로그인하거나, 이메일과 비밀번호를 사용해 가입할 수 있습니다.

회원가입 후 이메일 인증을 요청받게 되므로, 받은 메일의 링크를 클릭해 인증을 완료하세요.

인증 후 리디렉션되는 페이지에서 "New Web Service" 버튼을 클릭합니다.

"New Web Service"를 누르면 이전 단계에서 푸시한 저장소의 URL을 붙여넣을 수 있습니다.

다음으로 배포 설정을 구성합니다. 시작 명령(start command)은 yarn start, 빌드 명령(build command)은 yarn; yarn build로 지정하고, 환경(Environment)은 Node로 선택하세요. 리전 등 나머지 옵션은 취향에 따라 자유롭게 설정하면 됩니다.

이 앱은 실행에 많은 리소스가 필요하지 않으므로 Render의 무료(Free) 플랜을 선택해도 충분합니다.

마지막 단계로 환경 변수를 추가합니다. 앞서 만든 .env.local 파일 또는 Upstash 콘솔에서 값을 확인할 수 있습니다.

이제 "Create Web Service" 버튼을 클릭하세요! 배포가 잘 되기를 바라봅니다.

배포가 완료될 때까지 몇 분 정도 기다린 뒤, 화면 좌상단에 표시된 URL로 접속해 결과를 확인합니다.

실제 배포 예시: https://upstash-example.onrender.com

축하합니다!

Next.js와 Upstash로 만든 애플리케이션을 Render에 성공적으로 배포했습니다!

Twitter에서 @upstash를 팔로우하고, Discord 커뮤니티에도 참여해 보세요.

프로젝트 소스 코드:
https://github.com/upstash/redis-examples/tree/master/using-render

동작 데모:
https://upstash-example.onrender.com/