Railway에서 React 배포하기 with Vite

Vite를 사용해서 React 애플리케이션을 만들고

Railway에서 배포하려고 할 때 발생한 일

Railway에서 Vite + React 템플릿을 사용해서 프로젝트를 만들면 이 고생을 안해도 되지만... 처음부터 Railway에 배포할 생각이 없었던 저는 이 방법으로 해결했습니다

No start command could be found

git hub 레포를 연결해서 새로운 프로젝트를 생성하고 배포하면
다음과 같은 에러가 발생합니다.

start command가 없다는 에러를 볼 수 있고
프로젝트에서 package.json 파일을 확인해보면

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "lint": "eslint .",
  "preview": "vite preview"
},

start command 가 없는 것을 확인할 수 있습니다.

배포 PC 에서 명령어를 사용해서 앱을 빌드하고 실행해야 하는데, package.json에 내용이 빠져있어서 발생하는 문제로 생각되어서 start 명령어를 어떻게 추가해야 하는가 고민하던중...

https://github.com/brody192/vite-react-template
공식문서에서 Vite + React 템플릿을 찾게되었고 package.json을 어떻게 구성했는지 확인해보았는데
여기에서도 start 명령어를 찾을 수 없었습니다.

Caddy

대신에 루트 디렉토리에 처음 보는 파일들이 추가되어 있는걸 확인할 수 있는데,
Vite로 리액트 Application을 생성할 때 기본적으로 생성되는 파일들은 아닙니다.

Caddyfile , nixpacks.toml 파일들을 하나씩 열어보았지만
무슨 내용인지 이해할수 없었고...
README에서 Caddy를 쓰는 이유에 대해서 설명하고 있었습니다.

중요한건 저 두개의 파일이 있으면 배포가 될것 같다는 생각에
Caddyfile , nixpacks.toml 파일을 그대로 복사해와서 추가하고 배포했습니다.

예상대로 배포가 성공했습니다

결론

공식 예제에 있는 Caddyfile , nixpacks.toml 파일을 추가하자.

Vite를 사용해서 Application을 만들면 이런 문제가 공통적으로 발생하는건가 싶어
Webpack으로 다시 빌드해야 하는건가...
Vite가 아직 이런 부분에 취약점이 있는건가 싶어서
추가적으로 Vercel에서도 배포를 해봤습니다.
Vercel에서는 Caddyfile이 없어도 정상적으로 배포가 되었습니다.

Railway를 선택한 이유는, 간단한 사이드 프로젝트를 진행할 때 개인적으로 사용할 호스팅 서비스가 필요했기 때문입니다. 다른 호스팅 서비스도 있지만 초기에 무료 크레딧을 제공하고 한번 써보고 싶다는 생각에 지금까지 사용하고 있습니다.
그리고 AWS를 사용해서 배포했다가 디도스 공격으로 요금이 엄청 많이 나올 수도 있다는 얘기를 들어서...
Railway는 특정 금액을 지정해 놓으면 그 금액을 넘는 순간 서비스가 자동으로 중단되기 때문에 과금에 대한 걱정없이 쓸 수 있는 녀석이라 생각했습니다.

그런데 Vite를 사용할 때 이런 문제가 있었고
처음에 말한것처럼 Railway + Vite 템플릿으로 프로젝트를 생성한다면 문제없이 배포할 수 있겠지만
막연히 리액트를 개발하는 프론트엔드 개발자중에서 처음부터 Railway라는 호스팅을 염두해두고 프로젝트를 시작하는 사람이 몇이나 있을까 싶습니다. 그래서 저 처럼 개발을 완료하고 배포하려하는 순간 호스팅 서비스 때문에 멘붕이 오는 일이 발생합니다.

이 문제는 작년 초에 발생했던 문제였고, 문서정리를 하면서 이번에 정리를 하고 있습니다.
여전히 Railway에서 일반적인 Vite React는 배포가 안되는것을 확인했고
그냥 넘어가려다가 작년에 이 문제를 해결하기 위해서 여러 검색을 해보고 GPT한테 물어보기도 했는데 해결방법을 찾지 못하고 정말 우연히 공식 문서에서 예제 템플릿을 보고 해결한거라
Railway를 사용하는 분들중에 이런 이슈가 발생한다면 쉽게 해결하는데 도움이 되었으면 좋겠습니다