Vite는 React, Vue, Svelte, Solid, 일반 JavaScript 프로젝트를 정적 파일 폴더 dist/로 빌드합니다. Lobsite는 그 폴더를 호스팅합니다. npm run build를 실행한 다음 npx lobsite를 실행하면 HTTPS가 적용된 *.lobsite.app 주소로 앱이 공개됩니다. 클라이언트 라우팅이 있다면 설정 하나로 딥 링크가 작동합니다.
Vite 템플릿을 사용하여 브라우저 게임을 만드시나요? Phaser 호스팅 가이드는 이 배포 워크플로우와 함께 게임 자산, 캔버스 크기 조정 및 플레이 테스트 빌드를 다룹니다.
작동 방식
npm run build(즉vite build)로 빌드하세요. 앱은dist/에, 해시된 파일은dist/assets/에 생성됩니다.- 프로젝트에서
npx lobsite를 실행하세요. Vite가 이미 빌드에 복사한public/이 아니라dist/를 배포합니다. 첫 배포는 계정이 필요 없으며 6시간 동안 유지됩니다. - 앱에 라우터가 있다면 싱글 페이지 모드를 켜세요.
lobsite.toml에spa = true를 추가하거나 사이트 설정의 싱글 페이지 앱을 켜세요. 그런 다음 가져오기 링크로 무료 계정에 사이트를 유지하세요.
라우팅과 싱글 페이지 모드
React Router, Vue Router 또는 TanStack Router를 사용하는 Vite 앱에는 index.html이 하나 있습니다. /settings를 직접 열면 서버에 존재하지 않는 파일을 요청합니다. 싱글 페이지 모드를 켜면 Lobsite가 해당 경로에 index.html로 응답하고 라우터가 페이지를 그립니다.
# lobsite.toml
spa = true
페이지 요청에만 앱이 제공됩니다. 오래된 /assets/index-3f9a.js 같은 없는 파일은 실제 404를 받으므로, 배포 후에도 이전 버전을 열어 둔 방문자는 스크립트 대신 HTML이 아닌 명확한 오류를 받습니다. package.json에 라우터가 있고 싱글 페이지 모드가 꺼져 있으면 배포 시 팁이 출력됩니다. 자세한 내용은 문서를 참고하세요.
vite.config와 빌드
- **
base**는 기본값/로 유지하세요. 앱은 주소의 최상위에서 제공됩니다. GitHub Pages 프로젝트 사이트에만 설정하고, 옮길 때 제거하세요. VITE_로 시작하는 환경 변수는 빌드에 기록됩니다. 앱을 여는 누구나 볼 수 있으므로 시크릿을 넣지 마세요..env파일 자체는 배포되지 않습니다.- 여러 페이지(HTML 파일이 둘 이상인
build.rollupOptions.input)는 멀티 페이지 사이트입니다. 각 페이지가 파일이므로 싱글 페이지 모드가 필요 없습니다. - **
npm run preview**는dist/를 로컬에서 제공하며, 배포 전 가장 빠른 확인 방법입니다.
해시된 파일 캐싱
Vite는 index-3f9a.js처럼 각 파일 내용의 해시를 이름에 넣으므로 같은 이름의 파일은 절대 바뀌지 않습니다. Lobsite도 파일을 내용으로 저장하므로 배포는 변경된 청크만 업로드합니다. 브라우저가 이 파일을 1년 동안 보관하게 하려면 헤더 규칙을 추가하세요.
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
index.html은 항상 다시 확인되므로 방문자는 배포 직후 새 버전을 받습니다.
lobsite.toml의 spa = true 또는 대시보드의 스위치 하나면 됩니다. 딥 링크로 앱이 열리고, 없는 파일은 여전히 404입니다.
파일은 해시로 저장됩니다. 변경되지 않은 사이트를 다시 배포하면 0바이트가 업로드됩니다.
공개 전에 미리 보세요. 리디렉션까지 포함해 클릭 한 번으로 롤백합니다.
모든 사이트는 첫 배포부터 HTTPS가 적용된 *.lobsite.app 주소를 받습니다.
리디렉션, 헤더, 폼은 lobsite.toml에 있으며 각 배포와 함께 이동합니다.
계정 없는 배포는 6시간 동안 공개됩니다. 가져오기 링크로 무료로 유지할 수 있습니다.
Vite 호스트 비교
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| 싱글 페이지 앱의 딥 링크 | spa = true 또는 대시보드 스위치 |
_redirects 규칙 |
vercel.json의 리라이트 |
아니요: index.html을 404.html로 복사, 상태 404로 제공 |
| 없는 스크립트 파일 | 404 | 앱의 index.html |
앱의 index.html |
404 |
| 서버에서 빌드 | 아니요: dist/ 배포 |
예 | 예 | GitHub Actions에서 |
| 첫 배포 전 계정 | 불필요: 6시간 공개 후 무료로 유지 | 필요 | 필요 | 필요, 저장소도 필요 |
| 커스텀 도메인 | 예, 무료 | 예 | 예 | 예 |
Netlify와 Vercel은 Git에서 빌드하고 서버 함수를 실행합니다. Lobsite는 빌드된 Vite 앱을 내 컴퓨터, CI 또는 AI 에이전트에서 공개하는 가장 빠른 방법이며, 싱글 페이지 라우팅은 한 줄 또는 클릭 한 번입니다.
자주 묻는 질문
Vite 앱에서 홈페이지 외의 페이지에 "Not found"가 표시되는 이유는 무엇인가요?
앱이 클라이언트 라우팅을 사용하며 서버에는 해당 경로의 파일이 없습니다. 싱글 페이지 모드를 켜세요. lobsite.toml의 spa = true 또는 사이트 설정의 싱글 페이지 앱입니다.
Lobsite가 Vite 빌드를 실행하나요?
아니요. 내 컴퓨터나 CI에서 빌드한 다음 dist/를 배포하세요. npm run preview로 확인한 것이 정확히 공개됩니다.
Vite 환경 변수를 사용할 수 있나요?
네, VITE_로 시작하는 변수이며 실행 시 빌드에 기록됩니다. 변경 후 다시 빌드하세요. 시크릿은 Vite 앱이 아니라 서버에 두어야 합니다.
Vite 멀티 페이지 사이트에 싱글 페이지 모드가 필요한가요?
아니요. 각 HTML 페이지가 자체 파일이며 about.html은 /about에서 열립니다. 싱글 페이지 모드를 꺼 두면 잘못 입력한 주소에 404.html이 제공됩니다.