[Flutter] Amplify GraphQL 클라우드 기반 앱 만들기 [1]

총 2달을 삽질하고 쓰는 정리글.. 좋아요 눌러주시면 감사드리겠습니다..

 

 

---

AWS EC2에 웹서버를 구현하는 방법도 좋지만, 웹서버가 굳이 필요하지 않은 클라이언트 기반 애플리케이션이라면

서버리스 기반의 구현도 생각해볼 만 합니다.

 

EC2 같은 서비스는 켜놓은 시간 대비부터가 과금이 소모되지만, 서버리스 기반 서비스를 잘 이용하면 불필요한 과금을 피할 수 있기 때문입니다.

 

 

 

우선 안드로이드 스튜디오로 새 프로젝트를 생성합니다.

 

 

 

생성을 완료하셨다면, 안드로이드 스튜디오 콘솔 창으로 이동합니다.

(아래 줄 보시면 Terminal 이라고 있습니다)

 

 

amplify-cli를 아직 설치하지 않으신 분이라면, 다음과 같이 입력하여 설치해주세요.

npm install -g @aws-amplify/cli

 

 

설치가 완료되셨다면, 이제 본격적인 시작입니다. 천천히 따라와주시면 됩니다.

다음과 같이 입력해주세요.

amplify configure

 

그러면 인터넷 창이 뜰 텐데요, 로그인 해주시면 됩니다.

 

그 다음 다시 콘솔로 돌아와서

엔터를 눌러줍니다.

 

 

region을 설정하라고 하는데, 이것도 은근히 중요합니다.

ap-northeast-2 가 서울이므로, 아무래도 속도면에서 유리합니다.

 

 

 

그 다음 이제 User name을 입력하라고 하는데,

이 프로젝트가 나의 AWS 계정에서 건드릴 수 있는 권한을 최소화시키기 위한 하나의 권한을 설정해줄 것입니다.

임의로 설정해주시고 나면, 인터넷 창이 자연스럽게 켜집니다.

 

 

 

IAM 추가 화면입니다. 특정한 권한을 가지고 있는 서브 사용자를 만든다고 보시면 됩니다.

 

 

다음을 누르시고,

 

계속 다음을 누르셔서 "사용자 만들기" 까지 눌러줍니다.

 

 

그러면 계정이 만들어지고, 다음과 같은 화면이 나오게 됩니다.

액세스 키 ID와, 비밀 엑세스 키 ID는 잘 알아두셔야 합니다.

따라서 어지간하면 .csv를 다운로드하여 보관하시길 바랍니다.

 

 

여기까지 하셨다면, 다시 안드로이드 스튜디오 콘솔로 돌아와서, 엔터를 눌러줍니다.

방금 만든거 기억하시죠? 그것의 엑세스 키 ID, 그리고 비밀 엑세스 키 ID까지 차례로 입력해주세요.

그리고 profile name도 임의로 설정해주시면 끝납니다.

 

 

 

자 이제 첫번째 산을 넘었습니다. 아직 넘어야 할 산이 좀 더 있으니 천천히 시작해봅시다.

벌써 피곤하시다면 바람도 한번 쐬시고 물도 한잔 하고 다시 나아갑시다.

 

다시 터미널에 다음과 같이 입력해줍니다.

amplify init

 

 

프로젝트 명을 입력해주시고, 나머지는 다 엔터로 넘어가면서 디폴트로 설정하시면 되지만, IDE 종류 체크는 어지간하면 맞춰서 해줍시다.

(저는 Android Studio를 이용)

 

그러고 나면 이런게 뜨는데요

 

저희는 아까 권한을 지정한 유저를 만든 게 있죠?? AWS profile을 선택하고, 아까 만든 프로필을 선택해줍니다.

 

 

그러고 나면 좀 시간이 필요합니다. 좀 걸리니까, 잠시 눈의 휴식을 취하고 있으면 좋겠습니다.

 

 

다 끝났다면, 다음과 같이 터미널에 입력해줍니다. 이제 GraphQL을 추가해줄 겁니다.

amplify add api

 

엔터 누르시고

 

 

한번 더 continue 누르시면 다음과 같이 뜹니다.

 

스키마를 구성하는건데요, 저희는 Todo app의 schema를 예시로 구경해보겠습니다. 엔터를 누릅니다.

 

그럼 프로젝트에 갑자기 이런게 보이실 거에요

 

저희가 방금 Todo Schema를 제공받기를 선택했기에, 서비스가 직접 스키마를 만든 것을 보실 수 있습니다.

 

여기에 Todo 말고 다른 Schema를 추가하실 수도 있습니다.

Schema를 추가할 수도 있고, Subscription을 추가해서 구독도 가능합니다.

 

이제 저희가 CLI 환경에서 만든 이 Schema를 Cloud로 push 할 것입니다.

(더 만들고 싶은 Schema가 있으시다면, 더 추가하고 다시 push 하시면 되겠죠?)

 

 

이제 다 왔습니다.. 아래와 같이 입력해줍니다.

amplify push

이게 아마 제일 오래 걸리실 거에요.

 

이제 다 왔으니, 편안한 음악 들으시면서 기다리시길 추천드립니다.

 

 

 

다 끝나셨다면, 이제 GUI로 좀 더 편하게 봐봅시다!

다음 명령어를 입력해주세요.

amplify console

 

그리고 AWS console에 로그인해줍니다.

 

 

API 탭으로 가면, 아래와 같은 화면이 보이는데요, 여기서 'AppSync에서 보기' 를 눌러줍니다.

 

 

 

그리고 들어간 페이지의 왼쪽 메뉴에서 '쿼리' 를 누르시면 아래와 같은 화면이 나옵니다.

 

여기서 Query라고 쓰여 있는 Spinner를 누른 뒤 Mutation을 선택하고, 옆의 + 를 눌러줍니다.

 

참고로 Spinner에

Query, Mutation, Subscription이 있을 텐데요

 

Query는 SELECT문 같은, 검색이라고 보시면 되고

Mutation은 INSERT나 DELETE같은 읽기/쓰기라고 보시면 되고

Subscription은 좀 특별한데, 데이터의 변화를 감시하고자 구독하는 서비스입니다.

 

 

어쨌든 Mutation을 누른뒤 임의로 데이터를 작성하여, 데이터베이스에 넣어보겠습니다.

위 그림처럼 해놓고, 플레이 버튼을 눌러봅니다. (MyMutation으로)

 

 

그럼 로그가 뜰 텐데요, 잘 입력되었다는 로그가 뜰 것입니다.

그러면 아까 우리가 AWS console에서 봤던

이 화면에서, TodoTable 오른쪽에 있는 View를 눌러 이동해줍니다.

 

 

그러면 DynamoDB 서비스로 이동하게 되는데요, 이곳이 데이터베이스라고 생각하시면 됩니다.

 

근데 저희가 방금 데이터를 하나 푸시했는데, 항목 수가 0로 나오죠??

DynamoDB는 수동적으로 약 6시간마다 정보를 업데이트하기에, 지금 당장 확인해보고 싶으면 수동으로 업데이트해야 합니다.

라이브 항목 수 가져오기를 눌러보시면 데이터가 1 증가했음을 알 수 있습니다.

 

 

 

---

 

여기까지 오시느라 고생하셨습니다. 재미를 느끼셨다면 좋겠습니다.

 

 

이제 Flutter 앱 내에서 직접 이러한 쿼리를 주고받고 통신하는 과정을 가져볼 것인데요.

Flutter에는 GraphQL 전용 코드들이 아직까지 존재하지 않아서, 구문이 상대적으로 복잡하게 작성됩니다.ㅜㅜ

 

업데이트를 기원하며..

 

 

 

---

 

 

Amplify CLI가 잘 설치되지 않는다면, 아래 글을 참고하세요

https://docs.amplify.aws/cli/start/install/#option-1-watch-the-video-guide

https://docs.amplify.aws/cli/start/install/#option-1-watch-the-video-guide

 

IAM role 생성에 어려움이 있으시다면, 아래 글을 참고하세요

https://aws.plainenglish.io/build-an-authentication-system-with-aws-amplify-cognito-and-react-2be3d3fe181b

Build an Authentication System with AWS Amplify, Cognito, and React

 

 

Flutter GraphQL 코드 맛보기

https://docs.amplify.aws/lib/graphqlapi/getting-started/q/platform/flutter/

https://docs.amplify.aws/lib/graphqlapi/getting-started/q/platform/flutter/