[React + MongoDB + Netlify] Netlify Serverless 함수와 몽고DB를 사용해 리액트 프로젝트 무료로 호스팅하기 2

[React + MongoDB + Netlify] Netlify Serverless 함수와 몽고DB를 사용해 리액트 프로젝트 무료로 호스팅하기

앞선 글에서는 MongoDB Atlas에서 데이터베이스를 만드는 방법, Netlify serverless 함수를 사용해 React 프로젝트에서 MongoDB 데이터를 불러올 수 있도록 하는 방법을 알아봤다.

 

오늘은 Netlify에 React앱을 호스팅하는 방법과 배포시 발생하는 'Failed to compile' 오류 등 해결하는 방법을 알아보자.

 

---

Netlify에 리액트 앱 호스팅하기

우선 Netlify에 회원가입/로그인 해준다.

https://www.netlify.com/

Netlify: Develop & deploy the best web experiences in record time

Netlify는 개인 hobby 용으로 사용할 경우 무료이므로 부담없이 가입해준다.

 

만약 create-react-app 을 사용해서 리액트앱을 만들었다면

netlify deploy

로 간단하게 배포가능하지만 우리는 리액트 프로젝트를 깃허브 저장소에 올리고, Netlify와 저장소를 연결하여 호스팅하는 방법을 알아볼 것이다.

 

우선 serverless function 등 모든 소스코드를 깃허브 저장소에 올려준다.

 

예시가 궁금하다면 여기에서 내가 만든 제주도 코워킹스페이스 사이드 프로젝트 저장소에서 파일 구조가 어떻게 생겼는지 참고할 수 있다.

 

그리고 Netlify에서 'Add new site - Import an existing project' 를 선택한다.

 

깃허브 뿐만 아니라 깃랩, Bitbucket 등도 사용가능하다.

깃허브를 클릭해서 뜨는 authorizing 화면에서 확인을 눌러준다.

 

그러면 모든 저장소에 Netlify를 설치할 것이냐는 화면이 뜨는데, 나는 Netlify를 사용할 저장소만 선택해서 골라주었다.

 

나중에 언제든지 깃허브에서 허용된 저장소를 수정할 수 있으니 나처럼 원하는 저장소만 선택해도 되고 그냥 전체 저장소를 선택해도 괜찮다.

 

그런다음 뜨는 깃허브 저장소 리스트에서 배포하고자 하는 저장소를 클릭한다.

 

여러가지를 물어보는데 차례대로 아래와 같다.

 

- Branch to deploy : 해당 브랜치에 있는 코드를 배포하겠다는 뜻

 

- Base directory : 프로젝트가 있는 directory를 입력. 별다른 수정사항이 없었다면 빈칸으로 두면 됨.

 

- Build command : 프로젝트를 빌드하기 위해 사용하는 명령어

 

- Publish directory : 프로젝트를 빌드 파일이 저장되는 디렉토리

 

앞서 말한 것 처럼 create-react-app 등을 사용해서 리액트 프로젝트를 만들었다면 그냥 기본 설정으로 두면 된다.

 

그런 다음 중요한 것은 Netlify 배포 환경에서 사용할 환경 변수를 설정해야한다.

 

Publish directory 아래에 있는 'Show advanced' 버튼을 클릭한다.

 

그런 다음 .env 파일에서 사용했던 환경변수의 key와 value를 그대로 입력해주면 된다.

 

맨 아래에 있는 CI는 프로젝트 내의 eslint warning을 에러로 받아들이느냐 그냥 둘것이냐를 물어보는 것인데, eslint warning이란 아래와 같은 것을 말한다.

정식 production 버전에서는 eslint warning을 모두 제거하거나 무시하는 라인을 작성해서 깔끔하게 만드는 것이 좋지만, 우리는 테스트를 위한 사이드 프로젝트를 예시로 사용하므로 CI 값을 false로 두었다. (그리고 여기에서 막혀서 배포시 오류가 발생하는 경우가 흔할 것이라 생각한다.)

 

그러면 이제 모두 준비됐다! Deploy site를 눌러 배포한다.

 

배포에 성공하면 아래와 같이 Published 라고 뜬다.

 

배포된 웹사이트를 확인하려면 위에 있는 netlify.app 으로 끝나는 링크를 클릭하면 된다.

 

그런데 앞선 튜토리얼부터 따라온 사람들은 데이터베이스 값이 불러와지지 않아 오류가 발생하는 것을 볼 것 이다.

 

이는 MongoDB의 Network access rule 때문인데, 이를 해결하는 방법을 알아보자.

 

---

MongoDB Network Access

MongoDB Atlas에서 Network Access를 클릭해준다.

그리고 'ADD IP ADDRESS'를 클릭한 후 'ALLOW ACCESS FROM ANYWHERE'를 클릭한다.

 

여기서 Network Access란 데이터베이스에 접근할 수 있는 네트워크를 제한하는 것인데,

 

앞에서 MongoDB 데이터베이스를 설정할 때 우리는 나의 현재 IP Address만 허용했고 개발 환경에서 데이터베이스를 불러올 수 있었다.

 

하지만 Netlify에 배포하는 순간부터 데이터베이스에 접근을 요청하는 IP address는 우리가 사용하는 컴퓨터의 로컬 ip address가 아니므로 Netlify에서 접근할 수 있도록 IP Address를 변경해줘야한다.

 

Network Access에서 네트워크를 제한하는 이유는 원하지 않는 유저가 무작위로 데이터베이스를 사용하는 것을 막기 위함이므로 사실 모든 접근을 허용하는 것은 바람직한 방법은 아니다.

 

하지만 Netlify의 ip address가 계속 변경되며 개인 프로젝트당 ip address를 할당받는 방법이 없으므로 hobby 프로젝트로는 이게 최선의 선택으로 보인다.

 

만약 많은 유저가 사용하게 되고 MongoDB 유료 플랜을 사용하는 경우에는, 개인 도메인을 구매하고 해당되는 ip address만 허용해주는 것이 좋다.

이제 프로젝트를 새로고침하면 웹사이트가 제대로 동작하는 것을 볼 수 있다.

 

---

이 글을 유용하게 읽으셨다면 공감을 눌러주시고, 

 

MongoDB Atlas나 Netlify를 사용하면서 궁금한 점이 있는 분들은 얼마든지 댓글 남겨주세요.