소개

이것은 DynamoDB와 직접 통합된 AWS API Gateway로 간단한 활동 로거를 생성하여 이웃 중 하나의 성가신 활동을 기록하는 방법입니다.

문 쾅, 벽에 주먹질, 무거운 소리를 내는 klomps과 함께 걷는 등 우리를 괴롭히는 활동은 거의 없습니다. 그는 법인이 아니기 때문에 추가 조치를 취하기 전에 그가 언제 그러한 활동을 하는지 추적하고 싶었습니다. 필요할 때마다 쉽게 기록할 수 있는 빠른 방법을 원했기 때문에 이 작은 앱을 만들었습니다.

이 게시물은 말 그대로 주말에 몇 시간 만에 이것을 어떻게 구축했는지 설명합니다.

건축물

API 게이트웨이와 DynamoDB의 직접 통합을 사용했던 매우 기본적입니다.

API에는 엔드포인트가 3개뿐입니다.

활동 제출(Dynamodb 테이블에 데이터 저장)

오늘의 활동 검색(Dynamodb 테이블의 쿼리 데이터)

활동 삭제(Dyanamodb 테이블에서 레코드 삭제)

이미지: 아키텍처

작동 방식

프런트엔드

이미지: 프론트엔드

양식 제출이 포함된 간단한 VueJS 애플리케이션입니다.

오늘의 활동도 나열합니다.

부정확하게 추가된 경우 단일 활동에 대한 기능을 삭제합니다.

쉽게 액세스할 수 있도록 웹 페이지를 내 모바일에 바로 가기로 저장했습니다.

백엔드

Dynamodb 테이블에 구성된 API Gateway 직접 통합.

프런트엔드를 호스팅하는 데 사용되는 S3 정적 웹 호스팅입니다.

OpenAPI 정의와 함께 AWS SAM을 IaC로 사용하여 API Gateway로 가져올 API를 정의했습니다.

인증: 지정된 IP 주소/범위의 앱에 대한 액세스를 제한했습니다. 예: 홈 네트워크

아래와 같이 전체 테이블을 AWS 콘솔 또는 cli에서 csv로 간단히 내보낼 수 있으므로 추가된 모든 보기/기능 가져오기가 없습니다.

aws dynamodb scan \
    --profile [Profile] \
    --table-name [TableName] \
    --query "Items[*].[activityDate.S,time.S,activityType.S,comments.S]" \
    --output text > output.csv

암호

완전한 소스 코드는 다음에서 찾을 수 있습니다: https://github.com/pubudusj/simple-activity-logger

설정 방법

AWS SAM 프레임워크를 사용하여 쉽게 스택을 배포할 수 있습니다.

전제 조건:

AWS SAM CLI + AWS 프로필 설정

npm(프론트엔드 구축용)

전개

편리한 배포를 위해 백엔드와 프런트엔드를 모두 배포하고 앱의 공개 URL을 출력하는 셸 스크립트를 추가했습니다.

저장소를 복제하고 .env.example 파일을 루트 디렉토리에 .env로 복제합니다.

이 .env에서 매개변수를 원하는 값으로 설정해야 합니다.
STACK_NAME - 스택 이름
프로필 - AWS CLI 프로필. 기본 프로필을 사용하는 경우 기본값으로 유지합니다.
REGION - 스택을 생성할 AWS 리전입니다.
STAGE - AWS API 게이트웨이 단계
ALLOWED_IP - 프로젝트에 액세스하기 위해 화이트리스트에 추가해야 하는 IP입니다.

위의 env 변수가 설정되면 다음을 실행하십시오.

chmod 755 deploy.sh && ./deploy.sh

시스템의 최종 공개 URL이 출력됩니다.

정리하려면

AWS에서 생성된 모든 리소스를 제거하는 프로젝트를 정리하려면 다음을 실행합니다.

chmod 755 tear-down.sh && ./tear-down.sh

몇 가지 교훈을 얻었습니다.

CORS 문제: 개방형 API 정의로 인해 CORS 설정이 SAM 템플릿에 정의되어 있어도 충분하지 않습니다. 각 끝점에 대해 responseParameters에서 관련 설정을 추가하는 API 정의 파일에서 CORS 설정을 정의해야 했습니다.

이것을 시도하고 당신의 생각을 알려주시기 바랍니다.

계속 만들고 계속 공유하세요!