고정 헤더 영역
상세 컨텐츠
본문
반응형
필자는.. 이전 글에 따라.. 아무것도 모르기 때문에.. 가이드에 나와있는대로 한번 구축을 진행해보도록 하겠다.
참고로 필자는 한국인들에게 맞게끔 그냥 해당 글을 좀 더 보충 설명을 진행할 예정이다.
우선 필자가 따라한 내용은 가장 기본이 되는 AWS에서 제공하는 가이드 문서를 보고 따라 진행했다.
AWS 가이드 글의 내용에 대한 링크이다.
모듈 1 - AWS에서 기본 웹 애플리케이션 구축
실망을 드려 죄송합니다. 오래되었거나 혼란스럽거나 부정확한 사항이 있습니까? 피드백을 제공하여 이 자습서를 개선할 수 있도록 도와주십시오.
aws.amazon.com
한국어로 되어있긴 하지만 아무래도 한국인들 특성상... 글보단 그림이기 때문에.. 간단하게 진행해보자.
우선 aws management console에 접속하여 아래와 같은 솔루션 구축에서
정적 웹 앱 호스팅을 선택한다. 그럼 아래와 같은 화면이 나온다.
해당 내용에서 필자는 우선 aws 관련된 소스가 아무것도 없음으로 정말로 해당 가이드대로 따라서 가보자.
해당 내용에서 Git 공급자 없이 배포를 선택한다.
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
Hello World
</body>
</html>
|
해당 내용의 글을 복사한 후에 TEXT파일을 index.html 파일로 저장한다.
이후 해당 파일을 zip 파일 형식으로 압축한다.
우선 테스트 용도로 인하여 html 양식의 웹페이지를 띄워볼 예정이다.
해당 파일에서 윗 단계에서 Git 공급자 없이 배포를 이용하여 진행을 했다면,
해당 내용으로 저장 및 배포를 진행한다.
필자는 가이드에 나와있는 대로 GettingStarted / dev / 해당 파일 이렇게 진행을 하였다.
그럼 해당 내용으로 이렇게 수동 배포가 진행중이다. 이후에 밖으로 나와서 모든 앱을 클릭하게 되면 아래와 같은 화면이 나온다.
그럼 이상황에서 이제 제대로 들어갔는지 화면을 확인해보자.
가이드 내용에서는 어디에 무슨 버튼이 있는지 모른다..
그래서 필자가 아래에 이미지를 해놓으니 해당 내용으로 따라와서 도메인을 확인해보면 된다.
해당 앱 클릭 -> 앱설정 -> 도메인 관리 에 들어간다. 그러면 해당 Domain 아래에 URL이 있다.
해당 URL을 복사해서 따로 클릭을 할 경우에 내가 올린 웹 페이지가 표기된다.
해당 URL을 복사해서 들어갈 경우 코딩의 가장 기본인 "Hellow World"가 표기되는 것을 확인할 수 있다.
뭐 특별히 어려운것 없었다. 그냥 도메인이 어디있는지 잠깐 헤맸을뿐... 역시 처음은 쉽다.
그럼 가이드에서 언급하는 2번째 모듈로 넘어가보자.
우선 가이드 2번째의 설명은 웹 페이지의 상호 작용 추가를 위해서 java, python, javascript를 사용한다고 하는데..
필자는 그냥 javascript로 진행을 해보려고 한다.
우선 aws management console 창은 켜있는 상태로 AWS Lambda 사이트에 접속을 한다.
그럼 아래와 같은 화면 이미지가 나올 것이다.
이렇게 해당 화면에서 함수 생성 버튼을 눌러서 함수를 생성해보자.
이렇게 새로 작성을 누르고, HelloWorldFuction에 필자는 javascript로 진행할 예정이기 때문에 런타임은 Node.js 12.x를 선택하였다. Python인 경우에는 런타임을 Python 3.8을 선택하고, java인 경우에는 java 11을 선택하자.
그리고 함수 생성 버튼을 누르자.
뭐.. 편한건지는 모르겠지만 우선 진행해보자.
함수가 생성되었으면 이렇게 작성한 함수에 대한 내용이 나온다.
우선 작성되어있는 내용에 대해서 간단히 봐볼까 한다.
기본 샘플로 되어있는 함수는 이벤트가 발생했을때.. 그냥 자바스크립트의 값인 json을 문자열로 변환하는 내용인데..
그냥 Hello from Lambda!를 띄우는 함수이다.
뭐 가이드에 나와있는데로 이제 가이드의 소스를 보내보자.
|
// Define handler function, the entry point to our code for the Lambda service
// We receive the object that triggers the function as a parameter
exports.handler = async (event) => {
// Extract values from event and format as strings
let name = JSON.stringify(`Hello from Lambda, ${event.firstName} ${event.lastName}`);
// Create a JSON object with our response and store it in a constant
const response = {
statusCode: 200,
body: name
};
// Return the response constant
return response;
};
|
해당 내용을 index.js파일에 복사해서 넣어준 다음에 TEST 를 진행해보자.
테스트를 위한 이벤트 입력을 변경해보았다. 이후 저장 버튼을 클릭하고 함수를 저장하고 나온 화면에서 Deploy 버튼을 클릭한다. 이후 업데이트가 되면 Test 버튼을 클릭하면 아래와 같은 이미지로 Response 된 내용이 확인된다.
참고로 필자는 Deploy 버튼 내용이 가이드 문서에 없었기에... 저장만 하고 Test를 했다가 안되서 Deploy를 눌러서 업데이트 되는 것을 확인한 다음에 Test를 진행했다...
이처럼.. 나와같은 완전 생초짜가 확인했을 때에는 드문드문 빠진 내용이 많은게 가이드 문서인거 같다..
자 이제 함수를 만들었고.. html 도 만들었고.. AWS에서 말하는 AWS Amplify( html이라고 생각하면 편함 )과 AWS Lambda( javascript 파일 이라고 생각하면 편함 )을 서로 연결 시켜보도록 하자.
우선 AWS에서 서로 연결을 시키기 위해서는 Amazon API Gateway라는 것을 사용한다.
그냥.. 쉽게 얘기해서.. API Gate를 이용해서 서로 연결한다는 의미이다.. 참고로 필자는 C# 개발자이기 때문에..
visual studio 상에서 cs파일과 aspx파일을 연결시킨다고 보면 편할것 같다.
우선 API GateWay에 접속을 하자.
접속을 하면 해당 화면이 나오는데 REST API를 클릭하여 진행하자. 왜 이걸 선택하는지는 모르겠다.. 그냥 우선 가이드가 시키는대로 한번 따라가보자.. 구축버튼을 클릭하면
이렇게 샘플 화면이 나온다. 친절하게 예제 API까지 나오는데.. 뭐 나중에 숙달되면 거의 예제는 안쓸거같긴 하다.
우선 해당 화면서에 새 API를 클릭하고, API 필드에는 필자는 가이드 문서대로 HelloWorldAPI를 입력해뒀다.
이렇게 입력 화면을 작성한 다음에 API 생성 버튼을 클릭해주자.
엔드포인트 유형
- 지역 : 현재 지역에 배포.
- 최적화된 엣지 : CloudFront 네트워크에 배포된다.
- 프라이빗 : VPC에서만 액세스 할 수 있다.
좀더 들어가보면 VPC는 AWS 사용자 계정상의 전용 가상 네트워크라고 보면 될것 같다.
그리고 CloudFront는 쉽게 그냥 모든 사람들이 볼수있도록 되는 빠른? 웹서비스? 라고 생각해두자..
지금 내가 그렇게 밖에 이해가 되지 않기 때문에...
API가 생성이 되었으면 좌측에 리소스를 클릭하여 이후 메서드를 생성해주자.
개발자라면 뭐 Get / Post 에 대해서는 알고 있을 것이라고 생각하겠다. 우선적으로 위의 이미지대로 작성하고, 연결하고자 하는 Lambda 함수 명을 입력하고 저장한다.
우선 저장을 하면 이렇게 권한을 추가해야한다고 한다..
생성한 메서드가 이렇게 표기가 된다. 그럼 여기서 이제 작업버튼을 클릭하여 CORS 활성화를 선택한다.
대체한다를 클릭하고 기존값을 바꾼다고 클릭한다. 그럼 이후에 해당 내용으로 활성화 됬다고 표기가 된다.
그럼 이제 생성한 API를 배포해보자.
작업 버튼을 눌러 배포를 클릭한 다음에 API 배포에 입력해야 하는 사항을 선택해주자.
여기서 스테이지 이름은 위에서 작성한 환경이름과 달라도 상관은 없다.
배포 후 생성된 URL 호출의 URL을 복사해둔 다음에 좌측 리소스를 클릭하고, 우측 POST를 클릭한다.
포스트를 클릭하여 아까의 메서드 확인 내용에서 테스트 번개 버튼을 클릭한다.
그럼 이렇게 메서드 테스트 내용이 나올텐데.. 여기서 javascript 를 넣어주자.
ㅋㅋㅋㅋ 테스트를 돌렸더니... 500 Internal Server error가 표기가 되어버렸다...
자.. 그럼 어디서 틀렸는지 다시 확인해보자..
원인을 찾아버렸다... 생각해보니 윗단계부터 잘못되어버렸다... AWS는 지역을 구분한다..
이렇게 지역을 구분하는데... Lambda에는... 캘리포니아로 되어있었다..
자.. 이러면 필자가 문제가 생겨버리는데... 필자는 우선 Amplify를 서울로... 해버렸기 때문에.. 다 바꿔줘야겠다...
복습을 기회로 삼아.. 다시 한번 바꿔보고 다시 오겠다...
..... 알고보니 중대한 문제점이 있었다...
기본적으로 POST 할 때에 함수를 선택할 수 있게 아래에 표기가 되는데.. 필자는 선택도 안하고 타자로 하다보니 오타도 있었던것 같다...
다들... 혹시 모르니 테스트 할때에는 꼭 각 페이지별로 진행 지역에 대해서 한번 확인을 해보도록 하자.
잘 표기되는 것을 확인하였다... 뭐... 이렇게 하면서 공부해가는거지뭐... 이렇게 생각해봐야겠다.
자 그럼 이제 가이드에서 언급하는 데이터 테이블을 한번 만들어보도록 하자.
Amazon DynamoDB 콘솔로 접속하자.. 하.. 클라우드라 그런가 뭐가 이렇게 접속하라는게 많은지..
하긴.. 보통 뭐 visual studio -> oracle 뭐 이렇게 왔다 갔다 하는거처럼.. .똑같은거라 생각해야지...
접속을해서 보니.. 아마존클라우드 DB는 NoSQL을 사용한다.. 뭐.. 어차피 쿼리야 비슷하지만.. 관리 체계만 다를뿐..
참고로 필자는 Oracle을 상당히 좋아하는 사람중에 한명이다..
접속 화면이다. 여기서 이제
하단의 테이블 생성을 진행해보자.
테이블을 이렇게 작성하고 저장해보자. 테이블 이름은 HelloWorldDatabase고, 파티션 키는 ID로 입력을 진행했다.
데이터 베이스를 생성 중이고, 흠.. 테이블 생성이 완료 되었는데... ARN은 어디있는걸까...
자습서에는 분명 ARN을 복사해서 가지고 있으라고 하는데... 찾아봐야겠다...
헐... 진행을 하다보니... 충격적인 사실을 알게되었다..
이 테스트를 진행하는데.. DB도 얼마 안되는데... 금액이 0.63$씩 청구될거라는 소식을 접하게되었다..
매우 간단한 DB를 사용하는데에도 비용이 나온다는건... 그냥 사용을 안해야겠다.. 조금의 비용이라도.. 굳이 쓸 필요가 있을까 싶으네...
그래서 AWS 테스트는 그냥 이정도만 하고 프리 버전으로 PHP 서버나 구축을 진행해봐야겠다..
반응형
'IT > AWS' 카테고리의 다른 글
| AWS 시작해보기... (0) | 2022.06.03 |
|---|
댓글 영역