React chat app with serverless websocket (미완)

React 채팅 앱 & serverless websocket

예제사이트

 

serverless websocket 이해를 위해

websocket을 사용한 React 채팅 앱 예제를 따라해본다.

 

기본적으로 serverless websocket와 cognito 개념이 필요하다.

 

먼저 git에서 예제소스를 clone 한다.

 

구조는 크게 ./backend 와 ./frontend로 나뉘어져 있다.

 

---

cognito

 

User pool을 하나 만들어준다. ( 만드는 방법은 구글링)

Pool id를 확인 할 수 있다.

App clients 카테고리에 들어가면 App Client id를 확인 할 수 있다.

만약 없을 경우 새로운 App client를 생성하면 된다.

 

 

 

---

backend

 

 

us-east-1에서 테스트를 할 것이기때문에 region 정보를 수정해준다.

 

serverless.yml

 

handler.js

 

DynamoDB 테이블 이름을 지정해준다.

handler.js

 

 

keys_url 중간에 cognito 'User pool id'를 입력해준다.

'app_client_id'도 입력해준다.

handler.js

 

 

$ sls deploy

 

 

람다 함수가 생성 되었다.

lambda > functions

 

 

API Gateway가 생성 되었다

api gateway > routes

 

api gateway > dashboard

 

 

---

frontend

 

 

config 내용을 수정한다.

(USER_SRP_AUTH는 일단 그냥 둔다.)

src/config.js

 

 

이 예제는 Sockette 모듈로 websocket에 접속한다.

주소부분에 APP_CLIENT_ID를 입력해주자. (API Gateway에서 확인 할 수 있다.)

src/chatWindow.js

tip)

react의 useEffect() 모듈은 DOM이 변경되었을때 실행된다.

이 예제에서는 messageList의 변경이 감지되면 호출된다.

 

 

 

$ npm install & npm start

 

 

---

실행

 

 

접속: http://localhost:3000

 

접속을 해보면 아래와 같은 화면을 확인 할 수 있다.

 

로그인 폼을 위해 사용된 모듈: 'aws-amplify', 'aws-amplify-react'

(aws cognito와 연동해서 사용할 수 있게 만들어졌다.)

localhost:3000 / before log in

계정을 만들면 

User pool > Users and groups에 들어가면 계정이 추가가 되어있다.

aws cognito > Users and groups

 

 

 

---

이슈 발생 (미해결)

 

websocket 접속 에러....

localhost:3000 / after log in

 

별다른 에러로그가 보이지 않는다..

CloudWatch

 

 

wscat으로 테스트를 해봐도 401 에러가 뜬다..

wscat 접속 시도 결과 화면

 

 

---

이슈 해결 (임시)

 

 

serverless.yml 파일을 수정한다.

 

먼저 접속 인증 관련된 authorizerFunc 부분을 지운다.

serverless.yml

 

iamRoleStatements의 Resource 값은 "*"로 해준다.

Environment 부분을 지운다.

serverless.yml

 

DB 테이블이름을 지정해준다.

serverless.yml

 

수정완료된 소스

 

접속

localhost:3000

 

메시지 전송 테스트

채팅 결과

 

 

일단 Auth부분을 빼버리고 정상적으로 돌아가는 모습을 확인했다.

완벽한 해결은 아니지만 메시지 전송까지 확인 할 수 있었다.

 

이 예제로 하루를 보내버려서 살짝 지쳤다.

마음이 다시 정비가 되면 Auth 문제를 풀어보겠다.!