🔗 이전 포스팅 링크
실습 ① - 실습 구성도 아키텍처, 실습 전 IAM 사용자 생성
[AWS TechCamp] AWS 서버리스로 서버 고민없이 웹 애플리케이션 구축하기 ① - 실습 구성도 아키텍처,
온라인에서 3일 동안 진행되는 AWS TechCamp를 신청했다. 이때까지 공부해 온 AWS 서비스가 어떻게 설계되어서 사용되는지 직접 실습을 하면서 공부하기 좋은 기회가 될 것 같았다. 간단한 개념 정리
hye-ne.tistory.com
실습 ② - DynamoDB, Lambda 생성하고 연결하기
[AWS TechCamp] AWS 서버리스로 서버 고민없이 웹 애플리케이션 구축하기 ② - DynamoDB, Lambda 생성하고
🔗 이전 포스팅 링크실습 ① - 실습 구성도 아키텍처, 실습 전 IAM 사용자 생성 [AWS TechCamp] AWS 서버리스로 서버 고민없이 웹 애플리케이션 구축하기 ① - 실습 구성도 아키텍처,온라인에서 3일 동
hye-ne.tistory.com
📍 API Gateway 생성하기
인터넷을 통해 Lambda를 실행할 수 있도록 인터넷 주소를 만들어 Lambda와 연결한다. API Gateway를 구성하여 호출 통로를 만들어준다.
1. APIGateway 콘솔로 들어가서 Create API 버튼을 눌러 생성한다.
2. 어떤 방식의 API를 만들지 선택할 수 있는 옵션들이 나온다. HTTP API 보다 API 관리 기능이 더 추가되어 있는 REST API로 생성한다. Build 버튼을 눌러 진행한다.
3. New API를 선택하고 API name 을 my-api로 작성 후, 생성한다.
4. 생성된 API를 선택해서 들어간 후, Create method 버튼을 눌러 method를 생성한다.
5. Lambda 함수에서 작성한 코드를 실행시키는 GET 메서드를 생성한다. 아래와 같이 설정하고 이전에 만든 Lambda 함수를 찾아서 넣어준다.
6. 생성한 API의 Resources에서 생성한 GET 메서드를 선택하면 해당 메서드의 관련된 정보가 나오는데 TEST 탭에서 테스트를 실행한다. TEST가 성공하면, STATUS가 200으로 나오고, Response Body에 랜덤한 값이 나오게 된다.
📍 API Gateway 추가 설정하기
API Gateway 를 만들었지만, 바로 호출하면 CORS와 관련한 에러가 나게 된다. 따라서 호출이 정상적으로 이루어지기 위해 추가 설정을 해주어야 한다.
💡CORS(Cross Origin Resource Sharing) 란?
서로 다른 도메인간에 자원을 공유하는 것.
악의적으로 심어놓은 자바스크립트로 인한 공격을 방지하기 위해 기본적으로 브라우저에서 현재 있는 도메인/포트와 다른 곳으로 요청을 보내는 것을 차단한다.
1. 생성한 API에서 Enable CORS를 클릭한다.
2. 방금 생성한 GET 메서드를 선택해서 설정을 완료해준다.
3. API가 정상적으로 작동하고, CORS 설정도 해주었으므로 실제로 이 API를 사용할 수 있게 배포를 해준다.
Deploy API 버튼을 눌렀을 때, Stage 설정창이 뜨는데 New Stage 를 선택하고 dev를 입력해준다.
💡API Gateway의 Stage 란?
Stage는 API의 특정 버전을 다양한 환경(e.g. dev, test, prod 등) 에서 분리, 관리할 수 있도록 해주는 기능.
각 Stage는 API의 배포 상태를 나타내고, 각기 다른 환경에서 API 동작을 테스트하고 운영할 수 있게 해준다.
4. Deploy 하고 나면 URL 이 생성되는데, 이 URL을 호출하면 URL을 통해 Lambda를 호출하게 된다.
📍 S3 버킷 생성하기
S3 의 정적 웹사이트 호스팅 기능을 사용하여 웹서버를 대체한다. S3 bucket에 index.html 파일을 배포하고 권한을 부여하여, 전세계 사용자들이 내가 만든 웹애플리케이션에 접근하여 사용할수 있도록 한다.
1. S3 콘솔에 접속해 Create Bucket 버튼을 눌러 버킷을 생성한다. 버킷 이름은 전세계에서 유일하게 생성한다. 아래와 같이 설정하고 버킷을 생성한다.
2.아래의 코드 내용을 index.html 파일로 저장하고 50번째 줄의 "URL을입력하세요" 부분에 이전에 만든 API Gateway URL로 대체한다. 그 후 생성한 버킷에 들어가 Upload 버튼을 누른다.
<html>
<head>
<meta charset="utf-8" name="viewport"
content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Hello World!</title>
<style>
#title {
font-family: arial;
font-size: 2em;
color: #eb971a;
margin-top: 50px;
text-align: center;
}
button {
background-color: #eb971a;
border: none;
color: white;
border-radius: 5px;
width: 40%;
height: 35px;
font-size: 13pt;
margin-top: 30px;
text-align: center;
}
#sentence {
font-size: 17pt;
margin-top: 30px;
font-weight: bold;
color: #eb971a;
}
</style>
</head>
<body>
<p id="title">Hello World From <b>Lambda</b></p>
<hr id="lambda-line" width="800px" align="center" color="#eb971a;">
<center><button onclick="checkEvent();">Who are you?</button></center>
<center>
<div id="sentence"></div>
</center>
</body>
<script type="text/javascript">
function checkEvent() {
$.ajax({
type: "GET",
url: "URL을입력하세요",
dataType: 'json',
success: function (data) {
document.getElementById('sentence').innerHTML = data.status + " " + data.name
},
error: function (error) {
alert('ERROR::');
console.log(error)
}
});
}
</script>
</html>
3. Add files를 눌러 index.html 파일을 선택하거나, drag and drop을 하여 파일을 선택한 후 Upload 버튼을 눌러 업로드 해준다. 파일이 잘 업로드된 것을 확인할 수 있다.
📍S3 정적 웹사이트 호스팅 기능 활성화하기
1. 생성한 S3 버킷에 들어가 [Properties] - [Static website hosting] 에서 Edit 버튼을 누른다.
2. index document 입력란에 index.html 을 입력한다. 처음 주소로 접속할 때 읽어 들일 html 파일을 지정해주는 부분이다. 아래와 같이 설정해 주고 저장한다.
3. 설정을 끝내면 정적 웹사이트 기능이 활성화 되고, 아래와 같은 주소가 생성된다. 하지만 아직까지 외부에서 접근할 수 있는 권한이 없어서 정적 웹사이트가 차단되어 있다. 따라서 외부에서 파일을 읽어 들일 수 있도록 권한을 부여해야 한다.
4. [생성한 버킷] 선택 - [Permissions] - [Bucket policy] 에서 Edit 버튼을 눌러 부여해준다.
5. 아래 코드를 복사하여 Bucket Policy 편집창에 붙여 넣고 본인버킷명을 넣어주고 저장한다.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Stmt1709405011428",
"Action": [
"s3:GetObject"
],
"Effect": "Allow",
"Resource": [
"arn:aws:s3:::본인버킷명",
"arn:aws:s3:::본인버킷명/*"
],
"Principal": "*"
}
]
}6. 정적 웹사이트 호스팅 주소를 브라우저에 붙여 넣으면 아래 화면처럼 나오고 버튼을 눌렀을 때, 람다가 실행되고 DynamoDB에 기록이 된다.
TechCamp를 통해서 서버리스를 통해서 웹 애플리케이션 구축해보았다. 다음에는 지금까지 실습한 내용에 대한 리소스를 삭제한다.