[Strapi] Node.js Headless CMS로 API 만들기(Feat.MongoDB)

 

프론트는 데이터를 받아야 화면에 보여줄 수 있고, 그 데이터는 주로 서버에서 오게 됩니다.

 

웹 어플리케이션을 만들기위해 프론트개발자가 직접 서버에서 내려주는 데이터를 만들고, 그걸 관리할 Admin페이지를 만드는 일은 쉽지않죠.

 

하지만 Strapi를 사용하면 별도의 관리자페이지를 통해 권한 및 api를 마음대로 만들 수 있는 back-end 서버를 구축할 수 있습니다. 

 

1. MongDB 클러스터 만들기

https://www.mongodb.com로 접속하고 가입을 합니다.

 

조직만들기 > 프로젝트 생성 > 클러스터 생성(Shared Clusters 선택) > 클라우드 제공 업체 및 지역선택(AWS + 싱가포르 추천)

> 클러스터 배포(3분이상 소요) 

 

배포가 완료되면

MongoDB 클러스터 화면

위와같이 버튼들이 활성화가 됩니다. 'CONNECT' 버튼을 클릭 합시다.

 

그러면 IP주소를 추가하는 부분과 DB관리계정을 만들게됩니다. 당장은 현재의 IP를 추가해도 되지만, 작업장소가 자주바뀌시는분은

 

IP를 추가할때 0.0.0.0으로 만들면 어디서나 접속가능합니다. (다만 보안은 책임질 수 없습니다.)

 

*DB관리계정은 strapi설치할때 한번더 입력해야하니 꼭 기억해두셔야합니다.

 

관리자 계정까지 만들고나면 

 

MongoDB Connect

여기서 Connect Your application을 선택합니다.

 

MongoDB version 선택

버전은 위와같이 선택하고,  Include full driver code example를 체크해줍니다.

 

그럼 회색박스안에 다양한 정보들이 노출되는데, 

const MongoClient = require('mongodb').MongoClient;
const uri = "mongodb+srv://admin:<password>@clusterName-XXXXX.mongodb.net/test?retryWrites=true&w=majority";
const client = new MongoClient(uri, { useNewUrlParser: true });
client.connect(err => {
  const collection = client.db("test").collection("devices");
  // perform actions on the collection object
  client.close();
});

(클러스터 주소부분은 가렸습니다.)

 

위의 정보에서 'clusterName-XXXXX.mongodb.net' 부분만 복사해둡니다.

 

그리고 Strapi를 설치하도록 합니다.

 

2. Strapi 설치 (Node 10이상 , npm 6이상)

npm install -g create-strapi-app

전역 설치 후에, 

npx create-strapi-app my-project

명령어를 입력하면 Quick Start와 Custom 중에 Custom을 선택합니다.

 

그후 Mongo를 선택하면 

- Database name을 입력하라고합니다. 위에서 만든 클러스터 이름을 입력합니다.

- Host는 복사해두었던 주소를 입력합니다. (예: clusterName-XXXXX.mongodb.net)

- srv는 true를 입력합니다.

- port는 기본값인 27017이니 그냥 엔터를 누릅니다.

- UserName은 DB관리자 계정 아이디를 입력합니다.(MongoDB Atlas계정이아닙니다.)

- password역시 DB관리자 계정 비밀번호를 입력합니다.

- Authentication database는 기본적으로 admin으로 입력합니다.

- Enable SSL connection은 Yes를 누릅니다.

 

모든정보가 이상없이 입력되었다면 설치가 진행되고, 첫 설치에는 시간이 오래걸릴 수 있습니다.

 

설치가 완료되고, cd my-project로 이동한뒤

npm run develop

로 실행해줍니다.

 

이상없이 설치되었다면 회원가입 페이지가 나오는데, 데이터를 관리할 Admin 계정을 만드는 과정으로 입력하고 넘어가면 

 

Strapi의 관리자 페이지가 나타나게 됩니다.

 

3. API 만들기

Side메뉴에서 Content-Types Builder를 클릭하고 Create new collection type를 클릭합니다.

 

Display name으로 'test-api'를 입력하고 다음으로 넘어갑니다.

 

그러면 다양한 Type의 데이터 형식이 있는데, 일단 테스트용이므로 Text를 선택하고 이름은 title로 입력후에 

 

Add another field를 선택하고 다시 Text를 선택하고 이름은 Contet로 만듭니다. Finish로 Type추가를 끝내고 저장을 누릅니다.

 

로딩 후에 Side메뉴에 Test-apis라는 메뉴가 추가되었습니다.

 

위의 test-api항목추가를 클릭하면 title과 Content를 입력하는 Input이 있습니다. 입력하고 싶은 내용을 마음대로 입력하고

 

저장을 누릅니다.

 

위와같이 입력이 되었다면 Side메뉴에 역할(roles) & 권한(permissions)을 클릭하고 

 

이중에 Public을 클릭합니다. 

 

하단에 Test-Api에 대한 권한을 설정하는데, 단순 테스트이므로 전부 선택해주도록합니다.

 

그리고 브라우저에서 http://localhost:1337/test-apis/로 접속하면 입력한 정보가 JSON형태로 나타나는것을 알 수 있습니다. 

[
  {
    "_id":"5ec148d37d9e5a57ffd32277",
    "title":"타이틀입니다.",
    "Content":"콘텐츠입니다.",
    "createdAt":"2020-05-17T14:23:15.571Z",
    "updatedAt":"2020-05-17T14:23:15.571Z",
    "__v":0,
    "id":"5ec148d37d9e5a57ffd32277"
  }
]

 이제 ajax통신을 통해 GET해서 DB에 저장된 데이터를 가져오거나 POST를 보내 DB에 값을 저장하고 PUT을 통해 업데이트 하는것이

 

가능해졌습니다. 이 다음에는 Heroku를 사용하여 실제 사용가능한 백엔드서버로 구축하는 방법을 알아보도록 하겠습니다.