ddps-lab / architect-cloud

Kubernetes , AWS Serveless
6 stars 4 forks source link

4. CloudArchitectServerless 최신화 #45

Open chris0765 opened 3 months ago

chris0765 commented 3 months ago

서버리스 수업 내용 피피티를 최신화하는 이슈

chris0765 commented 3 months ago

챕터 4에는 슬라이드 1~3처럼 실습2.x와 같이 분류된 부분이 존재하지 않는데, 성규님과 진행한 내용을 제가 직접 채워넣으면 될까요?

kmu-leeky commented 3 months ago

무슨 이야기인지 모르겠네. 챕터 4 서버리스 슬라이드의 어느 부분에 실습 슬라이드를 추가할런지 모르겠다는 이야기인가? 그런거라면 우선 맨 뒷 페이지에 추가하는 방향으로 작업하면 되겠다.

chris0765 commented 3 months ago

넵, 맨 뒷 페이지에 추가하도록 하겠습니다

kmu-leeky commented 3 months ago

76페이지 부터 해서 2022년도에 실습한 내용을 추가해뒀어. 그런데, 실습 시나리오가 완전히 바뀌어서 얼마나 도움이 될런지는 미지수.

chris0765 commented 3 months ago

다음과 같이 실습 내용을 구성하고자 합니다. VPC와 RDS 자원은 2챕터 슬라이드에서 실습 후 제거되므로 다시 생성할 필요가 있습니다.

  1. VPC 생성 a. 2챕터 슬라이드의 고가용성 VPC 생성 참고
  2. RDS 생성 a. 2챕터 슬라이드의 RDS Aurora 생성 참고
  3. API Gateway 생성
  4. Lambda Function 생성 a. 제공받은 코드 파일들 업로드를 통해 함수 생성 (#44 참고) b. Trigger에 3에서 생성한 API Gateway 연결 c. config 파일의 DB Host url 부분을 2에서 생성한 RDS Host url로 수정
  5. S3 정적 웹 호스팅 a. S3 버킷 생성 b. 제공받은 웹페이지 파일의 API 호출 부분을 3에서 생성한 API Gateway의 url로 수정 후 업로드 c. 정적 웹 호스팅 기능 활성화 d. (버킷 2개 사용 시) customer 페이지, supplier 페이지가 서로 리다이렉팅 되는 부분 url 수정 후 파일 재업로드 e. URL 접속하여 웹페이지 기능 작동 확인
  6. CloudFront 웹컨텐츠 제공 가속화 a. CloudFront 배포 b. cloudfront url로 접속하여 작동 확인 c. (버킷 2개 사용 시) customer 페이지, supplier 페이지가 서로 리다이렉팅 되는 부분 url 수정 후 파일 재업로드 d. (버킷 2개 사용 시) 다시 웹페이지 접속하여 변경 사항 적용 확인 (TTL 확인)
  7. 실습 자원 제거

위 내용대로 슬라이드 실습 부분 사진과 함께 차례대로 작성하도록 하겠습니다.

kmu-leeky commented 3 months ago

1,2 는 3번 컨테이너 실습에서 CF 로 만드는걸 할테니 그걸 그대로 사용해도 될것 같아. 버킷의 경우 한개를 사용하는걸로 했던것 같고. 5.b 에서 api gateway url 로 수정하는 방법은 아직은 깔끔한 방법이 생각이 나지를 않네. 사용자에게서 form 으로 입력을 받아서 할 수 있지만, 그렇게 좋은 방법은 아닌것 같아서. 의견 모아보고 적절한 방법으로 진행하자.

chris0765 commented 3 months ago

미팅 직후 생각이 났는데, 파일 변경을 위한 Lambda 코드를 하나 작성하는 것은 어떨까 싶습니다. S3에 저장된 html 파일들 중 API URL 입력이 필요한 파일들을 임시로 다운로드 한 뒤, boto3로 API URL을 알아와 html 코드를 자동으로 replace한 후 업로드하게끔 해주면 좋을 듯 합니다.

로컬 python 파일로 제작하기에는 boto3 설치, credential 설정 등 부가적인 과정이 많이 필요할 듯 하여 Lambda용 코드를 작성해서 일련의 과정을 실행하고자 합니다.

kmu-leeky commented 3 months ago

가능은 할것 같은데.. 불필요하게 너무 복잡하겠다는 생각이 들기는 하네. 웹 서버 파일들 로컬에 다운 받았다가 다시 업로드 할테니 그 단계에서 sed 로 수정하게끔 하는게 지금으로서는 간단한 방법이라는 생각이 든다.

chris0765 commented 3 months ago

현재 VPC, RDS 설정하는 항목 제외하고는 작성을 완료했습니다.

VPC는 EC2 생성 시 네트워크 설정이 내용에 포함되어야 하여, 경환님께 CF로 생성되는 형태가 어떤지, 3번 실습 후 CF를 제거하여 VPC와 RDS가 삭제되는 지 등을 파악한 후 마저 완성하도록 하겠습니다.

추가로 sed로 파일을 수정하는 부분을 더 편하게 하기 위해서 쉘스크립트를 작성했습니다. 이부분 추후 PR로 작성하도록 하겠습니다.

#!/bin/bash

sudo apt update -y
sudo apt install npm -y
sudo apt install zip -y
sudo apt install awscli -y
git clone https://github.com/ddps-lab/architect-cloud.git
cd architect-cloud/2024/lambda_code/microservice/customer/
npm install
zip -r lambda.zip .
aws s3 cp lambda.zip s3://ddps-lambda-code/customer.zip
cd ../employee
npm install
zip -r lambda.zip .
aws s3 cp lambda.zip s3://ddps-lambda-code/supplier.zip
kmu-leeky commented 3 months ago

오케이, 재일아 수고했다. 슬라이드는 리뷰해보고 코멘트 줄께. sed 를 더 편하게 하기 위한 쉘 스크립트가 굳이 필요할까? 어짜피 한줄짜리 명령어면 충분하지 않아?

큰 쉘 스크립트에서 sed 로 html 을 수정한다면 (위의 코드 예제 들어준 곳에서) 그건 괜찮아 보인다. 위에서 압축할때 lambda.zip 이 파일 이름 중복 되니 customer-lambda.zip, supplier-lambda.zip 이런식으로. (naming 신경 쓰기) 이건 나중에 슬라이드에서 코멘트 줄께.

kmu-leeky commented 3 months ago

코멘트 하나 더. 위의 명령어에서 npm install 을 굳이 할 필요없이. 그냥 install 된 파일을 올려두면 어떨까 하는 생각이 든다. npm install 자체가 의미있는 명령은 아닌것 같다는 생각이 들어.

kmu-leeky commented 3 months ago

재일이 작업 내용에 대한 전반적인 코멘트. 세부적인 내용은 슬라이드에 있어.

위의 내용들 확인 언제까지 진행 할 수 있을지 예상 일정 알려줘.

chris0765 commented 3 months ago

VPC, RDS를 위한 CF 작성, 전체적인 구조도 작성 등 진행하면 이번주 내로 완료할 수 있을 듯 합니다. API Gateway 사용한 이유는 {proxy+} 기능 때문인데, Lambda Function에서도 적용 가능한지 확인해보겠습니다.

kmu-leeky commented 3 months ago

코멘트 하나 더. proxy 기능 같은 새로운 내용이 있으면 해당 내용에 대한 설명도 포함되어야 한다.

이번주 완료를 목표로 빠르게 진행해보자.

chris0765 commented 3 months ago

현재 VPC, RDS 제외하고는 피드백 반영하여 수정 완료했습니다.

Locust를 사용하여 API 성능 테스트 내용을 추가하는 것이 좋을까요?

추가로 한가지 수정이 필요해보이는 부분은, 네비게이터에 표시되는 웹페이지 이름이 길어지며 우측 메뉴가 일부 잘리는 현상이 나타납니다. image image

kmu-leeky commented 3 months ago

VPC, RDS 는 언제 진행할 예정? 빨리 마무리 짓자. 옆 부분이 잘린다면 굳이 길게 하지 말자. 짧게 가져가도 될듯하다. 대소문자 형식은 둘다 맞추고. 그런데 왜 이경우에는 하나는 어두운색 배경, 하나는 밝은 색 배경이야? 나머지 것들은 슬라이드에 리뷰를 남겨줄께.

kmu-leeky commented 3 months ago

재일아. 슬라이드 리뷰를 마쳤는데, 아직 작업이 미흡한 점이 있네. 목요일에 이야기한대로 이번주 안에 (오늘까지) 마무리 되도록 하자. 내용의 완성도를 높일 필요가 있겠다. 추가한 작업 내용에 대해서는 슬라이드에 내가 달아둔 코멘트에 답글식으로 달아주기를 바란다.

chris0765 commented 3 months ago

코멘트 중, 명령어 포맷이 다른 파일과 다른 점을 말씀해주셨는데,

image 다른 슬라이드처럼 $ (명령어) ~~~ 포맷을 사용하면, 전체 코드를 한번에 복사+붙여넣기 하기가 복잡해질 것이라는 생각이 듭니다.

그래도 포맷을 통일하는 것이 좋을까요? 아니면 아래와 같은 형식으로 표시하면 될까요? image

kmu-leeky commented 3 months ago

재일아. 아래에 나온 정도의 포맷은 유지해주는게 좋겠다.

chris0765 commented 3 months ago

시나리오 작성을 완료했습니다.

추가로 이전에 답변드리지 못했던 내용으로, 웹 페이지의 네비게이터에서 검정색, 흰색은 각각 Customer, Employee의 웹사이트임을 나타냅니다. image image

CloudFormation 파일은 어떻게 공유하면 될까요?

chris0765 commented 3 months ago

그리고 참고하라고 추가해주셨던 이전 실습 시나리오 (219p ~ )는 삭제하면 될까요?

chris0765 commented 3 months ago

리뷰 후 추가된 코멘트들의 내용을 반영하였습니다.

locust부분만 추가로 업데이트 하겠습니다.

chris0765 commented 3 months ago

Locust 수행을 완료했습니다.

그런데 결과가 그리 좋지는 않습니다. image

유저 수를 100명까지 1명씩 늘려가며 응답 latency를 측정해보았을 때, 100명 도달 직후 Average Response Time이 109.07 ms, 이후로도 꾸준히 증가하여 150~160 ms 정도를 기록합니다.

1슬라이드 모놀리틱 애플리케이션에서 100명 도달 후 100 ms정도가 나왔고,

2슬라이드 ALB에서 100명까지 20명씩 늘려가며 측정해보았을 때, 아래와 같이 나타났습니다. image

Locust 내용을 굳이 넣을 필요는 없을 것 같습니다. 어떻게 할까요?

kmu-leeky commented 3 months ago

locust 시나리오를 follow up 하지 않았네. asg 랑 같이해서 내일 이야기 해보자.

chris0765 commented 3 months ago

오늘 작성해주신 코멘트 반영 완료했습니다.