[Project] MyFortune 05

🔎 서버리스 방식

서버리스(serverless)란 개발자가 서버를 관리할 필요 없이 애플리케이션을 빌드하고 실행할 수 있도록 하는 클라우드 네이티브 개발 모델을 말한다.

💡 서버리스 방식의 장점은 사용자 트래픽이 급증할 경우 서버 대수를 늘리거나
성능을 높이는 서버 확장 작업(스케일링)을 알아서 처리해준다는 점이다.

서버리스 플랫폼에 맡기고 코드 구현과 배포에 집중할 수 있으므로
Cloudflare Pages를 통해 프런트엔드를 배포하고
AWS Lambda를 통해 서버리스 방식으로 백엔드를 배포를 진행한다.

🗯️ 프런트엔드 배포

Cloudflare Pages

미국의 클라우드 보안 플랫폼 기업인 Cloudflare에서 만든 웹사이트 배포 플랫폼

가장 큰 장점은 무제한 대역폭(bandwidth) 을 제공하기 때문에
많은 사용자가 접속해도 요금이 전혀 발생하지 않는다는 점이다.

1. Cloudflare Pages 접속
   https://pages.cloudflare.com/

2. 회원가입 및 로그인 진행

3. workers & pages - > pages 클릭 - > upload assets 클릭

4. 프로젝트명 입력
   

5. 프로젝트 에셋 업로드 - > deploy site 클릭

프런트엔드 코드 배포 완료
https://myfortune.pages.dev/

전부 끝나고 ui 수정하고 다시 재배포하고 링크 첨부해두자요 !!

🗯️ 백엔드 배포

AWS Lambda

AWS의 서버리스 컴퓨팅 서비스
별도로 서버 자원을 관리할 필요 없이 코드를 실행할 수 있는 서비스이다.
사용자의 요청이 있을 때만 실행되며 코드를 사용한 시간만큼 비용이 발생,
트래픽이 급증했을 때 동적으로 서버 자원을 할당해 준다.

1. AWS Lambda 접속 - > 회원가입 및 로그인

++ aws 2단계 인증 설정

보안 자격 증명 - > MFA 디바이스 할당 - >

google authenticator 설치 - > QR코드 스캔 - > 코드 6자리 2번 입력

MFA 생성 완료 - > 다시 로그인 시도해보면 2단계 인증을 해야만 로그인 되게 설정됨 !!

2. 로그인 후 콘솔 홈 화면 - > 오른쪽 상단 지역 버튼 - > 아시아 태평양(서울)로 설정

3. 모든 서비스 보기 - > 컴퓨팅 - > Lambda 클릭 -> AWS Lambda 페이지로 이동

서버리스 http 적용하기

Express 프레임워크로 api 서버를 구축했고
이 api를 서버리스 방식인 AWS Lambda에서 활용하려면
미들웨어가 필요하다.

serverless-http 모듈 활용
모듈 내에서 제공하는 wrapper 함수를 통해 백엔드 api를
서버리스 방식으로 사용할 수 있게 된다.

1. NPM 공식 사이트 접속 - > serverless-http 검색
   https://www.npmjs.com/package/serverless-http

2. vscode에서 backend 폴더 열기 - > 터미널에서 serverless-http 패키지 설치

3. index.js 코드 상단에서 require() 함수를 호출하여
   serverless-http 패키지 불러오기
   

4. 서버를 실행했던 app.listen() 함수 주석 처리 -> express() 함수로 생성했던 app을 serverless() 함수로 감싸 AWS Lambda에서 실행 가능한 형태로 만듦
   

5. CORS 에러 핸들링 부분 수정

백엔드 API가 모든 요청에 응답하여 서버 요금이 과도하게 부과될 경우를
방지하기 위해 특정 도메인(위에 배포한 프런트엔드 URL)의 요청만 허용하는 옵션을 설정해야 한다.

origin = 요청을 보내는 페이지의 출처

6. AWS Lambda에 백엔드 코드 업로드 준비

업로드 시 node.js 버전을 작성해야 함
vscode 터미널에서 현재 node.js 버전을 확인

Lambda 함수 생성

Lambda 함수 : AWS Lambda 서비스에 사용하는 리소스 = 구현한 함수 코드

배포 패키지를 통해 함수 업로드 - > Lambda 서비스에서 사용자 이벤트가 발생할 때마다 함수 호출하는 구조 !!

• AWS Lambda 페이지 - > 함수 - > 함수 생성 클릭
  

• 함수 이름 작성 - > node.js 버전 설정
  

• 고급 설정 - > 함수 url 활성화 체크 - > 인증 유형 none 설정 - > 함수 생성 버튼 클릭
  

• 함수 생성 후 - > 일반 구성 편집 클릭
  

• 메모리 256MB, 제한 시간 15분 0초 설정
  

• 백엔드 코드 zip 파일로 압축
  

• AWS Lambda 함수 - > 코드 소스 - > 에서 업로드 버튼 클릭 - > 압축 파일 업로드
  

---

엔드포인트 URL 적용

프런트엔드 코드에서 엔드포인트 URL 수정

localhost - > AWS Lambda 함수 URL로 변경

프런트엔드 코드 수정 후 변경 사항을 서버에 다시 배포해야 함 !!

Cloudflare Pages - > create new deployment 클릭 - > 프런트엔드 파일 재업로드

테스트

배포 사이트 들어가서 동작 확인해보기 !!

로그 확인 - > 오류

이 오류는 CORS (Cross-Origin Resource Sharing) 정책에 위반되어 발생
CORS : 보안 상의 이유로 브라우저에서 다른 도메인으로부터의 요청을 차단하는 정책

Access-Control-Allow-Origin 헤더에 잘못된 값이 포함되어 있다는 에러

시도 01
origin 에 설정했던 url이 {}로 감싸져 있어서 제거하고 다시 배포한 후 테스트해보면
여전히 cors 에러가 났다.

추가로 bad gateway 에러도 떴다.

시도 02 api키랑도 관련 있나 싶어서 api키를 암호화 하여 파라미터에 저장하고 index.js 수정한 후 재배포 하고 테스트

(api키 보안 설정)

sdk는 또 버전이 바뀐걸 권장해서 용량만 엄청 차지하고 배포 폴더 압축했을 때
확 용량이 커진 게 보였다.

..........

시도03
책에서는 api키를 따로 aws에서 설정하거나 하는 부분이 없었는데
음 .. 어떻게 해결해야 하지 고민하다가
sdk 설치한 거 삭제하고 index.js 백업해둔걸로 다시 돌리고
api키에 넣을 값을 하드코딩?...이지만 내 발급받은 키를 바로 넣고 압축한 뒤 aws에 올리고 다시
테스트 시도 - > cors 에러

cors 오류 해결

무한 반복 cors 에러를 못잡다가 해결된 방법

Access-Control-Allow-Origin 헤더 직접 설정

결과

얏호 !!! 해결됐다.

근데 이미 cors 미들웨어를 설정한 상태였는데
안 됐다가 header를 직접 설정하니까 오류가 사라진 이유가 궁금해서
gpt 샘께 물어보니 돌아온 답변

CORS 에러가 사라진 이유는 브라우저에서 발생한 Pre-flight 요청 때문입니다. 브라우저는 실제 요청을 보내기 전에 Pre-flight 요청을 보내고, 서버는 이 Pre-flight 요청에 대한 응답으로 CORS 헤더를 반환합니다.
첫 번째 코드 블록에서는 app.use(cors(corsOptions));로 CORS 미들웨어를 설정하였습니다. 이 미들웨어는 실제 요청에 대한 응답에서 Access-Control-Allow-Origin 헤더를 설정해 줍니다. 그러나 Pre-flight 요청은 이 미들웨어를 통과하지 않아서 실제로 서버가 응답을 하지 않습니다.
두 번째 코드 블록에서는 직접 헤더를 설정하여 CORS 헤더를 반환했습니다. 이것은 Pre-flight 요청에 대한 응답을 직접 설정한 것으로, 브라우저는 이 응답을 확인하고 나서 실제 요청을 보내기로 결정합니다. 따라서 직접 헤더를 설정한 경우에는 Pre-flight 요청에 대한 응답이 올바르게 돌아와서 CORS 에러가 사라진 것입니다.
일반적으로는 미들웨어를 사용하여 CORS를 설정하는 것이 편리하지만, 특정 상황에서는 직접 헤더를 설정해야 하는 경우가 있습니다. Pre-flight 요청에 대한 응답이 정확하게 구성되어 있으면 CORS 에러가 발생하지 않습니다.

찾아보니 cors 에러는 개발 공부를 할 때 많이 마주치는 에러 중 하나라고 한다.
계속 부딪혀보면서 어떤 식으로 해결해야 하는지 찾아 가자 !!

cors 관련 참고
https://velog.io/@jh100m1/CORS-에러가-뭔데-어떻게-해결하는건데

이제 배포는 끝이 났고 마지막 챕터는 배포한 서비스에 광고와 후원링크를 걸어
서비스를 수익화하는 방법에 대한 내용이다.

🗯️ 수익화

광고 삽입

카카오에서 운영하는 광고 플랫폼 카카오 애드핏 활용

1. 카카오 애드핏 접속 - > 회원가입 및 로그인
   https://adfit.kakao.com/info
   
2. 애드핏 매체 등록하기 버튼 -- > 매체 정보 입력 - > 매체 등록

3. 매체 등록 완료 후 광고단위 생성 버튼 클릭

광고 배너 크기 설정 : ui랑 잘 맞는 크기 선택하기

그 외 광고 단위 정보 입력 - > 저장

생성된 배너 스크립트 코드 복사

index.html에 div 태그로 배너 영역 생성 - > 배너 스크립트 붙여 넣기

카카오 애드핏 정책상 모바일 최적화가 되어 있지 않으면
광고 매체가 승인되지 않으므로 호환성 보기와 관련된 meta 태그 코드 추가

live server 실행해서 확인

Cloudflare에 배포한 실제 서버에서만 광고가 노출됨
매체 승인이 되어야 노출된 광고에 대한 수익금을 받을 수 있는 구조

심사 대기 중

---

ui 수정

• intro 화면
  
• chat ui
  

고치고 싶은 거 채팅 주고받으면 컨테이너 길이가 유동적으로 변하면 좋겠는데
지금은 내용이 추가될수록 길이는 변하지만 입력폼이랑 버튼 뒤로 글들이 가려지고 있다..!

css 파르르 ...
수정할 부분을 바꾸면 다른 게 적용이 안 되거나
예상과 다르게 나타난다.
따로 수정하자 !!!

+++ 수정 후 ui
아직 부족하지만 처음보다 좀 더 보기에 편해진 것 같아서 좋다 🌞

🗯️ API 재시도 로직

api 요청 실패시 재시도 할 수 있게 설정 가능 ( myfortune 에서는 우선 적용 x )

다른 부분 수정 다 끝나고 적용 시도할 예정

https://www.npmjs.com/package/openai

++ 추가로 script.js를 수정하여 재시도가 여러번 됐을 때 에러 관련 추가해서 api 재시도에 대한 알림을 사용자에게 알려줄 수 있다.
(ex. 서버 불안정 / 잠시 후 다시 시도 메세지 출력 )

🗯️ 도메인 등록

이 프로젝트는 처음 생성했던 도메인 그대로 쓸 거라 도메인 구매는 하지 않고
cloudflare에 도메인을 등록하는 방법을 적어두고 다른 프로젝트 때 적용하자 !!

++ 도메인 추가 등록 https://myfortune.store 👻

1. 도메인 판매 사이트 혹은 cloudflare에서 도메인 구매

2. cloudflare - > domain registration - > transfer domains - > get started 클릭

3. 등록할 도메인 입력 -> continue
   

4. 요금제 free 선택 - > continue

5. 네임 서버 설정 필요
   도메인을 구입한 곳에서 cloudflare의 네임 서버에 맞게 변경 필요
   add cloudflare's nameservers 에서 할당된 네임 서버 확인

6. 도메인 구매 사이트에서 도메인 정보 설정 (각각의 사이트마다 상이함)

7. 정보 변경을 완료했다는 전제 하에 cloudflare에서 보안 및 성능 최적화 설정 - > 도메인 등록 완료

8. 등록한 도메인과 프런트엔드 페이지 연결
   배포한 프론트엔드 페이지로 접속 - > custom domains - > set up a custom domain - > 등록한 도메인 입력 - > continue
   (cloudflare에서 입력한 도메인에 대한 cname 레코드가 자동 추가됨) - >
   activate domain 클릭 - > 설정 끝 !

9. 설정 완료 후 cloudflare의 검토 단계 대기
   검토가 완료됐다면 상태가 active 로 변경됨

10. 도메인 입력해서 접속되는지 테스트
    (도메인 등록 후 백엔드 코드에서 cors 에러 헨들링 코드에 해당 도메인 추가하기
    gpt4 모델부터는 url 추가하지 않을 시 에러 발생 한다고 함 !! )

이번 프로젝트는 도메인이 길게 나오지도 않고 깔끔하다고 생각해서
일단 도메인을 커스텀하진 않았다.

다른 프로젝트에서 도메인을 등록할 때 좀 더 과정을 자세히 정리해두자요 !!

---

느낀점

책이랑 gpt랑 구글 스사삭 찾으면서 스스로 해낸 프로젝트라
완전하진 않지만 배포를 하고 나니 뿌듯한 마음도 들었다.
api를 활용하는 것도 그렇고 이번에 처음 node.js도 사용하게 되었는데
새로운 것을 배우는 건 언제나 어렵기도 하지만 재밌다.
이제 기본적인 틀은 마쳤으니 ui 수정 하고 readme 파일 작성합시다 !!
다음엔 또 다른 주제로 만들어보고싶단 생각이 들었다.
openai api 활용하는 거 재밌었다 !!!
뭔가 대화학습할 때 거의 주입식 교육 ? 느낌이 들어서 웃기기도 하고
신기하기도 했다.

세상은 계속 빠르게 뭔가 휙휙 많은 게 바뀌고 있는데
나만 너무 느린가 싶을 때가 많지만
내 속도로 꾸준히 계속 문을 두드리고 준비하자 !!! 🛬