윤스페이스 : 일상을 기록합니다.

Sailet 프로젝트의 프론트가 어느정도 완성되어서 같이 사용할 백엔드를 고민중이였다. PHP와 MySql을 사용하는 프로젝트를 진행한 경험이 있었지만, 다들 왜인지 MongoDB와 GraphQL을 추천해줘서 알아봤다. 백엔드를 제대로 구축하는 방법을 모르기 때문에 통합적으로 관리가 가능한 Strapi를 사용하기로 했다. 코딩 없이 10분 만에 REST API/Graphql 서버 개발하기 튜토리얼을 해보면서 중간에 Strapi와 MongoDB를 연동하는 작업이 있었는데, MongoDB Atlas 클러스터에 연결하는 방법이 바뀌어 고난을 겪었다. 답은 공식 문서에서 찾았는데, 역시 지루하더라도 문서로 공부하는게 답인 듯 하다. 

 

Strapi를 사용하는 방법은 아직 공부하는 중이라 나중에 한번에 정리해서 올릴 예정이다. 오늘은 연결에 성공해서 연습까지 해보았으니, 오늘은 연결하는 방법까지 정리하고 마무리 해야겠다.

 

1. Strapi를 설치한다.

npm install strapi@alpha -g

 

2. Strapi 버전을 확인해 정확히 설치 되었는지 알아보자.

strapi -v

 

3. Strapi 프로젝트를 생성하기 위해 적당한 폴더를 만들자.

cd c:/user/사용자이름/
mkdir strapi-tutorial
cd strapi-tutorial

 

4. 새로운 Strapi 프로젝트를 시작하자.

strapi new strapi-tutorial

 

5. MongoDB Atlas 관리 페이지에 들어가서 Connect 버튼을 누르자.

 

6. Copy 버튼을 클릭하면 아래와 같은 코드가 복사된다.

mongodb://account1112:<password>@cluster0-shard-00-00-syd9e.mongodb.net:27017,cluster0-shard-00-01-syd9e.mongodb.net:27017,cluster0-shard-00-02-syd9e.mongodb.net:27017/test?ssl=true&replicaSet=Cluster0-shard-0&authSource=admin&retryWrites=true

여기에서 <password>@ 뒷 부분만 복사해준다.

cluster0-shard-00-00-syd9e.mongodb.net:27017,cluster0-shard-00-01-syd9e.mongodb.net:27017,cluster0-shard-00-02-syd9e.mongodb.net:27017/test?ssl=true&replicaSet=Cluster0-shard-0&authSource=admin&retryWrites=true

 

7. 다시 돌아와서 설정을 마쳐주자. 

? Choose your installation type Custom (manual settings)
? Choose your main database: MongoDB
? Database name: my-community
? Host: 127.0.0.1
? +srv connection: false
? Port (It will be ignored if you enable +srv): 27017
? Username:
? Password:
? Authentication database (Maybe "admin" or blank):
? Enable SSL connection: false

manual settings와 MongoDB를 선택해주고 엔터만 계속 눌러주면 된다. 

 

8. 아래와 같은 로그가 남으면 정상적으로 완료된 것이다.

⏳ Testing database connection...
It might take a minute, please have a coffee ☕️

The app has been connected to the database successfully!

🏗  Application generation:
√ Copy dashboard
√ Install plugin settings-manager.
√ Install plugin content-type-builder.
√ Install plugin content-manager.
√ Install plugin users-permissions.
√ Install plugin email.
√ Install plugin upload.
√ Link strapi dependency to the project.

👌 Your new application my-community is ready at c:\Users\USER\strapi-tutorial\

⚡️ Change directory:
$ cd strapi-tutorial

⚡️ Start application:
$ strapi start

 

9. visual basic code로 들어가서 './config/enviroments/development/database.json'를 아래와 같이 편집해준다.

{
  "defaultConnection": "default",
  "connections": {
    "default": {
      "connector": "strapi-hook-mongoose",
      "settings": {
        "client": "mongo",
        "host": "아까 복사한 링크",
        "port": 27017,
        "database": "test",
        "username": "아이디",
        "password": "비번"
      },
      "options": {
        "ssl": true
      }
    }
  }
}

 아까 복사한 링크를 넣어주고, 아이디와 비밀번호는 MongoDB Atlas - Security 탭에서 설정한 값을 넣어준다.

 

10. 작성한 코드들을 복사해서 './config/enviroments/production/database.json'의 기본값을 삭제하고 변경시켜준다.

{
  "defaultConnection": "default",
  "connections": {
    "default": {
      "connector": "strapi-hook-mongoose",
      "settings": {
        "client": "mongo",
        "host": "아까 복사한 링크",
        "port": 27017,
        "database": "test",
        "username": "아이디",
        "password": "비번"
      },
      "options": {
        "ssl": true
      }
    }
  }
}

 

11. Strapi를 테스트 해보자. 

strapi start

아래와 같은 로그가 나오면 정상이다.

[2019-05-17T11:39:30.449Z] warn Bootstrap is taking unusually long to execute its callback 3500 miliseconds).
[2019-05-17T11:39:30.452Z] warn Perhaps you forgot to call it?
[2019-05-17T11:39:30.461Z] warn Bootstrap is taking unusually long to execute its callback 3500 miliseconds).
[2019-05-17T11:39:30.463Z] warn Perhaps you forgot to call it?
[2019-05-17T11:39:30.466Z] warn Bootstrap is taking unusually long to execute its callback 3500 miliseconds).
[2019-05-17T11:39:30.467Z] warn Perhaps you forgot to call it?
[2019-05-17T11:39:30.468Z] warn Bootstrap is taking unusually long to execute its callback 3500 miliseconds).
[2019-05-17T11:39:30.468Z] warn Perhaps you forgot to call it?
[2019-05-17T11:39:36.347Z] info File changed: c:\Users\USER\strapi\my-community\plugins\users-permissions\config\actions.json
[2019-05-17T11:39:36.370Z] info Time: Fri May 17 2019 20:39:36 GMT+0900 (GMT+09:00)
[2019-05-17T11:39:36.371Z] info Launched in: 22481 ms
[2019-05-17T11:39:36.372Z] info Environment: development
[2019-05-17T11:39:36.373Z] info Process PID: 3128
[2019-05-17T11:39:36.374Z] info Version: 3.0.0-alpha.26.2 (node v10.15.3)
[2019-05-17T11:39:36.375Z] info To shut down your server, press <CTRL> + C at any time

[2019-05-17T11:39:36.377Z] info ☄️  Admin panel: http://localhost:1337/admin
[2019-05-17T11:39:36.378Z] info ⚡️ Server: http://localhost:1337

[2019-05-17T11:39:36.427Z] debug HEAD index.html (37 ms)
[2019-05-17T11:39:36.437Z] info ⏳ Opening the admin panel...

warn 값은 조금 더 알아보고 포스팅 예정이다.

 

12. http://localhost:1337/admin/plugins/settings-manager/databases/development에 접속해서, 아래와 같이 표시되면 성공적으로 연결을 마친 것이다.