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

현재 제주도의 코워킹스페이스를 보여주는 사이드 프로젝트를 개발 중이다.

https://github.com/jwhan77/coworking

GitHub - jwhan77/coworking: Coworking space in Jeju (In development)

코워킹스페이스 및 카페 데이터를 저장할 데이터베이스가 필요하다.

 

그런데 데이터를 한 번 불러오기 위해 express를 사용해서 서버를 만드는 것은 번거로워서 Netlify functions를 사용하기로 했고,

 

데이터는 단순한 JSON 형식이라 기존에 사용해본 경험이 있던 Mongo DB를 사용하기로 했다.

 

이 글은 나처럼

1) 이미 리액트로 프론트엔드 개발을 어느정도 진행한 상태에서 갑자기 데이터베이스가 필요한 경우

2) 간단한 api 하나 때문에 서버를 구현하기 번거로운 경우

3) 무료 서비스를 이용해 사이드 프로젝트를 호스팅하고 싶은 경우 도움이 될 것이다.

---

MongoDB Atlas

우선 MongoDB에서 데이터베이스를 생성해보자.

 

MongoDB에 대해 하나도 몰라도 구현할 수 있도록 만들었으니 글을 보고 잘 따라오면 된다.

 

개발 환경에서는 로컬에서 데이터베이스를 실행해도 되지만, 나는 Netlify를 사용해 프로젝트를 호스팅하므로 클라우드 데이터베이스를 사용한다.

 

우선 MongoDB Atlas에서 회원가입/로그인을 해준다.

https://www.mongodb.com/cloud/atlas/register

MongoDB Atlas

 

새로운 데이터베이스를 생성해주고

세 가지 옵션이 있는데, 사이드 프로젝트 용으로 사용할 것이므로 무료 버전인 Shared 를 선택해준다.

 

클라우드 provider와 지역, 클러스터 이름 등을 설정할 수 있는데 나는 기본 설정 그대로 두고 진행했다.

 

그런 다음 데이터베이스에서 사용할 유저 authentication 정보가 있어야한다.

 

기존에 Atlas에서 유저를 생성한 적 있다면 SECURITY - Database Access 에서 확인할 수 있고, 생성한 적이 없다면 위 화면에서 만들도록 하자.

 

참고로 여기 사용되는 비밀번호는 평소에 사용하는 비밀번호 말고 랜덤하게 생성해서 사용하는 걸 추천한다. (그 이유는 환경변수 설명할 때 다시 하겠다.)

그런 다음 네트워크 Access를 설정해준다.

 

네트워크 Access란 데이터베이스에 접근할 수 있는 네트워크를 관리하는 것을 의미한다.

 

우선은 'Add My Current IP Address' 를 클릭하고 넘어간다.

 

클러스터가 생성된 것을 확인할 수 있다.

 

이제 데이터베이스와 컬렉션을 생성하자. 'Browse Collections'를 클릭한다.

 

'Create Database'를 클릭하고 데이터베이스와 컬렉션에 원하는 이름을 입력하고 Create를 누른다.

 

이제 생성된 컬렉션에 JSON 데이터를 추가하자.

INSERT DOCUMENT를 눌러준다.

그런 다음 View에서 JSON view인 왼쪽 뷰를 클릭하고 JSON 데이터를 복붙 후 Insert를 클릭한다.

 

컬렉션에 데이터가 업데이트 된 것을 볼 수 있을 것이다.

 

---

Netlify Serverless functions

이제 기존 리액트 프로젝트에 netlify CLI를 사용해 serverless functions을 만들어 mongoDB 에서 데이터를 가져와보자.

 

우선 개발환경에 Netlify CLI가 설치되어있지 않다면 아래 명령어로 설치한다.

npm i netlify-cli --g

앞으로 계속 netlify를 사용할거라면 위와 같이 글로벌하게 설치해도 되고, 다른 개발자들을 위해 프로젝트에 dependency를 업데이트하고 싶다면 dev dependencies로 업데이트해준다.

npm i netlify-cli --save-dev

그런다음 프로젝트의 루트 경로에 'functions' 폴더를 만들어준다.

 

이제 이 functions 폴더안에 있는 파일은 api endpoint로 작동한다. 더 자세한 설명은 공식 홈페이지에서 확인.

 

나는 mongoDB에서 데이터를 불러오기 위한 `getData.js` 파일을 생성해주었다. 코드는 아래와 같으며 해당 코드의 모든 출처는 이 포스팅의 저자에게 있다.

// functions/getData.js

const { MongoClient } = require("mongodb");

const mongoClient = new MongoClient(process.env.MONGODB_URI);

const clientPromise = mongoClient.connect();

const handler = async (event) => {
    try {
        const database = (await clientPromise).db(process.env.MONGODB_DATABASE);
        const collection = database.collection(process.env.MONGODB_COLLECTION);
        const results = await collection.find({}).limit(10).toArray();
        return {
            statusCode: 200,
            body: JSON.stringify(results),
        }
    } catch (error) {
        return { statusCode: 500, body: error.toString() }
    }
}

module.exports = { handler }

// 출처: https://www.mongodb.com/developer/languages/javascript/developing-web-application-netlify-serverless-functions-mongodb/

 

해당 코드에서 mongoDB를 필요로 하므로 프로젝트에 설치해준다.

npm i mongodb

 

그리고 환경변수를 업데이트한다. 필요한 세가지 환경변수의 값은 클러스터에서 찾을 수 있다.

(환경변수를 모르는 분들을 위해 간략하게 설명하자면 프로젝트 루트 경로에 .env 파일을 생성후 아래와 같이 작성하면된다. 값(YOUR_MONGODB_URI 등)은 본인 프로젝트에 맞는 값을 추가할 것)

MONGODB_URI=YOUR_MONGODB_URI
MONGODB_DATABASE=YOUR_DATABASE
MONGODB_COLLECTION=YOUR_COLLECTION

 

• URI

클러스터 - Connect - Connect your application을 클릭

해당 <password> 부분에 앞에서 설정했던 유저의 비밀번호로 교체하여 값에 추가해준다.

 

• Database & Collection

앞에서 만들었던 데이터베이스와 컬렉션 이름을 사용하면 된다.

---

React에서 Netlify functions를 사용해 데이터 불러오기

이제 리액트 프로젝트에 데이터를 불러오자.

 

useState와 useEffect 그리고 fetch를 사용해 아래와 같이 불러올 수 있다.

import React, { useEffect, useState } from "react";

function App() {
	const [data, setData] = useState([])
    
    const fetchData = async() => {
    	const response = await fetch('/.netlify/functions/getData')
        const result = await response.json()
        setData(result)
    }
    
    useEffect(() => {
    	fetchData()
    }, [])
    
    return (
    )
}

export default App;

 

제대로 동작하는지 테스트하기 위해 아래 명령어를 실행한다.

netlify dev

아마 localhost:8888로 자동 실행될 것이다.

 

데이터가 잘 불러와지는지 확인하고 문제가 없으면 이제 Netlify에 호스팅을 할 차례다.

 

---

호스팅에 대해서는 다음 글에서 더 자세히 알아보자

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

---

출처

- [Blog Post] Developing a Web Application with Netlify Serverless Functions and MongoDB by Nic Raboy