Void로 Cloudflare Workers용 풀스택 앱을 배포한다

Void는 Vite 기반의 Cloudflare Workers용 풀스택 프레임워크다. React, Vue, Svelte, Solid로 UI를 만들고 같은 프로젝트에 서버 코드를 작성할 수 있다. 라우팅과 데이터 접근, 배포를 연결하며 앱 전반에서 타입을 공유한다.

파일 경로로 라우트를 정의한다. routes/api/users.ts의 핸들러는 /api/users를 제공하고, pages/users/index.tsx의 컴포넌트는 /users 페이지를 렌더링한다. 페이지에 대응하는 .server.ts 파일의 로더는 데이터를 읽어 타입이 지정된 속성을 컴포넌트에 전달한다. 액션은 폼 제출 등 데이터 변경을 처리하고 페이지를 갱신한다. 서버 코드는 서버에 남으며, 컴포넌트는 처음에는 서버에서 렌더링되고 이후 브라우저에서 탐색과 상호작용을 처리한다.

풀스택 UI에는 Pages 라우팅을 사용할 수 있다. 기존 클라이언트 라우터를 유지하면서 서버 라우트를 타입이 지정된 fetch로 호출하거나, 프런트엔드 없이 API만 만들 수도 있다.

void/db에서 db를 가져와 데이터베이스를 조회한다. Void는 개발 중 로컬 데이터베이스를 제공하고 배포할 때 데이터베이스를 준비한다. KV, 객체 스토리지, 큐도 코드에서 불러 쓸 수 있으며, 기존 리소스에 연결할 때는 설정을 사용한다. Drizzle 스키마가 데이터베이스 타입을 정의하고, 핸들러의 응답 타입은 추론된다. 타입이 지정된 fetch는 호출 측을 검사하며 페이지 로더와 액션의 타입은 컴포넌트와 폼까지 이어진다. 필드를 바꾸면 수정이 필요한 앱 부분을 확인할 수 있다.

Vite는 Cloudflare 런타임으로 앱의 로컬 실행을 지원한다. void deploy는 앱을 빌드하고 리소스를 준비한 뒤 데이터베이스 마이그레이션을 적용하고 배포한다. 환경 변수는 스키마와 로컬 값, 프로덕션 시크릿을 사용한다. 앱은 자체 Cloudflare 계정에 배포하거나 팀이 운영하는 Void 플랫폼에 연결할 수 있다. 두 방식은 같은 애플리케이션 API를 사용하며, 플랫폼에는 공유 접근, 배포 이력, 관리 기능이 추가된다.

Void는 기존 프레임워크와 정적 사이트도 배포할 수 있다. 이 경우 라우팅과 렌더링은 기존 프레임워크가 담당하고, Void는 리소스와 배포를 처리한다. 시작 방법은 빠른 시작 안내에서 확인할 수 있으며, 메타 프레임워크를 이미 사용한다면 통합 안내를 따르면 된다.