aws-angular-todolist-1

AWS STUDY

  1. PuTTY로 aws ec2로 만든 리눅스 환경 접속하기

  2. ec2에-npm-설치

  3. express설치하고 helloworld 출력하기 feat 포트 열기

  4. AWS, Angular를 이용한 todo-list 만들기(1)

  5. AWS, Angular를 이용한 todo-list 만들기(2)


AWS, Angular를 이용한 todo-list 만들기(1)

AWS

API Gateway, Lambda, DynamoDB를 이용한 Server less 구축

API Gateway 만들기

구성

AWS의 API Gateway와 AWS의 Lambda를 이용하여 Client의 요청을 받음

GET ~/todos => todo list 전체 전달

PATCH ~/todos => todo list 전체의 completed 일괄 변경

POST ~/todos => todo list의 새로운 todo 등록

PATCH ~/todos/{id} => 해당 id의 todo 변경

DELETE ~/todos/{id} => 해당 id의 todo 삭제

API 생성

image

todos API 생성

API 설정

image

작업 - 리소스 생성 클릭

리소스 이름을 id로 리소스 경로를 {id} 설정

{}를 이용하면 경로 파라미터가 됨

Lambda 만들기

image

myTodos 함수 생성

경로와 요청 확인을 위한 TEST 코드 작성

1
2
3
4
5
6
7
8
9
10
exports.handler = async (event, context) => {
// TODO implement
const response = {
httpMethod : event.context["http-method"],
resourcePath : event.context["resource-path"],
path : event.params.path,
body : event["body-json"]
};
return response;
};

API Gateway와 Lambda 연결

API Gateway에서 {id}선택 후 작업 - 메서드 생성 - any선택

{id}-ANY-설정에서 위에서 만든 Lambda함수 선택

image

통합요청 설정

통합요청 선택

하단의 매핑 템플릿 선택

매핑 템플릿 추가 클릭 후 application/json추가

하단 템플릿 생성에서 메서드 요청 패스스루 선택 후 저장

테스트

image

메서드에서 DELETE선택, 경로{id}2입력

image


메서드에서 PATCH선택, 경로{id}2입력, 요청 본문

1
2
3
4
{
"content":"AWS",
"completed":true
}

입력

image

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×