aws 서버에 aws amplify , cognito 로그인/회원가입 연동하기

저번 글에서 로컬 서버에서 로그인/ 회원가입을 간단하게 만들었습니다.

UI는 기본적으로 지원하는 것을 이용하여 만들었기 때문에 손쉽게 넘어갈수있었습니다.

 

이제 실제 이 로그인과 회원가입을 다른 사람들한테 이용하게 하려면 서버에 올려야합니다.

git을 통해 push를 하고 자동으로 aws amplify에 연동이 되었지만 결과는?

빌드 실패!

왜 이런일이 일어날까요?

 

이것에 관해서 많은 정보들이 많고 다양하게 시도를 해야지만 결과를 찾을수있습니다.

 

많은 이유중에서 제가 확인한 결과 3가지 작업을 하면 이상없이 배포갑니다.

 

1. role(역할)을 설정하기

2. Amplify CLI 최신화 하기

3. frontend에 backend연동시키기

 

이 3가지 작업을하면 배포가 될것입니다.

 

1. role(역할)을 설정하기

이 역할은 IAM을 만들어야합니다.

aws에서 iam을 입력하면 서비스에 있습니다.

 

IAM을 들어오면 왼쪽에 역할 또는 role이라고 적혀있습니다.

이를 클릭하시고 오른쪽에 있는 역할만들기를 누릅니다.

다양한 역할중에 저희는 amplify만 다루면 되기때문에 amplify를 선택하고 다음을 누릅니다.

 

이렇게 amplify관련 정책이 정해진것을 확인할수있으며 다음을 눌러 넘어갑니다.

 

이부분은 다음으로 넘겨도 됩니다.

 

사용할 역할 이름을 작성후에 역할 만들기를 누릅니다.

 

그럼 이렇게 만들어진것을 확인할수있습니다.

 

다시 AWS amolify로 돌아와서 왼쪽의 일반을 누르고 오른쪽 창이 바뀌면 편집 버튼을 누릅니다.

 

편집을 누르면 위 이미지 처럼 변경이 가능해지는데 그중 Service role 부분이 None으로 되어있을겁니다.

이를 방금 생성한 aws_web을 선택하고 저장을 눌러줍니다.

이렇게 했다면 1번 과정은 끝이 납니다.

 

2. Amplify CLI 최신화 하기

Amplify CLI 최신화는 빌드시 최신화를 체크하고 확인하게끔하는 작업입니다.

amplify에서 빌드설정을 누르고 오른쪽 아래로 내리면 Bulid inmage settings 라고 있습니다.

Build image settings의 edit를 누르면 아래와 같은 이미지가 나옵니다.

 

live package updates 부분에서 Add package version override를 클릭하여 Amplify CLI를 클릭하면 위 그림처럼 세팅이 될것입니다. 이렇게 세팅을 저장을 누르면 2번 작업도 끝이납니다.

 

3. frontend에 backend연동시키기

현재 frontend와 backend가 연동이 안되어있기때문에 연결을 시키는 작업을 진행해야합니다.제일 쉬운 부분이니 빠르게 이야기 해드리겠습니다.

 

제일 amplify의 처음 화면으로 돌아옵니다.

그리고 위 이미지에 빨간 동그라미가 쳐져있는 edit를 누르면 아래와 같은 이미지가 나옵니다.

 

이때 Environment 부분이 아무것도 없는 것으로 나와있을겁니다.

이를 backend에 있는 이름을 선택해 줍니다. 저같은 경우는 staging으로 되어있습니다. (Dev로 되어있는 경우도있습니다.)

저장을 누르면 끝이 납니다.

 

그리고 나서 main을 눌러 들어가 이 버전 재배포를 실행시켜줍니다.

 

그러면 이상없이 프로비저닝 -> 빌드 -> 배포 -> 확인이 되는 것을 볼수있을겁니다.

 

사이트도 이상없이 들어가지는 것을 볼수있습니다.

 

이렇게 3가지의 작업을 마무리 하셨다면 이상없이 로그인/회원가입을 서버에 올릴수있게 됩니다.

어렵지는 않은데 이러한 자료가 없다보니 다른사람들에게 공유를 하고 싶어 글을 작성하게 되었습니다.

 

다음에는 aws에서 지원하는 dynamoDB를 연동시키는 방법을 설명하겠습니다.

 

제가 일하면서 배웠던 기술들을 조금씩 적으며 다른사람들에게 도움이 될수있게 천천히라도 자세히 설명하려고하겠습니다.

 

감사합니다.