SvelteKit SSR(서버사이드 렌더링) 프로젝트를 Cloudflare Pages Functions 환경에 wrangler와 wrangler.toml을 이용해 직접 배포한 과정을 정리합니다.

1. SvelteKit 프로젝트 설정

• @sveltejs/adapter-cloudflare 어댑터 설치
  npm install -D @sveltejs/adapter-cloudflare
• svelte.config.js에 어댑터 적용
  

  import adapter from '@sveltejs/adapter-cloudflare';
  export default {
    kit: {
      adapter: adapter()
    }
  };

2. wrangler.toml 파일 작성

프로젝트 루트에 wrangler.toml 파일을 만들고 아래와 같이 작성합니다.

하나라도 빠지면 실패합니다.

name = "프로젝트이름"
pages_build_output_dir = ".svelte-kit/cloudflare"
compatibility_date = "2025-06-04"
compatibility_flags = [ "nodejs_compat" ]

• name: 프로젝트 이름(영문, 소문자, 숫자, 하이픈 등)
• pages_build_output_dir: SvelteKit Cloudflare 어댑터 빌드 결과 폴더
• compatibility_flags: SSR을 위한 Node.js 호환 플래그

3. 빌드 및 배포

• Cloudflare 계정 로그인
  npx wrangler login
• 프로젝트 빌드
  npm run build
• Cloudflare Pages Functions로 배포
  npx wrangler pages deploy .svelte-kit/cloudflare

4. 배포 결과 및 확인

• 배포가 완료되면 https://프로젝트명.pages.dev에서 SSR이 적용된 SvelteKit 사이트를 확인할 수 있습니다.
• Cloudflare Pages Functions 환경에서 SSR/Edge 기능이 정상 동작합니다.
• Node.js 내장 모듈(예: async_hooks)을 사용하는 경우 compatibility_flags 옵션이 반드시 필요합니다.

5. 주요 에러 및 해결법

• async_hooks 에러: wrangler.toml에 compatibility_flags = [ "nodejs_compat" ] 추가
• Missing top-level field "name": wrangler.toml에 name = "프로젝트이름" 추가
• pages_build_output_dir 경고: wrangler.toml에 pages_build_output_dir = ".svelte-kit/cloudflare" 추가

6. 참고 자료

• Cloudflare 공식 SvelteKit 배포 가이드
• SvelteKit Cloudflare 어댑터 공식 문서
• SvelteKit Cloudflare 배포 실전 블로그

Github 연동해서 배포하면 이런 설정은 필요없습니다.

SvelteKit은 빠르고 유연한 웹 프레임워크로, 최근에는 npx sv create 방식으로 프로젝트를 생성하는 것이 권장됩니다.

📦 프로젝트 생성 명령어

npx sv create my-app

my-app 대신 원하는 프로젝트명을 넣으면 됩니다.

📂 생성 후 기본 작업

cd my-app
npm install
npm run dev

이후 http://localhost:5173에서 프로젝트를 확인할 수 있습니다.

🛠️ 선택 가능한 추가 도구 기능

💡 추천 조합 예시

• 웹앱 개발: Tailwind CSS, ESLint, Prettier, Vitest, Lucia, Drizzle
• 블로그/문서 사이트: MDsveX, Prettier, ESLint, Tailwind CSS
• 디자인 시스템/대규모 UI: Storybook, Prettier, ESLint, Vitest, Tailwind CSS

🔗 참고 링크

• SvelteKit 공식 문서

SvelteKit 애플리케이션에서 MongoDB를 사용하고, 그 데이터를 Redis로 캐시하여 성능을 최적화하는 방법을 소개합니다. 이 글에서는 Redis와 MongoDB를 통합하는 방법과 함께, 캐시를 적용하여 더 빠르고 효율적인 데이터를 제공하는 방법을 설명합니다.

1. 환경 설정

먼저, SvelteKit 애플리케이션에서 Redis와 MongoDB를 사용할 수 있도록 환경을 설정해야 합니다.

필요한 패키지 설치

먼저 Redis와 MongoDB를 사용하기 위한 패키지를 설치합니다. 터미널에서 아래 명령어를 실행하여 필요한 라이브러리를 설치합니다:

npm install redis mongodb ioredis

Redis 연결 설정

Redis 연결을 위한 설정을 `src/lib/redis.js` 파일에 작성합니다. 아래 코드처럼 Redis 연결을 설정하고 이를 다른 파일에서 사용할 수 있게 export합니다.

// src/lib/redis.js
import Redis from 'ioredis';

// Redis 연결 설정 (실제 환경에 맞게 수정해야 함)
const redis = new Redis({
  host: '192.168.1.10',   // Redis 서버 주소
  port: 6379,          // 기본 포트
  password: '',        // 패스워드 설정이 필요하다면
});

export default redis;

위 코드에서는 Redis 서버 주소, 포트, 비밀번호를 설정하고, `ioredis` 패키지를 사용해 Redis 클라이언트를 생성한 후 export합니다. 이렇게 설정된 Redis 클라이언트를 다른 파일에서 import하여 사용할 수 있습니다.

2. 캐시 구현

MongoDB에서 데이터를 가져오기 전에 Redis 캐시를 먼저 확인하여 데이터가 이미 캐시되어 있는지 확인합니다. 만약 캐시가 없다면 MongoDB에서 데이터를 조회한 후 Redis에 저장합니다.

캐시 조회 및 저장 로직

캐시 조회 및 저장을 위한 기본적인 로직을 작성합니다. Redis에서 데이터를 조회하고, 데이터가 없으면 MongoDB에서 가져와서 Redis에 저장합니다.

import redis from '$lib/redis';
import { MongoClient } from 'mongodb';

// MongoDB 연결 설정
const mongoClient = new MongoClient('mongodb://localhost:27017');
const db = mongoClient.db('your_database_name');
const collection = db.collection('your_collection_name'); 

// 예시: 상품 정보 조회
export async function load() {
  const productId = 987;
  const cacheKey = `product:${productId}`;  // 캐시 키 설정

  // Redis에서 데이터 조회
  let cachedData = await new Promise((resolve, reject) => {
    redis.get(cacheKey, (err, data) => {
      if (err) {
        return reject(err);
      }
      resolve(data ? JSON.parse(data) : null);
    });
  });

  // 캐시가 없으면 MongoDB에서 조회 후 Redis에 저장
  if (!cachedData) {
    console.log('캐시가 없어 MongoDB에서 조회');
    await mongoClient.connect();
    const data = await collection.findOne({ productId });

    // MongoDB에서 데이터를 가져왔다면 Redis에 캐시 저장
    if (data) {
      redis.setex(cacheKey, 3600, JSON.stringify(data)); // 1시간 동안 캐시
      cachedData = data;
    }
  }

  return {
    props: { data: cachedData },
  };
}

코드 설명

• 캐시 조회: `redis.get(cacheKey)`를 통해 Redis에서 캐시된 데이터를 가져옵니다.
• 캐시가 없을 경우: 캐시된 데이터가 없으면, MongoDB에서 데이터를 조회하여 Redis에 캐시하고 반환합니다.
• 캐시 저장: `redis.setex(cacheKey, 3600, JSON.stringify(data))`를 사용하여 1시간 동안 데이터를 Redis에 저장합니다.

3. 캐시 만료 및 관리

Redis에서 저장한 데이터는 일정 시간이 지나면 만료됩니다. 이를 통해 데이터를 최신 상태로 유지할 수 있습니다. Redis는 기본적으로 **만료 시간**을 설정할 수 있으며, 이를 통해 데이터가 일정 시간 후에 자동으로 삭제되도록 할 수 있습니다.

캐시 만료 시간 설정

위 코드에서 `setex`를 사용하여 만료 시간을 설정했습니다. 만약 더 세밀한 만료 시간 설정이나 캐시 정책을 관리하고 싶다면 Redis의 `maxmemory-policy` 등을 활용할 수 있습니다.

캐시 갱신

만약 데이터가 변경되면 캐시도 갱신해야 합니다. 예를 들어, 상품 정보를 업데이트할 때마다 Redis의 해당 캐시를 삭제하고 새로운 데이터를 캐시할 수 있습니다. Redis에서 데이터를 삭제하는 방법은 `del` 명령어를 사용합니다.

redis.del(cacheKey); // 캐시 삭제
  redis.setex(cacheKey, 3600, JSON.stringify(updatedData)); // 갱신된 데이터 캐시 저장

4. Redis와 MongoDB의 장점

• 성능 향상: Redis는 메모리 기반 캐시 시스템으로 매우 빠르기 때문에, MongoDB와 같은 데이터베이스의 부담을 줄여줍니다.
• 데이터베이스 부하 감소: 캐시된 데이터를 Redis에서 빠르게 읽을 수 있기 때문에, MongoDB나 다른 데이터베이스에 대한 부하를 줄일 수 있습니다.
• 데이터 최신화 관리: Redis는 캐시 만료 시간 설정을 통해 일정 주기로 데이터를 최신 상태로 유지할 수 있습니다.

5. 결론

이번 글에서는 SvelteKit과 MongoDB를 연동하여 Redis 캐시를 사용하여 성능을 최적화하는 방법에 대해 설명했습니다. 캐시를 잘 활용하면 데이터를 빠르게 조회하고, 데이터베이스의 부하를 줄일 수 있습니다. Redis와 MongoDB의 연동을 통해 더 나은 성능을 제공하는 애플리케이션을 만들 수 있습니다.