Vite SPA와 Create React App
Vite 또는 Create React App 클라이언트 빌드를 자동 SPA 라우팅과 함께 배포합니다.
나이트로쉽은 React·Vue·Svelte를 포함한 Vite 클라이언트 앱과 기존 Create React App 빌드를 관리합니다. 서버나 컴퓨트 리전은 필요 없습니다.
감지와 빌드 결과
| 프리셋 슬러그 | 감지 조건 | 출력 |
|---|---|---|
vite | package.json의 vite | dist |
create-react-app | react-scripts 의존성 | build |
build 스크립트(vite build 또는 react-scripts build)를 둡니다. Vite 출력에는 index.html이 있어야 합니다. 단일 페이지 빌드는 실제 파일과 일치하지 않는 URL에 /index.html을 자동으로 보여 주므로 하위 클라이언트 경로에서도 새로고침이 동작합니다. 여러 페이지를 만드는 Vite 빌드에는 이 일괄 대체 규칙을 적용하지 않고 각 페이지 파일을 그대로 제공합니다.
Vite의 문자열 root/outDir 설정과 지원하는 CLI 출력 인자를 반영합니다. build.outputDirectory로 별도 출력 폴더를 지정할 수도 있습니다. 라이브러리 빌드는 배포할 페이지가 아닙니다. Create React App을 직접 선택하려면 아래의 vite를 create-react-app으로 바꿉니다.
배포하기
CLI 설치
curl -fsSL https://nitroship.co/install.sh | bash
ntro login이미 설치했다면 다음 단계로 넘어가세요. 설치 옵션, PATH 설정 및 업데이트는 CLI 설치에서 확인하세요.
{
"build": {"framework": "vite"}
}build.framework를 적으면 자동 감지를 건너뛰고 이 프리셋을 씁니다. 루트에 Dockerfile이 있어도 마찬가지이고, build.dockerfile과는 함께 쓸 수 없습니다. 적지 않았을 때 어떤 순서로 감지하는지는 빌드 방식 선택에 정리해 두었습니다.
ntro apps create my-vite-app
ntro deploy . --prod의존성을 먼저 설치하면 ntro deploy . --prod --local로 내 컴퓨터에서 빌드할 수도 있습니다. 배포 후 CLI가 보여 준 주소에서 정적 파일과 하위 경로를 열어 보세요.
알아둘 점
정적 배포는 컴퓨트 리전이 필요 없고, SSR이나 서버 API, 서버 미들웨어도 실행되지 않습니다. 브라우저로 내려가는 설정에는 비밀 값을 넣지 마세요. 빌드 시 설정은 환경 변수, 라우팅은 정적 사이트를 참고하세요.
지원하는 어댑터나 출력 구조와 다른 구성이 필요하면 직접 만든 Dockerfile을 사용하세요. 이때 build.framework 설정을 빼고 Dockerfile에서 설치·빌드·실행을 정의합니다.