[AWS] API Gateway: Websocket API

세상이 참 좋아져서 굳이 서버를 구성하지 않고도 서버를 만들 수 있는 시대가 왔다.
Lambda 같은 서비스들 말이다.

Lambda의 가장 큰 특징은 무상태성이다. 그냥 그때그때 뭔지모를 머신에서 프로세스를 올리는 것이라, 보통 기존 서버에서 말하는 세션이나 롱 폴링 같은 처리가 어렵다. 웹소켓도 그렇고 말이다.

하지만 다행히도 Lambda가 아니라 API Gateway를 사용하면 어느정도 구현이 가능하다.

비용

이건 일반 API Gateway와 다르게 비용이 부과된다.

요청 수와 연결시간 기준이다.

예제: 간단한 채팅서버 구현해보기

WebSocket API를 통해 정말 간단한 기능만 있는 단일 채팅방을 구현해보면서 구조를 익혀보도록 하겠다.

Lambda 생성

먼저 서버 동작을 구현할 람다 함수들을 생성한다.
하나만 만들어서 연결해도 되긴 되는데, 나는 웹소켓 접속, 접속종료, 기타동작에 대해서 별도 함수를 다 구현했다.
그래서 먼저 용도별로 하나씩 깔아줬다.

WebSocket API 생성

이건 API Gateway 콘솔에 가서 만들어야 한다.

이름과 표현식을 지정한다.

라우팅 선택 표현식은, 클라이언트가 데이터에 action 값을 어디로 보낼 것인지를 지정한다.
action 값은 소켓 연결시에는 connect, 종료시에는 disconnect를 받고, 클라이언트에서 임의로 action 값을 지정했을 때도 그것대로 받는다.

그냥 기본값으로 줘도 무방하다.

그 다음에는 경로를 지정해준다.
아까 만든 함수를 엮어주면 된다.

그럼 이런식으로 만들어질 것이다.

Dynamo 커넥션 테이블 생성

그냥 서버를 쓰면 이렇게까지 하지는 않아도 되지만, Lambda는 서버리스이기 때문에 커넥션을 저장하고 관리할 필요가 있다. 커넥션을 들고있어야 다시 브로드캐스트를 해줄 수 있기 때문이다.
대충 하나 만들어준다.

내 채팅서버는 채팅이 휘발성이라 보내줄 커넥션 목록만 저장하고 채팅용 테이블은 두지 않는다.

연결시 들어오는 event 값

람다함수에 콘솔로그를 찍어본다면

connect는 이렇게

disconnect는 이렇게

기타 default는 이렇게 들어온다.

여기서 이제 connect 함수에서는 connectionId를 Dynamo에 저장하고,
disconnect에서는 connectionId를 제거.
default에서 send action으로 메세지를 받으면 connectionId를 전체조회해서 모든 접속자들에게 메세지를 뿌려줄 것이다.

connect 함수 코드는 이렇다.

const aws = require('aws-sdk');
const client = new aws.DynamoDB.DocumentClient();

exports.handler = async (event) => {
    console.log(event);

    const connection_id = event.requestContext?.connectionId;

    await client.put({ TableName: 'chat_connection', Item: { connection_id } }).promise();

    // TODO implement
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

간단하다.
그냥 넣기만 한다.

disconnect 함수 코드다.

const aws = require('aws-sdk');
const client = new aws.DynamoDB.DocumentClient();

exports.handler = async (event) => {
    console.log(event);

    const connection_id = event.requestContext?.connectionId;

    await client.delete({ TableName: 'chat_connection', Key: { connection_id } }).promise();

    // TODO implement
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

이것도 간단하다.
connection이 끊기면 지우기만 한다.

다음은 default 코드다.

const aws = require('aws-sdk');
const client = new aws.DynamoDB.DocumentClient();
const apiGateway = new aws.ApiGatewayManagementApi({
    endpoint: 'q4w54cu53i.execute-api.ap-northeast-2.amazonaws.com/production'
});

exports.handler = async (event) => {
    console.log(event);

    const body = JSON.parse(event.body);

    switch (body.action) {
        case 'send': {
            const list = (await client.scan({ TableName: 'chat_connection' }).promise()).Items;

            await Promise.all(list.map(async e=>{
                await apiGateway.postToConnection({
                    ConnectionId: e.connection_id, 
                    Data: Buffer.from(JSON.stringify({ action:'receive', name: body.name, message: body.message }))
                }).promise();
            }));
        }
    }

<br>

    // TODO implement
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

send action을 날리면 저장되어있던 connectionId를 전부 읽어서 다시 쏴준다.

프론트엔드 (React)

프론트엔드 코드는 이런식으로 작성했다.
여기서는 표준 웹소켓을썼는데, socketio 웹소켓모드를 사용해도 무방할 것이다.

open이 connect 성공, close가 disconnect에 트리거된다.
그리고 나머지 임의의 메세지들은 전부 message 이벤트로 들어온다.
여기서는 메세지가 오면 채팅 리스트에 이어붙여서 보여주게 했다.

그리고 전송을 누르면 메세지를 날리도록 했다.

전체 코드는 github에서 확인할 수 있다.
https://github.com/myyrakle/aws-serverless-chat
그대로 돌려봐도 된다.

이렇게 해서 실행해보면

connectionId도 잘 쌓일 것이고

잘 돌아갈 것이다.

유의사항

나는 간단한 테스트와 저렴한 비용을 위해 DynamoDB를 썼지만, 실제로 활발한 채팅 서버 등을 운영하려면 Redis를 쓰는 편이 더욱 좋을 것이다.

그리고 WebSocket API도 제약사항이 제법 있다.
10분 동안 요청이 없는 커넥션은 강제로 닫고, 요청을 열심시 쏘고 있어도 2시간이 넘으면 강제로 닫아버린다.
이거 말고도 메세지 크기에도 제한이 있고.. 이것저것 많다.
자세한건 해당 문서를 참조해봄이 좋겠다.
https://docs.aws.amazon.com/apigateway/latest/developerguide/limits.html

이런저런 제약사항이나 불편한 점들이 있긴 하지만, 그걸 크게 신경쓸 정도가 아니라면 완전관리형이란 점에서 쓸만한 이유는 충분히 있는 것 같다.

참조
https://docs.aws.amazon.com/ko_kr/apigateway/latest/developerguide/apigateway-websocket-api.html
https://docs.aws.amazon.com/ko_kr/apigateway/latest/developerguide/apigateway-websocket-api-overview.html
https://github.com/socketio/socket.io-client/issues/1370
https://lacti.github.io/2019/07/07/websocket-api/
https://docs.aws.amazon.com/apigateway/latest/developerguide/limits.html