Nuxthub 사용기 (Worker와 Nuxt를 같이 사용중이라면 필독)

서론

Cloudflare worker를 사용하는 sh0rt.kr 을 개발하며 가장 중요했던 것은 분산 Sqlite 호환 데이터베이스인 D1에 접근하는 방법이였다.

D1에 접근하는 방법은 크게 두가지가 있다. Wrangler를 활용하는 방법과 @nuxthub/core 패키지를 사용하는 방법이다.

두가지의 차이점과 왜 @nuxthub/core 라이브러리를 사용해야 하는지를 간단히 살펴보자.

본론

Wrangler를 활용하려면 wrangler dev 명령어를 통해 Worker 환경과 비슷한 로컬 환경을 만들 수 있다. 하지만 단점이 명확하다.
Nuxt의 dev 모드에서는 D1에 접근할 수 없다는 것이다.

Cloudflare D1은 Sqlite와 호환되는 데이터베이스이다. 장점은 다음과 같다.

1. Worker와 같이 쓸 수 있는 DB다.
2. Cloudflare의 각 엣지에 자동으로 배포되고, 데이터도 자동으로 증분된다.

즉 Cloudflare worker를 도입하기 위해서 거의 무조건 활용하게 되는 데이터베이스다.

하지만 단점도 명확하다.

1. Cloudflare (Wrangler)에 종속적이다.
2. 트랜젝션 등 일부 기능은 활용할 수 없다.

이 중 1번 문제가 개발과정에서 가장 크게 다가올 것이다.
다만 이 문제는 해결법이 존재한다.

Nuxthub를 이용하는 방법이다.

Nuxthub는 Cloudflare Worker를 리셀링하는 업체이자 Worker의 부속 서비스를 Nuxt에서 접근하기 쉽게 만들어주는 도구이다.

마침 나는 Cloudflare worker를 활용하고 있어 라이브러리를 활용하기로 했다.

Nuxthub의 Installation 문서를 참고하자.

이미 Nuxt3를 활용하는 프로젝트라면

npx nuxi@latest module add hub
npm install -D wrangler

명령어로 모듈 설치와 활성화를 해준 뒤,

// nuxt.config.ts (.js)
  modules: ['@nuxthub/core'],
  hub: {
    // NuxtHub options
  }

옵션을 추가해주자.

hub에는 다음과 같은 기능들이 들어있다.

1. database - D1과 연결
2. blob - R2와 연결
3. analytics - Analytics engine(beta)와 연결
4. kv - Key-value 스토리지인 KV와 연결

이외에도 다양한 기능이 숨어있다.

나는 이 중 database만 활용하고, Analytics Engine은 Production 환경에서만 작동하도록 코드를 구성했다.

결론

Nuxt3와 Cloudflare worker를 같이 활용중이라면 엄청 매력적인 라이브러리이다. 만약 Worker를 직접 배포하기 싫다면 Nuxthub 리셀링을 활용해보자.

다음은 Turnstile에 대해 써보도록 하겠다. 이것도 Nuxt 환경에서 캡챠 띄우기와 검증이 금방 이루어진다.