Day 13 : ??? : 나 serverless deploy 쳐본 사람이야

2023. 6. 15. 17:12International Sign Lang 프로젝트/백엔드

728x90
 

Day 12-1 CSRF 와 CORS 는 매우 연관이 깊다?!

Day 11 : 싸우자 해커야! CSRF, HttpOnly, CSP 대응하기 Day 10 : MySQL2 오류, "Client does not support authentication protocol requested by server" 해결 방법 Day 9 : 에러나면 손모가지 날라가붕께 더보기 Day 8 : 가상 DOM 생성

xpmxf4.tistory.com

 

 

Day 12-2 : 솔직히 본인 테이블에 더미 데이터 1,000 개 넣어본 사람? 없으면 보자, 프로시저로 더미

[Day 12-1] CSRF 와 CORS 는 매우 연관이 깊다?! Day 11 : 싸우자 해커야! CSRF, HttpOnly, CSP 대응하기 Day 10 : MySQL2 오류, "Client does not support authentication protocol requested by server" 해결 방법 Day 9 : 에러나면 손모가

xpmxf4.tistory.com

위 글을 보고 오시는 것을 추천드립니다!


1. 오늘의 주제

오늘은 드디어 클라우드에 첫 발을 내딛는 날입니다!

제목에서도 보셨겠지만 이제 오늘 Node 코드들을 Serverless로 배포를 해야 합니다!

2. 주제에 대한 간략한 설명

 

Day1 : "일단 시작" 이 아니라 "설계부터"

예전 개발을 막 시작했을 시절에는 일단 코드부터 작성하고 봤는 데 이제는 코드부터 들입다 작성하는 게 오히려 미래에 프로젝트 진행을 더 더디게 만든다는 걸 알아 기능 리스트업부터 해요.

xpmxf4.tistory.com

AWS Lambda에 node.js 코드를 올리기로 결정했습니다.
이렇게 결정하게 된 이유는 다음 2가지입니다.
1. 하루 쿼리량이 10,000개 이하라면 AWS Lambda 가 EC2 보다 더 싸다.
2.Lambda 에 최적화된 언어는 Python, JavaScript이고 둘 중 JavaScript 가 그나마 더 자신 있어서

Lambda를 사용한 자세한 이유는 보고 싶으시다면 위 글을 보시는 것을 추천드려요!!

 

먼저 Node + Express를 Serverless로 배포하기 위한 과정을 총 7 가지로 나눠봤습니다.

  1. 프로젝트에 serverless-http 설치하기
  2. app.js 수정
  3. global로 서버리스 프레임워크 설치
  4. serverless 계정 설정하기
  5. serverless.yml 생성 및 작성
  6. serverless 배포
  7. Lambda에서의 CORS 처리

밑에서 과정 하나하나 자세하게 뜯어보겠습니다!

3. 코드로 실제로 구현해 보기

1. serverless-http 설치하기

그간 로컬 환경에서 Express 르 실행했지만 Lambda 에 올리기 위해서는

AWS Lambda 에서 실행할 수 있는 형태로 바꿔야 합니다. 

일일이 바꾸는 건 이전 글들의 설명처럼 정말 고된 일입니다.

 

그래서 우리는 serverless-http라는 라이브러리를 이용하여

쉽게 Express 앱을 Wrapping 하게 되는 거죠!

그렇다면 먼저 serverless-http를 설치해 보겠습니다!

npm install --save express serverless-http

 

 

2. app.js 수정

다음은 app.js를 수정해야 해요!

즉, 위에서 말한 Express 앱을 Lambda에서 실행하기 위해

실제로 Wrapping 해줘야 합니다!

 

제 코드보다도, 훨씬 간단한 express 코드를 예시로 보여드릴게요!

const express = require('express');
const app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000, function () {
  console.log('App is listening on port 3000!');
});

먼저 기본적인 express의 코드예요!

위 코드에서 npm start를 한다면 바로 포트 3000번에서 실행이 되겠죠!

 

const serverless = require('serverless-http');
const express = require('express');
const app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

module.exports.handler = serverless(app); // 여기가 바뀜

위처럼 바꾸게 되면 바로 Lambda에 올릴 수 있는 형태가 된 거예요!

 

간단히 위 코드에 대한 설명을 하자면 

serverless(app)을 통해 app이라는 Express 앱을 Lambda 함수로 변환합니다.

이렇게 하면 Lambda에서 이 함수를 호출할 때 Express 앱이 Http 요청을 처리하도록 하죠.

 

그리고 module.exports.handler = serverless(app) 이 부분은

Lambda 에서 호출할 함수를 handler라는 이름으로 export 하는 거예요!

 

 

이렇게 변환을 하게 되면 애플리케이션이 요청을 받을 때마다 새로운 환경에서 실행되고

응답 후에는 환경이 종료되는 서버리스(Serverless) 환경에서 애플리케이션을 실행할 수 있게 됩니다!

3. global serverless framework 설치하기

 

Serverless: Develop & Monitor Apps On AWS Lambda

Easily develop and monitor auto-scaling applications on AWS Lambda, API Gateway, DynamoDB, etc., with the Serverless Framework and Serverless Monitoring Dashboard.

www.serverless.com

서버리스 프레임워크는 AWS Lambda와 같은 서버리스 플랫폼에

배포를 돕는 도구입니다!

아래 명령어를 통해 설치하도록 하겠습니다!

npm install -g serverless

위처럼 하게 되면 프로젝트가 아닌 사용자의 컴퓨터에 서버리스 프레임워크를 설치하게 됩니다!

4. serverless 계정 설정하기

서버리스 프레임워크로 배포를 한다고는 했는 데... 어디에다가 배포를 해??

라는 고민이 들었다면 매우 매우 정상입니다! 사실 팩트거든요!

우리는 우리의 AWS 계정에다가 배포를 해야겠죠?

그래서 이번에는 serverless 프레임워크 안에다가 계정 정보를 넣어야 합니다!

serverless config credentials --provider aws --key YOUR_ACCESS_KEY --secret YOUR_SECRET_KEY

YOUR_ACCESS_KEY와 YOUR_SECRET_KEY는 어디서 나냐고요?

 

 

https://console.aws.amazon.com/console/home

 

console.aws.amazon.com

먼저 위 링크로 접속하셔서 본인 AWS의 콘솔창에 가신다음

 

우측 상단 본인의 닉네임을 클릭하신 다음 보안 자격 증명탭을 누르시고,

 

다음 화면에서 스크롤을 내리다 보면 다음과 같은 화면을 확인하실 수 있습니다!

엑세스 키 만들기!!

액세스 키 탭에 있는 엑세스 키들이 우리가 serverless config 에 넣어줘야 하는 파라미터들입니다!

엑세스 키 만들기 버튼을 누른다면 다음과 같은 화면이 나오고,

체크하여 엑세스 키 만들기 버튼을 눌러주시면!

이렇게 생성이 됩니다!! 

위의 액세스 키가 YOUR_ACCESS_KEY 이고, 비밀 엑세스 키가 YOUR_SECRET_KEY입니다!

이때 주의하실 점은 저 비밀 액세스 키는 이번 한 번밖에 볼 수 없습니다!!

꼭 다른 곳에 적어두시거나, 밑의. csv 파일 다운로드 버튼을 눌러 본인 컴퓨터에 저장하세요!

5. serverless.yml 생성 및 작성

이제 serverless 프레임워크의 본인 계정의 정보를 넣었다면

이제는 serverless.yml을 프로젝트 폴더 최상단에 만들어줘야 합니다!

 

service: ISL 

provider:
  name: aws
  runtime: nodejs14.x
  stage: dev
  region: ap-northeast-2
  environment:
    NODE_ENV: production
    DB_HOST: ~~
    DB_PORT: ~~
    DB_USER: ~~
    DB_PASSWORD: ~~
    DB_NAME: ~~

functions:
  app:
    handler: app.handler
    events:
      - http: ANY /
      - http: 'ANY /{proxy+}'

저의 serverless.yml입니다! 

각 항목에 대해 설명을 짧게 드릴게요!

 

  1. service: 프로젝트의 이름입니다. 이 프로젝트는 'ISL'이라는 이름을 가지고 있습니다!
  2. provider: 서비스가 어떤 클라우드 서비스 제공자에서 실행되는지, 어떤 환경 변수를 가지는지, 어떤 런타임을 사용하는지 등에 대한 세부 사항을 제공합니다.
    1. name : 이 서비스의 제공자입니다. 여기서는 'aws'로 설정되어 있어 AWS에서 실행된다는 것을 알 수 있습니다!
    2. runtime : AWS Lambda에서 실행되는 코드의 언어를 나타냅니다. 여기서 저는 'nodejs14.x'라고 함으로써 Node.js 14.x의 런타임을 사용한다는 것을 알 수 있죠!
    3. stage : 이 서비스의 단계를 나타냅니다. 여기선 'dev'로 표기함으로써 아직 개발 단계임을 나타냅니다!
    4. region : 서비스가 배포될 AWS의 지역을 나타냅니다. 'ap-northeast-2'로 설정되어 있어 아시아 태평양 서울 지역에 배포될 것임을 알 수 있습니다!
    5. environment : 서비스가 필요한 환경변수들입니다! 저는 환경변수들을 이용해서 로컬/람다 환경에서 사용할 DB를 환경변수로 구분했습니다!
  3. functions: 서버리스 애플리케이션에서 사용하는 모든 개별 함수를 나열해야 합니다! 
    1. app : 람다함수의 이름입니다! 쉽게 말하자면 Wrapping 된 Express == 하나의 람다함수이고, 이때 이 람다함수의 이름을 app이라고 하는 겁니다!
    2. handler : 함수가 호출될 때 실행할 코드의 경로를 나타냅니다. '파일명.함수명' 의 형태로 작성하게 됩니다. 위의 경우에는 app.js 파일의 handler 함수를 실행하는 의미입니다!
    3. events : 함수를 호출하기 위해 필요한 트리거나 이벤트를 정의하는 섹션입니다! 즉, 람다함수를 호출하기 위한 이벤트 정의입니다! 위 경우에는 '/'에 대해 모든 HTTP 메서드(ANY)와 '/users', '/users/123' 등등 의 요청이 람다함수를 트리거하게 됩니다!

6. serverless 배포

참 많다 그죠?

이제 거의 다 끝났습니다!!

 

serverless.yml 까지 작성했다면 이제 이 글의 제목에 나온

마법의 명령어를 한번 쳐주면 아름답게 배포가 가능합니다!

serverless deploy

위 명령어를 입력하게 되면...



Express 가 정상적으로 람다에 배포된 것을 알 수 있습니다!

 

마무리

오늘은 나 람다 배포해 봤어라는 말을 당당하게 할 수 있는 글이었습니다!

밀린 글을 쓰는 중인데, 이거 말고도 람다의 특성 때문에 여러 세팅을 손대야 합니다! ㅎㅎ...

앞으로는 람다 관련 세팅 및 트러블슈팅 과정으로 찾아뵙겠습니다!

 

언제나 피드백은 환영입니다!

 

GitHub - xpmxf4/ISL_FrontEnd

Contribute to xpmxf4/ISL_FrontEnd development by creating an account on GitHub.

github.com

 

 

GitHub - xpmxf4/ISL_BackEnd

Contribute to xpmxf4/ISL_BackEnd development by creating an account on GitHub.

github.com

만약 보신다면 스타도...! ㅎㅎ

728x90