한 3일정도, 10시간 넘게 헤맸다. 결국엔 성공했다.
1. npm run build가 안됐다.
build는 개발하던 프로젝트를 배포에 걸맞게 다시 빌드 해 주는 것이다. CRA로 셋업한 프로젝트는 개발 편의성을 위해 이것저것 덕지덕지 붙어있다보니 빈 페이지만 띄워봐도 무겁다. 1mb가 넘는 것으로 안다. 그래서 다이어트를 해 주는 것이다.
근데 개발용 로컬에서는 build가 너무 당연하게 되는데, aws로 넘어가기만 하면 안되는 것이다. .gitignore를 확인 해 봐도 딱히 문제될게 없다. node-modules를 삭제하고 다시 npm install후에 해 봐도 안된다.
침착하게 두 환경 사이의 차이점을 생각 해 본다. 나는 manjaro linux를 사용중이고, aws는 ubuntu를 쓴다. os의 차이가 이런 종류의 문제를 일으킬 수 있나? 상식적으로 아니라는 생각이 든다. 그러면 뭐가 차이일까... 하던 차에 어떤 패키지를 봤다. 지금은 다시 검색 해 봐도 알 수가 없는데, package.json 안에 dependencies의 패키지 버전이 최신 버전이 맞는지 확인 해 주는 것이었다. 제작자의 readme를 보니 최신 버전이 아니면 오류가 날 수 있다고 한다.
그래서 아차 싶어서 개발 환경과 aws환경의 npm과 node등을 봤더니 역시나 차이가 있다. 나는 aws ec2의새로운 instance를 생성하면 기본으로 깔려있는 패키지가 당연히 최신일거라고 여겼는데 그게 아니었다. 우분투를 안쓴지 오래라 그런지 좀 헤맸지만 마침내 npm과 node 모두 최신 버전으로 설치했다.
결과는 build 성공.
2. 빌드한 것을 배포할 수가 없었다. 시키는 대로 했는데도.
나는 이미 aws ec2로 서비스를 배포한 경험이 있다. 물론 전부 백엔드긴 했지만.
그래서 react를 배포하는 방법을 찾아봤는데, 일단 nginx를 이용하는 practice가 엄청나게 나왔다. 한글로 된 자료는 거의 모두 nginx 조합을 설명하고 있다. 근데 nginx는 서버로서의 기본적인 역할도 하지만 그 필요성은 프록시에 더 중점이 있다. 내가 배포하려는 서비스는 기껏해야 동시 이용자가 10명이 안될 것이기 때문에 필요 없는 기능이다. 그래서 without nginx, no nginx라고 엄청 검색했는데 되게 안나오더라. 진짜 속터졌다.
그러다가 serve라는 npm 패키지를 이용해서 간단히 배포할 수 있다는 것을 봤다. 그냥 serve [빌드한 것]으로 서버를 실행 할 수 있고, -l 옵션을 통해 포트번호를 지정할 수 있다.
그래서 serve build -l 80으로 실행 했는데 접속이 안된다!! 콘솔에서는 서버가 잘 실행됐고, localhost어쩌구로 접속하면 됩니다! 라고 잘 알려주는데도 안되더라. 결국은 진짜 왠만하면 하지 않는 질문글도 커뮤니티에 올렸다.
근데 올려놓고 넋나간채로 새벽까지 serve build만 반복하다보니 그냥 어느순간 접속이 됐다. 다른건 진짜 건든게 없고 시간만 갔는데...
기분좋게 집에 갔다.
3. 커뮤니티에 올렸던 질문에서 배운 것
답변이 2개 달렸다. 내가 문제를 오해해서, 잘못된 방향으로 해결을 시도하는 중이라고 하셨다.
내가 서버를 실행하고 외부에서 접속 해 봤을 때 404오류가 나왔는데, 그걸 보면 클라이언트가 서버에 접속 할 수는 있다는 것이다. 접속은 가능하지만 뭘 보여줄게 없다라는 의미. 그러니까 react의 경우 index.js 따위를 찾을 수 없다는 것이다. 근데 나는 이런 404오류의 의미를 몰랐고, 더 심각한건 찾아볼 생각도 안했던 것이다. 정신이 약간 나가있어서 그런거긴 했지만...
이미 접속에는 성공 했는데, 자꾸 접속 하는 방법, 접속 안됨 같은 주제로 검색을 했던 것이다. 답변 주신 두 분은 그래서 build가 잘 된 것인지, index.js가 잘 생성된 것이 맞는지를 확인 해 보도록 조언 해 주셨다.
index.js는 잘 생성되어있었고, 그래서 내가 왜 이런 문제를 겪은 것인지 모른 채로 문제가 해결됐지만 질문/답변을 통해 잘 배울 수 있었다. 문제가 안풀리면 내가 문제를 오해하고 있는 것은 아닌지 의심 해 봐야 한다는 것.
4. 나는 도커를 잘 못쓴다. 이제보니 기본도 못 쓴다!!
도커는 여러 방식으로 활용할 수 있다. 하지만 가장 기본적인 활용은 물리적 서버 환경과 상관 없이 항상 일정한 환경에서 배포하는 것이다.
위 문제 1번에 보면 개발 환경에서는 build가 잘 되고, 배포하려는 서버환경에서는 안됐다. 그래서 사실 내가 바로 떠올린건 도커였다. build해서 도커 이미지로 만들어서 서버 환경으로 가져가고 컨테이너 실행만 하면 된다는 아이디어였다.
결론적으로는 못했다. 2번의 문제와 겹쳐서 못한 것도 있지만, 이제보니 내가 지금까지 dockerimage를 만든 방식은 -it로 접속해서 npm 조작을 해야 하는 방식이었다. 지금까진 그냥 npm start 외에는 만질 필요가 없는 간단한 프로젝트들이라 문제가 없던 것이다.
지금도 react 배포에 어찌어찌 성공은 했지만 안정적이고 꾸준한 배포는 아니다. 최종적으로는 dockerimage를 만들어서 container를 --restart=always만 쳐 주면 되도록 배포 방식을 업그레이드 해 봐야겠다.
