배포 대상 — Vercel, Cloudflare Pages, Tauri · React 19 Quest

Vite SPA의 배포물은 정적 파일과 SPA 경로 재작성 규칙이야. Vercel, Cloudflare Pages, Tauri에서 무엇이 같고 다른지 비교해.

Vercel

vercel.json에 SPA 경로 규칙을 두고 GitHub 저장소를 연결하면 커밋마다 빌드와 배포가 진행돼. 취미 프로젝트, 빠른 반복, 사용자 도메인, PR별 미리보기에 잘 맞아. 팀 요금과 대역폭 비용은 사용 규모가 커질 때 확인해야 해.

Cloudflare Pages

Git 저장소와 npm run build, 출력 디렉터리 dist를 지정하면 배포할 수 있어. 대역폭이 큰 앱과 전 세계에 캐시할 정적 파일에 강하고, 로컬에서는 Wrangler CLI로 확인할 수 있어. 무료 요금제의 빌드 제한과 catch-all redirect의 우선순위는 따로 살펴봐.

Tauri 데스크톱 앱

Tauri 2.0은 Vite SPA를 Rust 코어로 감싸 macOS의 dmg, Windows의 msi, Linux의 deb·rpm·AppImage 같은 설치 파일로 만들어. 운영체제 기능이 필요하거나 오프라인에서 동작해야 하고 별도 서버 런타임이 필요 없는 앱에 잘 맞아. 뒤의 Rust, Tauri, cwkCinder 퀘스트가 이 경로를 이어받아.

SPA 경로 재작성

정적 호스트가 /conversations/abc 요청을 받았는데 해당 파일이 없다면 /index.html을 보내 React Router가 처리하게 해야 해. Vercel은 vercel.json, Cloudflare Pages와 Netlify는 _redirects에 이 규칙을 적어. 서버를 거치지 않는 Tauri에는 필요하지 않아.

앱의 실제 배포 모양에 맞춰 골라. 공개 웹 앱과 빠른 미리보기에는 Vercel, 대역폭이 큰 정적 앱에는 Cloudflare Pages, 운영체제 기능과 오프라인 실행이 필요하면 Tauri가 잘 맞아. 익숙함만으로 고르지 말고 필요한 운영 조건을 기준으로 정해.

미리보기 배포도 출하 흐름의 일부야

Vercel과 Cloudflare Pages는 브랜치와 commit마다 고유 URL을 만들 수 있어. 리뷰할 때는 로컬 설명 대신 그 빌드의 URL을 공유하고, main에 반영된 정확한 commit이 프로덕션 READY가 됐는지 확인해.

Catch-all 규칙이 JavaScript와 CSS asset 요청보다 먼저 적용되면 브라우저가 HTML을 스크립트로 받아 파싱에 실패해. Deep link뿐 아니라 해시 asset의 HTTP 상태와 content type도 배포 뒤 확인해.

Code

vercel.json: SPA 전체 경로 재작성·json

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

public/_redirects: Cloudflare Pages / Netlify SPA 경로 재작성·text

# SPA 라우팅용 단일 줄 catch-all.
# Vite는 public/의 파일을 변환하지 않고 dist/로 복사해.
/*  /index.html  200

Tauri 2.0: Vite 앱을 네이티브 데스크톱으로 감싸기·bash

# 기존 Vite 프로젝트에 Tauri 추가.
npm create tauri-app@latest --template vanilla
# 또는 기존 프로젝트: @tauri-apps/cli 추가, `tauri init` 돌림,
# 'distDir' 를 본인 Vite dist/ 가리키게.

# Dev — Vite + Tauri 같이 돌고, 네이티브 윈도우 열림
npm run tauri dev

# Build — 네이티브 installer 생산
npm run tauri build
# → src-tauri/target/release/bundle/*

Exercise

Vercel, Cloudflare Pages, Tauri 중 하나를 골라 부트스트랩 앱을 개발 서버 밖에서 실행해. 웹 호스트라면 Git 저장소와 빌드 명령, 출력 폴더, SPA 경로 규칙을 연결하고, Tauri라면 React 템플릿으로 앱을 만든 뒤 데스크톱 창에서 실행해.

Hint

Vercel과 Cloudflare Pages는 Vite를 자동으로 감지해. Tauri는 처음 실행할 때 Rust 도구를 내려받고 첫 빌드를 하므로 시간이 오래 걸릴 수 있어.

배포 대상 — Vercel, Cloudflare Pages, Tauri

Vercel

Cloudflare Pages

Tauri 데스크톱 앱

SPA 경로 재작성

미리보기 배포도 출하 흐름의 일부야

Code

External links

Exercise

Progress

댓글 0