dev-writeup-2024 / september

개발 1주 1글 스터디
3 stars 0 forks source link

[09-18] API Gateway 와 Lambda 로 Github API 안전하게 이용하기 #10

Open snaag opened 1 day ago

snaag commented 1 day ago

API Gateway 와 Lambda 로 Github API 안전하게 이용하기

들어가며

github 에서 제공해주는 Github API 로 레포지토리의 issues 에 작성해둔 이슈들을 보기좋게 정리해주는 블로그가 갖고싶었습니다. 다만 Github API 의 경우 토큰 없이 요청 시에는 요청 갯수 제한이 있어서 token 을 같이 보내야하더라구요. 안그러면 개발 중에 쫑남...

(만들었습니다 후후 https://snaag.github.io/)

그런데 클라이언트에서 요청하면 요청 중에 토큰이 노출 되는 위험이 있었습니다. 그렇다고 EC2 등으로 서버를 구축하고 거기서 요청 하자니 그건 또 오버스러웠습니다.

저는 단순히 요청을 대신 해주고 결과를 반환 하기만 하는 기능이 필요했고, AWSLambdaAPI Gateway 가 적절하다는 GPT 선생님의 답변에 따라 그렇게 만들어보았습니다.

AWS Lambda 와 API Gateway

AWS Lambda

AWS Lambda서버리스 컴퓨팅 서비스입니다. 즉, 서버를 관리할 필요 없이 코드를 실행할 수 있는 서비스입니다.

개발자가 코드를 작성하면 Lambda 는 필요할 때만 그 코드를 실합니다. 요금은 실행된 만큼만 지불하면 됩니다.

AWS API Gateway

Amazon API GatewayAPI(응용 프로그램 인터페이스) 를 생성하고 관리하는 서비스로, HTTP, REST, WebSocket API 등을 정의하고 배포할 수 있게 해주는 AWS 서비스입니다.

쉽게 말해, API Gateway는 클라이언트(브라우저, 앱 등)에서 HTTP 요청을 받아서 Lambda 함수 또는 다른 백엔드 서비스로 전달해주는 "게이트웨이" 역할을 합니다.

둘을 같이 사용해야 하는 이유

Lambda는 이벤트 기반 함수 실행 서비스입니다. 즉, Lambda 함수는 특정 이벤트 가 발생할 때 실행되며, 직접 HTTP 요청을 처리하는 능력이 없습니다.

여기서 API Gateway가 중요한 역할을 합니다. API Gateway는 HTTP 요청을 이벤트로 변환해 Lambda 함수에 전달해주고, Lambda 함수의 응답을 클라이언트에게 다시 HTTP 응답으로 반환 해줍니다.

실습

실습은 이미지가 많아서 내용이 길어서... 하나에 쭉 적기보단 코멘트를 따로 분리해서 적어봤습니다. 아래의 내용으로 구성되어있습니다.

  1. Lambda 만들기
  2. API Gateway 생성 및 연결
  3. API Gateway 에서 Path 추가하기
  4. Lambda 함수 코드 작성하기 (javascript)
  5. Lambda 의 Layer 를 사용하여 라이브러리 관리
  6. Lambda 에 Layer 추가

AWS 는 GPT 가 엄청 잘 알더라구요. 요거 하면서 80% 는 GPT 를 사용하고 20% 정도만 구글링했습니다.

참고자료

snaag commented 1 day ago

1. Lambda 만들기

lambda 1

스크린샷 2024-09-18 오후 6 05 25

AWS Lambda 에서 함수를 생성해줍니다. 이름, 런타임, 아키텍쳐 등을 골라줍니다.

스크린샷 2024-09-18 오후 6 07 00

이렇게 코드 공간이 있는데요, 여기에 작성된 코드가 실행됩니다. Test, Deploy 버튼을 통해 테스트 및 실행과 배포가 가능합니다.

snaag commented 1 day ago

2. API Gateway 생성 및 연결

스크린샷 2024-09-18 오후 6 07 00

[트리거 추가] 버튼을 클릭해서 API Gateway 를 만들고 연결해줍니다.

스크린샷 2024-09-18 오후 6 08 56

스크린샷 2024-09-18 오후 6 10 13

그럼 이런 화면이 나옵니다.

snaag commented 1 day ago

3. API Gateway 에서 Path 추가하기

스크린샷 2024-09-18 오후 6 10 13

특정 path 로 입력했을 때 요청을 처리하려면, API Gateway 해당 path 를 추가해주어야 합니다. 예를들어 /issues 라는 path 를 받아서 처리한다거나, 특정 쿼리파라미터를 받아서 넘긴다거나 등을 하려면 해당 path 를 추가해주어야 합니다.

(정확히는 해당 값들을 lambda 에 넘기도록 허용해주는 것 같은데요, 그냥 저는 위처럼 이해했습니다)

스크린샷 2024-09-18 오후 6 11 46 스크린샷 2024-09-18 오후 6 12 45

API Gateway > 리소스 로 이동해서 [리소스 생성] 버튼을 클릭하고, 필요한 정보를 입력합니다.

스크린샷 2024-09-18 오후 6 13 57

그리고 생성된 path 를 클릭 후, [메서드 생성] 버튼을 클릭합니다.

스크린샷 2024-09-18 오후 6 14 56 스크린샷 2024-09-18 오후 6 16 03

Lambda 를 선택 후, 조금전에 만들었던 Lambda 를 골라줍니다. 프록시 통합을 on 해줍니다. 그리고 필요한 파라미터가 있다면 추가해주고, 메서드를 생성합니다.

스크린샷 2024-09-18 오후 6 17 22

그리고 마지막으로 [API 배포] 버튼을 눌러 배포하면, /issues 라는 path 로 들어오는 요청이 Lambda 로 잘 들어올 수 있습니다.

스크린샷 2024-09-18 오후 6 18 06

배포 버튼을 누르면 이렇게 뭐가 많이 뜨는데요, 저는 그냥 default 에 매번 배포했습니다. 안써봤지만... 왠지 각 깃헙의 release 처럼 스테이지에 현재의 상태를 저장할 수 있는 거 같습니다.

snaag commented 1 day ago

4. Lambda 함수 코드 작성하기 (javascript)

(익숙한 자바스크립트를 사용하겠습니다)

Lambda 의 코드 소스 부분에서 코드를 작성할 수 있습니다. 이 코드는 github api 를 사용하여 어떤 레포의 issues 내용을 불러오는 코드입니다.

보시면 .mjs 라는 확장자를 사용하는데요, 이는 ESM 모듈 시스템을 사용하겠다는 의미입니다. 즉 import/export 를 사용해서 모듈을 보내거나 사용할 수 있습니다.

스크린샷 2024-09-18 오후 6 29 47

밖에서 사용할 것이므로 CORS 헤더도 추가해줍니다. API Gateway 에서 뭐 잘 해주면 된다는데 전 잘 안되어서 그냥 헤더에 추가해버렸습니다 ㅎ

스크린샷 2024-09-18 오후 6 30 10

여기서 import axios from 'axios' 로, axios 를 사용 하는 모습을 볼 수 있는데요, 요건 아래에서 설명하겠습니다.

스크린샷 2024-09-18 오후 6 30 26

Deploy 버튼으로 배포 후, Test 버튼으로 실행하시면 (코드가 문제없다면) 요렇게 이슈를 잘 받아오고 있는 것을 볼 수 있습니다.

snaag commented 1 day ago

5. Lambda 의 Layer 를 사용하여 라이브러리 관리

Layer 란?

새로운 친구가 나왔습니다! Layer 입니다. Lambda 를 얼핏 보면 저기서 라이브러리/패키지/의존성 등은 어떻게 다운받아서 사용하나 싶습니다. 이때 사용하는 기능이 Layer 입니다.

AWS Lambda Layer는 Lambda 함수에서 공통적으로 사용하는 라이브러리, 모듈, 또는 종속성을 별도로 관리하고, 여러 Lambda 함수에서 공유할 수 있게 해주는 기능입니다.

Layer 실습

스크린샷 2024-09-18 오후 6 31 20

Lambda > 계층 메뉴의 [계층 생성] 버튼을 클릭해줍니다.

스크린샷 2024-09-18 오후 6 32 01

그럼 이렇게 나오는데요, 아키텍쳐와 런타임은 같이 사용할 Lambda 와 동일해야 합니다. 여기서 짱중요한 업로드 입니다. 사용할 라이브러리를 하나의 파일로 압축하여 올리는데요, 이 때 경로 이름 에 주의해야 합니다.

스크린샷 2024-09-18 오후 6 37 01

https://docs.aws.amazon.com/ko_kr/lambda/latest/dg/packaging-layers.html

제 예시는 nodejs 20 이므로, nodejs/node20/node_modules 하위에 패키지들이 설치되어야 합니다. (node 니까 nodejs/node_modules 도 되겠지 하고 올렸는데 잘 안되었습니다)

# nodejs/node20 하위에 install
mkdir nodejs
cd nodejs
mkdir node20
npm init -y
npm install axios

rm -rf package.json # 필요할지는 모르겠으나 저는 걍 지웠습니다
rm -rf package-lock.json # 필요할지는 모르겠으나 저는 걍 지웠습니다
# nodejs 폴더 압축
zip -r layer.zip nodejs
스크린샷 2024-09-18 오후 6 38 38

이렇게 경로를 만든 후, 업로드 하면 됩니다.

snaag commented 1 day ago

6. Lambda 에 Layer 추가

스크린샷 2024-09-18 오후 6 25 47

이제 만든 Layer 를 추가하기 위해, Layers 를 클릭해줍니다.

스크린샷 2024-09-18 오후 6 26 20

그럼 요기로 이동하게 되는데요, 여기에서 [Add a Layer] 를 해줍니다.

스크린샷 2024-09-18 오후 6 42 25

여기서 만들어준 Layer 를 추가해줍니다.

snaag commented 1 day ago

image

k-young-passionate commented 3 hours ago

재밌는 주제의 글 잘 읽었습니다...! 역시 간단한 api 는 lambda가 짱이죠.

혹시 lambda쓰면 대략 비용은 어느정도 생각을 하면 될까요? 💸