본문 바로가기
공부/AWS

[AWS][Lambda] API gateway와 Lambda 함수 연결해서 api 배포하기 (2)

by 웅대 2023. 4. 4.
728x90
반응형

https://growth-coder.tistory.com/147

이전 포스팅에서 Lambda 함수를 생성하는 방법에 대해서 간단하게 알아보았다.

 

이번 시간에는 API gateway와 연동하여 api를 배포해보는 방법에 대해서 포스팅하려고 한다.

 

aws 관리자 계정으로 로그인해서 API gateway로 들어가면 다음과 같이 4가지 API 유형을 선택할 수 있다. 

아래에서 두 번째 REST API를 구축한다.

 

아래와 같은 옵션들을 선택하고 API 생성을 클릭한다.

리소스 생성을 누른다.

리소스 경로를 정한다. 나는 /hello로 들어온 요청을 처리할 예정이다.

 

해당 요청이 들어왔을 때 실행할 함수는 이전 포스팅에서 만들었던 lambda 함수를 사용할 예정이다.

리소스를 생성했으니 메소드를 생성할 차례이다.

http method는 GET을 선택한다.

통합 유형은 Lambda 함수로, Lambda 함수에는 이전에 만들었던 Lambda 함수의 이름을 넣는다.

저장을 누르면 연동이 완료된다.

 

이제 API 배포를 클릭한다.

입력 칸들을 채우고 배포한다.

이제 요청할 주소를 알 수 있다.

이전 포스팅에서 만든 "hello lambda!"를 응답하는 함수는 API gateway로 인해 "/hello"로 매핑되었다.

 

즉 위에 나온 URL 뒤에 /hello를 붙이면 이전 포스팅에서 만든 람다 함수를 실행한 결과를 반환해주는 것이다.

 

참고로 저 URL을 클릭하여 GET 요청을 보내면

{"message":"Missing Authentication Token"}

위 메시지가 반환된다. 이유는 잘못된 url을 입력했기 때문이다.

 

우리는 "/hello"에다만 람다 함수를 매핑했고 "/"에 해당하는 람다 함수가 없기 때문에 저 메시지를 반환하는 것이다.

 

그래서 저 url 뒤에 우리가 설정한 리소스인 "/hello"를 붙여야한다.

 

http method는 GET으로 설정했기 때문에 브라우저에서 url/hello로 접속하자.

 

잘 출력되는 모습을 확인할 수 있다.

한번 자바스크립트 fetch 함수를 사용해서 해당 경로로 똑같이 GET 요청을 보내보자.

 

<lambda.js>

fetch("요청 경로/hello").then((response) =>
  console.log(response)
);

<lambda.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    
</body>
<script src="medical.js"></script>
</html>

이제 html 파일을 열어서 콘솔창을 열어보면 CORS 에러가 발생하는 모습을 볼 수 있다.

이 CORS 에러를 해결하기 위해서 API gateway에서 CORS 활성화를 해야 한다.

 

우리가 만든 API gateway 리소스에 들어가서 메소드를 선택한 후 작업 -> CORS 활성화를 눌러준다.

설정되어있는 값 그대로 CORS 활성화 및 기존의 CORS 헤더 대체를 눌러준다.

변경사항이 생겼으므로 다시 API를 배포한다. 스테이지는 이전에 사용했던 스테이지를 선택한다.

다시 html 파일을 열어보면 응답을 잘 받아오는 모습을 확인할 수 있다.

 

지금까지 기본적인 Lambda 함수 생성과 API gateway를 사용하여 API를 배포하는 방법에 대해서 알아보았다.

 

그리고 CORS 에러 또한 해결해보았다.

 

다음 포스팅에는 데이터베이스와 연결하여 간단하게 회원 정보를 저장하고 로그인을 해보는 방법에 대해서 알아볼 예정이다. 

728x90
반응형

댓글