React Router

나이트로쉽은 서버 렌더링·loader·action을 포함한 React Router 프레임워크 모드를 지원합니다. React Router 라이브러리만 쓰는 클라이언트 앱은 Vite SPA를 참고하세요.

감지와 빌드 결과제목 링크 복사

• 감지 조건: package.json의 @react-router/dev. react-router build 스크립트를 둡니다.
• SSR을 켜면 react-router-serve build/server/index.js로 서버를 실행합니다. build/client는 CDN으로 보내고 서버 번들에는 프로덕션 의존성을 포함합니다. @react-router/serve는 dependencies에 넣으세요.
• react-router.config.ts에서 ssr: false를 설정하면 build/client를 정적 SPA로 배포하고 /index.html 대체 규칙을 자동으로 적용합니다. 이 모드에는 컴퓨트 리전이 필요 없으며 서버 loader·action은 실행할 수 없습니다.
• 프리셋은 기본 프레임워크 빌드 구조와 표준 serve 명령을 사용합니다. 커스텀 서버 어댑터는 Dockerfile로 배포하세요.

배포하기제목 링크 복사

curl -fsSL https://nitroship.co/install.sh | bash
ntro login

{
  "build": {"framework": "react-router"},
  "compute": {"regions": ["kr-icn"]}
}

build.framework를 적으면 자동 감지를 건너뛰고 이 프리셋을 씁니다. 루트에 Dockerfile이 있어도 마찬가지이고, build.dockerfile과는 함께 쓸 수 없습니다. 적지 않았을 때 어떤 순서로 감지하는지는 빌드 방식 선택에 정리해 두었습니다.

ntro apps create my-react-router-app
ntro deploy . --prod

의존성을 먼저 설치하면 ntro deploy . --prod --local로 내 컴퓨터에서 빌드할 수도 있습니다. 배포 후 CLI가 보여 준 주소에서 정적 파일과 서버 라우트를 열어 보세요.

정적 SPA 모드제목 링크 복사

import type { Config } from "@react-router/dev/config";

export default { ssr: false } satisfies Config;

이 모드에서는 위의 compute 블록이 필요 없습니다. 배포 후 하위 경로를 직접 열어 SPA 대체 규칙이 동작하는지 확인하세요.

알아둘 점제목 링크 복사

서버를 배포하려면 컴퓨트 리전을 정해야 합니다. 서버는 0.0.0.0:$PORT(기본 3000)에서 요청을 받아야 합니다. 클라이언트 자산은 CDN에서 내려가고, SSR과 API 요청은 Node 서버 하나가 모두 처리합니다. Next.js처럼 라우트마다 함수를 따로 나누지는 않습니다.

마이그레이션·큐 워커·스케줄러는 자동으로 실행하지 않습니다. 마이그레이션은 CI나 로컬에서 실행하고, 정기 작업은 예약 작업을 참고하세요. 업로드 파일은 S3 같은 오브젝트 스토리지에 저장하고, 비밀 값은 환경 변수로 설정하세요.

지원하는 어댑터나 출력 구조와 다른 구성이 필요하면 직접 만든 Dockerfile을 사용하세요. 이때 build.framework 설정을 빼고 Dockerfile에서 설치·빌드·실행을 정의합니다.