웹 개발에 발을 들인 이후.. 처음으로 프론트 배포를 직접 해보았다.
주변에서 리액트 넷리파이(발음이 맞나요..?..)로 배포하면 쉽다고 많이들 그래서 좀 미루고 있었는데..ㅎ
결과적으로 보면 정말 쉽다!
나는 과정에서 오류가 몇 번 나긴 했었지만.. 🥺 결국 백엔드보다는 훨씬 빠르고 쉽게 성공한 !!
폴더 구조 보기
우선 사람마다 배포하려는 폴더 구조가 다를 수 있다. 이 말은 즉슨.. 나는 깃 레포에 프론트만 있는 것이 아니었다.
이런 식으로 백과 프가 같이 있는 레포였다.
여기서 나는 고민이 많았다. 대부분 프론트 레포만 따로 있는 것 같은데, 나는 수강하는 전공 과목 특성상 같이 뒀어야 했다.
상세 폴더 구조는 위 사진과 같은데, index.html이 있는 곳으로 경로 설정을 해주어야 하는 것 같다.
즉 나같은 경우는 FrontEnd/filmme 까지 들어가줘야 하는 것이다. 그래서 아래 사진과 같이
Base directory: FrontEnd/filmme
로 설정하였다.
추가로 Build command는 CI= npm run build 로 하였다.
여기서 주의할 점!
'CI= ' 이렇게 앞에 CI를 붙여주어야 하며, CI와 =는 붙여쓰고 뒤에 것은 띄어쓰기를 해줘야 한다 !!! 이게 무척이나 중요하다는 것을 깨달았다..
이렇게 하고 Publish directory까지 설정해주면 된다.
이렇게 Canceled, Failed까지도 뜬 적이 많다.. 그냥 다 경로 설정 문제였다 나는..
이거보다 더 자세하게 적으려고 했는데 배포 당시에 배포하기에 급급해서 남겨둔 오류화면, 오류 해결 화면이 없다.
다음 포스트부터는 포스팅할 것까지 고려해서 준비해보도록 하겠다.
개발팅 🍀
