정말 오랜만에 글을 쓰게 되었습니다. 3주 동안 정말 정신없이 보낸 것 같습니다. 매주 글을 쓰기로 다짐했었는데, 이렇게 오랫동안 글을 안 쓰다니 저 자신이 원망스럽네요.😰 한탄은 이쯤 하겠습니다.

이번에 소개해드릴 제 경험은 배포하는 경험입니다. 한 번도 리액트 애플리케이션을 빌드하고 AWS를 사용해서 배포해 보지 못한 저에게는 꽤 큰 시련이었죠. 하지만 직장 상사분의 도움과 여러 가지 삽질을 통해 배포에 성공하게 되었습니다.👏🎉 그럼 지금부터 시작하겠습니다.

배포

전략

'저희 기능이 슬슬 완성되어가니 이제 로컬에서만 하지 말고 배포해야 하지 않겠어요? 배포 전략은 어떻게 할까요?'

회사에 들어와서 한 달이 지나 사수분이 나가시고 들었던 이야기입니다. React 애플리케이션을 배포해본 적이 없는 저는 '대략적인 설명만 알아듣고' 넘어갔습니다. 제가 이해한 두 가지의 배포 전략은 이렇습니다.

  1. 'creat-react-app'을 통해 만들어진 앱은 'npm start'를 입력하는 순간 자체의 웹 서버를 만들고, 그것을 통해 localhost:3000 에 실행되게 되는데, 다른 서버를 또 열거나 하지 말고, 백 엔드의 express를 통해 빌드된 앱을 실행시키는 전략

  2. npm start를 입력하는 순간 만들어지는 자체의 웹서버를 백 단에서 제작하여 사용하는 전략

저는 이 둘 중에 밑의 전략을 사용하게 되었습니다. express를 통해서 사용하는 요청은 GitHub 로그인 요청과 graphQL 요청만을 사용하는데, 그 규칙을 깨고 싶지 않았고, Express 요청을 통해 뱉어낸 페이지에서 또다시 Express 요청을 보내는 것이 이상하다고 생각했습니다. 그리고 마지막으로 저는 전혀 해보지 못한 일을 수없이 많이 해본 직장 상사분이 NGINX를 사용하여 웹서버를 만들고 배포하자고 말씀하셨습니다. (사실 이게 가장 큰 이유죠) 그리하여 NGINX를 사용하여 간단한 웹 서버를 만들어 build 된 파일을 사용하기로 결정하였습니다.

AWS? EC2? NGINX?

AWS는 Amazon Web Service, EC2는 아마존 웹 서비스를 통해서 만들어지는 클라우드 컴퓨팅 서비스, NGINX 는 동시접속 처리에 특화된 웹 서버 프로그램이라고 합니다. 저는 모두 처음 들어보는 단어였고, 이번에 처음 사용하게 되었습니다. 상사님은 이전에 EC2를 사용하여 만드신 Ubuntu 18-04 서버 환경을 보여주셨습니다. 정보들은 모두 리파지토리의 wiki에 정리되어 있었습니다. 저는 pm 2, 그리고 NGINX를 다운로드받은 후 그것들을 사용하여 배포를 완료하였습니다. 그리고 짠, 테스트 서버 주소를 (이것도 상사님이 AWS의 Route 53을 이용하신 것 같았습니다) 입력하자 제가 만든 페이지가 나타났습니다. 하지만 곧바로 문제가 생겼죠.

React 는 SPA.

저희 서비스는 로그인 버튼을 클릭하는 순간, Express 서버에서 요청을 받아 처리하고 GitHub OAuth를 통해 설정해준 GitHub callBackUrl이 주소창에 입력되게 됩니다. 그리고 제가 로그인 버튼을 누르자 버그가 일어났죠(갑자기?). 404 ERROR였습니다. 상사님 또한 직접 만든 페이지를 배포하는 것이 아닌지라 같이 찾아보고 해결해 보자고 하셨죠. 그리하여 찾아본 결과 SPA가 아닌 다른 페이지들은 주소마다 GET 요청을 처리해주는 부분을 가지고 있는데 React는 그렇지 않다는 점을 찾아낼 수 있었습니다. 저는 express를 통해서 어떤 주소가 오든 계속 build 된 파일의 index.html을 보내주는 방법을 생각했습니다만, 상사님은 그것보다 NGINX를 활용해서 더 간단하게 실행하는 방법을 말씀해 주셨습니다. 어떤 주소로 오든 index.html파일로 redirect 시켜버리는 방법이었습니다. 그렇게 하면 react는 주소에 입력된 값을 읽어서 그에 맞는 컴포넌트를 실행시켜줄 것이고, 모든 문제는 해결되었습니다. 방법은 이곳이곳을 많이 참조하였습니다. 이번에 저희가 만든 설정들이 어떻게 작성되어있는지 나중에 공유하도록 하겠습니다. 아마 보시진 않겠지만, 진행할 방법을 공유해주신 이분 들게 감사의 말씀을 드립니다.

https

'https 적용을 고려해야 할 거 같아요.' 슬랙 방에 올라온 이야기였습니다. 그리고 이어서 글 두 개가 올라왔습니다. certbot, Let's Encrypt, NGINX을 이용해서 인증서를 발급받고 적용하는 글이었습니다. 그리고 저는 그 글을 참고하여 https를 적용하게 되었습니다. certbot은 자동으로 Let's Encrypt 를통해 인증서를 받아 NGINX로 하여금 그 인증서를 통해 https 주소로 요청해 줄 수 있도록 주었죠. 이 부분에 대해서도 글을 하나 쓸 수 있을 것 같습니다.

마무..아니 이글 대체 왜 올린건가요?

큰 맥락을 보여드리고 싶었습니다. 막연하게 AWS 알아보기, EC2 살펴보기 등의 글로 올리는 것 보다, 제가 왜 그것들을 사용하게 되었는지, 그리고 어째서 그런 방식으로 사용했는지를 부분마다 쪼개서 보여드리기 이전에 전체적인 모습으로 공유하고 싶었습니다. 생각보다 삽질을 꽤 오래, 많이 했기 때문이죠. 그리고 이다음 글과 다다음 글에는, 제가 어떻게 삽질하며 배포하였는지, https를 만들며 간과한 부분들이 무엇이고, 어떻게 적용했는지를 말씀드리려고 합니다. 다음 글부터는 꼭 영양가 있는 글로 찾아뵙도록 하겠습니다. 마지막으로 읽어주셔서 감사합니다. 🙇‍♂️