면접 스터디때 팀원분이 프로젝트 배포에 대해 알려주셔서 TS 스터디에서 만들었던 motion 프로젝트를 시험 삼아 배포해 보려고 한다. 바로 될 줄 알았는데 cra가 아닌 vite로 빌드한 프로젝트라서 약간의 문제점이 생겼고, 인터넷에 정보가 많지 않아서 벨로그에 정리해 보겠다.
Cloudflare로 Vite React 프로젝트 배포하기
회원가입 및 로그인
먼저 Cloudflare 사이트에 회원가입 및 로그인을 해 준다. 회원가입은 이메일과 조건에 맞는 비밀번호를 입력하고, 이메일 인증만 하면 되어서 아주 간단하다.
Pages 선택
로그인을 하면 왼쪽에 여러 카테고리들이 나오는데, 여기서 Pages를 선택한 뒤, "프로젝트 생성" > "GitHub에 연결"을 누르면 깃허브 저장소에 올려둔 코드로 빌드 및 배포를 진행할 수 있다.
Repo 선택
GitHub 연결할 때, 내 깃허브에 있는 모든 저장소를 다 연동할 것인지, 아니면 선택적으로 연동할 것인지가 나오는데 나는 ts-motion 프로젝트만 배포를 해 보고 싶어서 후자를 선택했다. 그런 다음 빌드 옵션들을 세팅해 주면 된다.
Build Options Setting
먼저 이 저장소의 어떤 브랜치를 사용할 것인지를 선택할 수 있다. 나는 main 브랜치를 선택했다.
그 다음은 상세한 빌드 설정을 할 수 있는데, 프레임워크에 Vite가 없다. 그래서 나는 React-static 으로 설정해서 했었는데, 그렇게 세팅하면 자동으로 Qwik으로 바뀐다 👀... 이유는 아직 제대로 찾지 못했는데, Qwik으로 설정하고 빌드해도 잘 된다.
Build command는 프로젝트 package.json에 설정되어 있는 빌드 명령어로 하면 되는 것 같은데, 나는 npm run build 로 했고, 그럼 내부적으로 tsc && vite build 가 실행된다.
Build output directory 는 빌드 파일이 생성되면 어디에 저장되게 할 것인지를 지정하는 폴더인데, 원하는 이름으로 설정하면 된다.
🌟 환경변수 설정 🌟
여기서 정말 중요한 점은 환경변수 를 설정해줘야 한다는 것이다. 프로젝트 내부에서 환경변수가 있었으면 그걸 설정해주는 부분이기도 하지만, Vite 프로젝트의 경우 특별히 NODE_VERSION 환경 변수까지 설정해줘야 한다. 참고로 나는 이걸 해주지 않아서 빌드 오류가 났었다 😅
이렇게 애플리케이션을 빌드하는 단계에서 자꾸 오류가 발생했었는데, 아래 오류 로그가 나와서 문제를 찾을 수 있었다.
tsc && vite build 를 실행했더니 저 await 문에서 SyntaxError가 발생한 것이다. 오류가 나는 부분을 그대로 서치했더니 다음 링크를 발견했다.
npm run dev not working with vite laravel 9
터미널에서 npm run dev 를 실행했는데 나와 같은 오류가 발생했고, 답변은 노드를 16.x.x 이상의 버전으로 업데이트 하라는 것이었다.
즉, 노드 버전이 16.x.x 이상의 버전이 아니면 build 를 진행할 때 await 문에서 문제가 생긴다는 것이다. 그럼 내 로컬도 아닌데 어떻게 노드 버전을 조정해 줘야 하나 싶었는데, 이를 해결하기 위해서 환경변수를 설정할 수 있다고 한다.
Build configuration
↑↑↑ Cloudflare 공식문서에 따르면, 노드 버전에 대한 환경변수를 따로 설정해주지 않으면 디폴트 버전은 12.18.0 이고, 이는 Vite 버전과 호환이 되지 않는다. 그래서 NODE_VERSION 이라는 이름의 환경변수를 설정해줘야 한다.
내 로컬 노드 버전은 16.15.0 이고, 내 로컬에서는 이 버전으로 빌드가 잘 진행되기 때문에 나는 환경변수를 이렇게 설정했다. 본인 프로젝트에 맞는 노드 버전을 설정해주면 될 것 같다. 😊
결과
이렇게 옵션을 설정하고 빌드를 다시 시작하면, 간단한 프로젝트라서 빠르게 빌드 및 배포가 되었다. 굿굿.
참고 링크
