[AWS] Lambda, API Gateway, cloudflare로 배포하기

cloudflare로는 클라이언트를, aws로는 서버를 배포한다.
둘다 https로 배포된다.
람다는 서버리스 컴퓨팅 서비스다. 서버관리를 할 필요가 없고 사용량에 따라 요금이 부과되어 저렴하게 이용 가능하다. 포트폴리오 사이트 배포하는 데 큰 도움이 될 것 같아 자세히 기록해본다.

Back: lambda

aws에 가입되어있다는 전제 하에 설명하겠다.
1. lambda 검색해서 람다 콘솔로 접속한다.
2. lambda의 함수 페이지에서 함수생성 버튼을 클릭한다.

3. 새로 작성, 함수이름 기재, 나는 node -v 19.x였는데 람다에서 지원하는 버전은 18.x까지라 Node.js 18.x로 했다.
고급설정은 딱히 만질 것 없이 함수생성 버튼을 클릭하면 된다.

4. 생성된 함수 페이지에서 코드 소스를 업로드한다.
이때 프론트 코드 올릴 때는 프론트 폴더를 통채로 올렸는데, 여기서는 백엔드 폴더 내에서 모든 폴더와 파일을 압축한 후 업로드한다. node_modules 파일을 포함해야한다.

필자는 node_module 폴더, index.js, package-lock.json, package.json 파일을 업로드했다.
5. 수정이 필요하다면 다시 업로드 할 필요 없이 같은 페이지에서 수정하고 Deploy 버튼을 눌러주면 된다.

6. 추가로, 구성 탭에서 일반 구성에 보면 메모리, 임시 스토리지, 제한시간을 수정할 수 있다.
제한시간이 너무 짧아서 에러가 날 수도 있으니 참고하자.

Back: API Gateway

1. gateway 검색해서 API Gateway 콘솔로 접속한다.
   
2. API 생성 버튼을 누른다.
   생성할 api 유형을 골라 구축한다. 필자는 REST API를 구축했다.
   
3. REST, 새 API, 이름, 엔드포인트 유형은 지역으로 api 생성한다.
   필자는 test라는 이름으로 생성했다.
   
4. 리소스 -> 작업 -> 리소스 생성한다.
   
   이때 cors를 활성화해준다. 리소스이름=리소스경로(파라미터)가 된다.
   만일 '/user' 파라미터를 쓴다면 user라고 쓴다. 중괄호를 이용해 프록시 리소스로 생성하는 것도 가능하다.
5. 생성하면 opsions 메서드는 자동으로 생성된다. 프리플라이트에 사용하는 mock 엔드포인트다.
6. 사용할 메서드를 생성한다. get을 생성해보자.
   작업->메서드 생성->get
   get으로 설정하고 옆에 회색의 체크 아이콘을 클릭하면 get이 생성되고 설정할 수 있게 된다.
7. lambda함수, 프록시 통합 사용, lambda 함수에 함수명 기재 후 저장 클릭
   
8. 람다함수에 대한 권한 추가 창이 뜬다. 확인 누르면 된다.

API 사용

1. Lambda 콘솔로 이동해 함수를 클릭한다.
2. 구성 탭에서 트리거 메뉴 클릭한다.
3. API 엔드포인트가 보인다. 고대로 사용하면 된다.
   

const api엔드포인트 = 'https://api엔드포인트';
const response = await fetch(api엔드포인트)
  .then((response) => response.json())
  .then((data) => console.log(data));

Front: cloudflare

1. 클라우드플레어에 가입한다.
2. pages 메뉴로 들어간다.
   
3. create a project 버튼을 클릭한다.
   여기서 깃을 연결할 수도 있고, 바로 업로드도 할 수 있다.
   필자는 코드를 깃허브에 올리지 않았어서 direct upload를 했다.
   
4. 프로젝트 이름을 적고 생성한다.
   이때 입력한 프로젝트 이름이 페이지 이름이 되니 신중하게 작명하는 것이 좋겠다.
   만일 같은 프로젝트명이 이미 있다면 생성하는데도 오래걸리고, 무작위의 문자열이 뒤에 붙여 나온다. 되도록 고유한 프로젝트명을 지어보는 것을 추천한다.
   

주의할 점

• 이미 있는 프로젝트명이라면 요상한 문자열이 붙어서 생성된다.
• 소문자와 영어, dash(-)만 쓸 수 있다.

5. 프론트엔드 코드 전체 폴더를 올린다.
   그래그 앤 드랍이 가능하다. deploy site를 클릭하면 프론트 배포 완!
   

6. 수정도 가능하다.
   생성한 프로젝트 페이지에서 Deployments탭 -> Create new deployment 버튼 클릭 -> 수정된 코드를 포함한 전체 fe 폴더를 올린다. -> save and deploy 버튼 클릭
   

회고: Lambda Function url이란 무엇인가...

백엔드 배포하는데 간단하지만 계속 cors 에러나고 고생했다.
lambda function url이라는 걸 사용해서 하려고 했는데, 결국 api gateway로 뚫었다... 챗 gpt한테 물어보면서 해결해보려고 했는데 챗 gpt도 잘 모르는 것 같음ㅠㅠ lambda function url vs api gateway 라길래 비슷한 대체제인 줄 알았는데 아닌가... 챗 gpt한테 lambda 함수url에 대해 설명해달라고 하면 람다함수는 url이 없다고만 한다.

AWS Lambda 함수에 HTTPS 엔드포인트를 추가하고 선택적으로 Cross-Origin Resource Sharing(CORS) 헤더를 구성할 수 있는 새로운 기능인 Lambda 함수 URL의 정식 출시를 발표하게 되어 기쁩니다.
...중략
함수 URL은 요청 검증, 제한, 사용자 지정 권한 부여자, 사용자 지정 도메인 이름, 사용 계획 또는 캐싱과 같은 API 게이트웨이 고급 기능이 필요하지 않은 퍼블릭 엔드포인트로 단일 기능 마이크로서비스를 구현해야 하는 모든 사용 사례에 적합합니다. 예를 들어 웹후크 핸들러, 양식 유효성 검사기, 모바일 결제 처리, 광고 배치, 기계 학습 추론 등을 구현할 때가 있습니다. 또한 Lambda 콘솔을 벗어나거나 추가 서비스를 통합하지 않고도 연구 개발 중에 Lambda 함수를 호출하는 가장 간단한 방법이기도 합니다.
Amazon API Gateway는 모든 규모에서 API를 손쉽게 생성, 게시, 유지 관리, 모니터링 및 보호할 수 있는 완전관리형 서비스입니다. API Gateway를 사용하여 JWT/사용자 지정 권한 부여자, 요청/응답 검증 및 변환, 사용 계획, 기본 제공 AWS WAF 지원 등의 기능을 활용할 수 있습니다.

AWS에서는 내가 이해한 것과 같이 얘기하는 것 같은데 혼란스럽군...