오늘날 대부분의 React 앱은 Vite로 정적 파일 폴더에 빌드됩니다. index.html 하나와 모든 페이지를 그리는 JavaScript입니다. Lobsite는 그 폴더를 호스팅합니다. npm run build를 실행한 다음 npx lobsite를 실행하면 HTTPS가 적용된 *.lobsite.app 주소로 앱이 공개됩니다. 싱글 페이지 모드를 켜면 React Router 딥 링크가 작동합니다.
작동 방식
npm run build로 앱을 빌드하세요. Vite 프로젝트는dist/를, 이전 Create React App 프로젝트는build/를 작성합니다.- 프로젝트에서
npx lobsite를 실행하세요. 빌드 폴더를 찾아 배포합니다. 첫 배포는 계정이 필요 없으며 6시간 동안 유지됩니다. - React Router를 위해 싱글 페이지 모드를 켜세요.
lobsite.toml의spa = true또는 사이트 설정의 싱글 페이지 앱입니다. 가져오기 링크로 무료 계정에 사이트를 유지하세요.
React Router와 딥 링크
createBrowserRouter나 <BrowserRouter>를 사용하면 주소가 /orders/42처럼 보입니다. React Router가 브라우저에서 페이지를 바꾸므로 링크 클릭은 어디서나 작동합니다. 그 주소를 직접 열거나 새로고침하면 파일이 아닌 /orders/42를 서버에 요청합니다. 싱글 페이지 모드가 index.html로 응답하고 React Router가 올바른 페이지를 그립니다.
<HashRouter>(/#/orders/42같은 주소)는 서버가/만 보므로 싱글 페이지 모드 없이 작동합니다. 브라우저 라우트가 더 보기 좋고 검색 엔진이 기대하는 형태입니다.ssr: false인 React Router 프레임워크 모드도 싱글 페이지 앱을 빌드합니다.prerender를 설정하면 나열된 페이지가 자체 HTML 파일로 작성되고, 나머지는 싱글 페이지 모드가 처리합니다.- TanStack Router와 wouter도 React Router와 같은 방식으로 작동합니다.
package.json에서 라우터를 찾았는데 싱글 페이지 모드가 꺼져 있으면 배포 시 팁이 표시됩니다.
Create React App에서 옮기기
React 팀은 2025년 2월에 Create React App을 지원 중단했으며 새 앱에는 프레임워크나 Vite를 권장합니다. CRA 프로젝트는 여전히 배포됩니다. npx lobsite는 build/를 찾고, CRA가 빌드에 복사하는 public/을 건너뜁니다. Vite로 옮기면 호스팅 측면에서 몇 가지가 바뀝니다.
- 빌드 폴더는
dist/가 되며 같은 방식으로 찾습니다. REACT_APP_환경 변수는VITE_가 되며import.meta.env로 읽습니다.index.html은public/에서 프로젝트 최상위 폴더로 옮겨집니다.
앱에 서버 렌더링이 필요하다면 정적 내보내기를 사용하는 Next.js나 서버에서 React를 실행하는 호스트를 살펴보세요.
lobsite.toml의 spa = true 또는 대시보드의 스위치 하나면 됩니다. 딥 링크로 앱이 열리고, 없는 파일은 여전히 404입니다.
파일은 해시로 저장됩니다. 변경되지 않은 사이트를 다시 배포하면 0바이트가 업로드됩니다.
공개 전에 미리 보세요. 리디렉션까지 포함해 클릭 한 번으로 롤백합니다.
모든 사이트는 첫 배포부터 HTTPS가 적용된 *.lobsite.app 주소를 받습니다.
폼의 대상을 /_lobsite/forms/contact로 지정하세요. 스팸 필터링이 포함됩니다.
계정 없는 배포는 6시간 동안 공개됩니다. 가져오기 링크로 무료로 유지할 수 있습니다.
React 호스트 비교
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| React Router 딥 링크 | spa = true 또는 대시보드 스위치 |
_redirects 규칙 |
vercel.json의 리라이트 |
아니요: HashRouter 또는 상태 404로 제공되는 404.html |
| 배포 후 없는 스크립트 파일 | 404, 명확한 오류 | 앱의 index.html |
앱의 index.html |
404 |
| 서버 렌더링 | 아니요 | 예, 프레임워크로 | 예, 프레임워크로 | 아니요 |
| 첫 배포 전 계정 | 불필요: 6시간 공개 후 무료로 유지 | 필요 | 필요 | 필요, 저장소도 필요 |
| 백엔드 없는 폼 | 예, 사이트가 계정에 있으면 | 예 | 아니요 | 아니요 |
| 커스텀 도메인 | 예, 무료 | 예 | 예 | 예 |
Vite가 빌드하는 브라우저 실행 React 앱이라면 Lobsite가 명령어 하나로 배포하고, 변경된 청크만 업로드하며, 배포마다 미리보기 URL을 유지합니다.
자주 묻는 질문
React Router 페이지를 새로고침하면 "Not found"가 표시되는 이유는 무엇인가요?
그 주소는 앱 안에만 존재하므로 서버에 파일이 없습니다. lobsite.toml의 spa = true 또는 사이트 설정의 싱글 페이지 앱으로 싱글 페이지 모드를 켜세요.
Create React App 프로젝트를 여기에 호스팅할 수 있나요?
네. npm run build와 npx lobsite를 실행하면 build/ 폴더를 찾아 배포합니다. 브라우저 라우트를 쓰는 React Router를 사용한다면 싱글 페이지 모드를 켜세요.
React 폼이 백엔드 없이 제출할 수 있나요?
네, 폼이 빌드된 HTML(예: index.html)에 있고 /_lobsite/forms/contact로 전송한다면 가능합니다. React만 그리는 폼은 배포 시 찾을 수 없어 제출이 거부됩니다. 폼 문서에서 폼을 HTML에 유지하고 fetch()로 보내는 방법을 설명합니다.
React 앱을 호스팅하려면 Next.js가 필요한가요?
아니요. Vite로 빌드한 React 앱은 일반 파일이며 모든 정적 호스트에서 실행됩니다. Next.js는 서버 렌더링이나 사전 렌더링된 페이지를 위한 것이며, 자체 정적 내보내기가 있습니다.