계기

실무를 진행한지 어언 2년,
그 동안 넌 뭘 배웠니, 뭘 할 수 있니 대표적으로 하나만 말해봐,
라고 묻는다면

AWS CloudFormation 을 통해, AWS 몇 가지 대표적인 리소스들에 대한 CI/CD 를 설계한 경험을 토대로
서버리스 웹 프로젝트를 구현할 수 있다.
라고 말하겠다.

근데 말만하지말고 직접 만들어보자.

흐지부지 된 이 녀석을 지금의 난 어떤식으로 만들 수 있을까?

AWS Resources

AWS 리소스를 통해 서버리스 앨범 구현.

AWS CloudFormation Stack

아래 리소스를 AWS CloudFormation 으로 배포

• (1). AWS S3 Bucket : 이미지 저장소
• (2). AWS Lambda Proxy Integration
  • Lambda 1: 버킷에서 이미지 가져오기 api
    • 버킷이미지 모두 가져오기

구현

• client 에서 Lambda proxy Integration 로 요청을 보내면, S3 이미지를 로드 후 반환.

Client

• React : 웹 페이지 구성
  • 타입스크립트(.tsx)
  • AWS Lambda 로부터 가져온 이미지를 일단 러프하게 보여주는 것으로

구현

• 캘린더의 change 이벤트가 발생하면 람다로 요청을 보냄.
  • 캘린더는 기본적인 스타일링이 되어있는 react-datePicker 를 사용.

결과

• 캘린더 날짜를 변경하면 로딩 후 이미지를 불러온다.
• 변경이벤트를 발생시키면 같은 이미지를 계속 불러올 뿐. 현재는 날짜가 의미가 없다.

이제 보니, 이번 단계에서 캘린더는 굳이 넣지 않아도 되었다.

추후 예정

step 2 (이미지를 보내고 저장)

• (1). S3 bucket 의prefix 를 다음 처럼 구성
  • yyyy/MM/dd/HH/mm/
  • 여기에 저장되는 파일은 ss.jpg
• (2). Lambda 2 생성 - s3로 이미지 저장. 역할은 다음과 같다.
  • 로컬에서 Lambda 2 로 이미지를 보내면,
  • msec(utc+09:00).jpg 이름으로 된 파일을
  • yyyy/MM/dd/HH/mm/ prefix 에
  • ss.jpg 로 변환하여 저장한다.

step 3 (특정 날짜의 이미지를 시간 순으로 나열)

• 캘린더로 날짜를 선택하면, 그 날짜에 해당하는 이미지들을 시간 순으로 나열

step n(>3)

• AWS Route 53 으로 도메인 이름 등록 후 API Lambda Proxy 를 path mapping
  • 이전까지는 lambda proxy 에서 생성되는 랜덤 aws random domain name 을 사용
• AWS CloudFront 로 웹사이트 배포
• 원본 이미지를 압축해서 가져오기
• 웹 페이지 UI/UX 다듬기
• 동영상 로드 및 렌더링

GitHub 링크

• Repository/Album-Project
• Repository/aws-jinseok