Nuxtjs3(unjs Nitro.js) Cloudflare D1 개발기

서론

Cloudflare worker를 이용해 URL Shorter를 만들어보려는 사이드 프로젝트 계획을 시작했다.

하지만 wrangler를 이용해 디버깅을 해야하는 등, 만만치 않았던 과정이였다.

하지만 Nitro.js의 문서를 살펴보다 보니 새로운 방법을 찾게 되었다.

본론

살펴본 문서는 다음과 같다.

Cloudflare는 Worker와 D1, KV Namespace와 같은 Serverless 환경을 제공하고 있다.
하지만 이것을 이용해 개발하는 과정은 조금 험난하다.

wrangler라는 cli 도구를 이용해야 개발 환경에서 D1과 같은 서비스에 접근하는 코드를 짤 수 있다.

하지만 이제는 다르다.

nitro-cloudflare-dev 패키지를 설치해 보자.

Nuxt3에서는 설치 후 다음과 같이 설정한다.

export default defineNuxtConfig({
  modules: ["nitro-cloudflare-dev"],
})

자세히는 해당 패키지의 npm 페이지를 살펴보자.

이 패키지를 사용하면 로컬 개발환경(npm run dev) 에서도 event.context.cloudflare 에 접근이 가능하다!

D1 binding namespace가 DB로 되어있다면 다음과 같은 코드를 사용할 수 있다!

import {H3Event} from "h3";

export default function (event: H3Event) {
    const { cloudflare } = event.context
    return cloudflare.env.DB
}

결론

비슷한 개발을 하는 분이 생길 것 같다.

앞으로 서버리스가 대세가 되어가고 있기 때문이다.

이 글을 보면서 헤메지 않았으면 한다.