주요 내용으로 건너뛰기

Express App on Serverless framework

serverless framework를 이용한 express hello world 앱 만들기


serverless framework

들어가며


클라우드 관련 기술에 익숙해지기 위해서 AWS Lambda를 활용해서 여러가지를 시도해봤는데요.


Wix 문자 서비스 추가 삽질기(https://gompro.postype.com/post/1569658)

Aws 람다 고급 튜토리얼 - 1(https://gompro.postype.com/post/1603351)

AWS 람다 고급 튜토리얼 - 2(https://gompro.postype.com/post/1642377)


처음에는 배우는 입장이라 잘 몰랐지만 람다를 세팅하는 일은 여간 까다로운게 아닙니다.

네트워크 설정도 일일히 해줘야하고 또 그 와중에 실수라도 했다하면 끊임없는 Timeout 메시지를 보면서 열심히 원인을 찾아야합니다.

원인을 쉽게 찾아내면 좋겠지만 저도 사람인지라 여러번 반복해서 익숙해졌다 싶다가도 실수를 하곤 하더라구요.

이럴 때 찾게 되곤 하는 것이 프레임워크겠죠. 

반복적으로 하는 일을 줄여주고, 내가 할 실수를 미리 찾아서 막아주는.

클라우드 관련 프레임워크는 꽤 많았습니다.

파이썬 웹 애플리케이션을 배포할 수 있는 Zappa(https://github.com/Miserlou/Zappa) 나 서버리스 아키텍쳐를 표방하는 apex(http://apex.run/) 같은 것도 있죠.

그 중에서도 제가 Serverless framework(이하: serverless)를 사용하게 된 건 계속해서 관련 튜토리얼을 업로드하시는 유튜버 분의 비디오를 보면서 매력을 느꼈기 때문입니다.

관심있으신 분들은 Foobar의 채널 (https://www.youtube.com/channel/UCSLIvjWJwLRQze9Pn4cectQ)로 가시면 기본적인 설정부터 AWS의 다른 서비스와의 연동도 살펴볼 수 있습니다.

Serverless는 람다를 한 번 쯤은 다뤄보았고 이제 매번 람다를 세팅하는 것이 지겨워졌다면 혹은 버거워졌다면 시도해볼만 하다는 겁니다.


준비

만약 AWS 가입 및 신용카드 번호 기입, Credentials 관련 설정을 이미 마치셨다면 스킵하셔도 좋습니다. 

1. Node.js v6.5 이상을 다운로드

2. Serverless CLI v1.9.0 이상을 다운로드 (npm install -g serverless)

3. AWS 계정

4. Provider Credentials 설정: serverless 팀에서 제공하는 세팅 비디오 -> (https://www.youtube.com/watch?v=HSd9uYj2LJA)

참고) Serverless에서 제공하는 quick start 가이드(https://serverless.com/framework/docs/providers/aws/guide/quick-start/)


시작

위의 준비과정을 모두 마치셨다면 본격적으로 Serverless 위에서 express 앱을 세팅하는 방법을 살펴봅시다.

기본적으로 Serverless는 AWS 람다 혹은 다른 클라우드 서비스 (gcp, azure 등) 관련한 세팅을 yml 파일을 통해서 편하게 할 수 있게 도와주는 프레임워크입니다.

그러므로 코드를 작성하는 방식은 일반적인 람다를 작성할 때와 별반 다르지 않습니다. 

아래는 AWS 공식문서의 람다 함수 예제입니다. (https://docs.aws.amazon.com/ko_kr/lambda/latest/dg/nodejs-prog-model-handler.html)

event, context, callback을 파라미터로 받아서 callback을 이용해 응답을 돌려주죠.

일반적으로 Node.js 개발자들이 익숙한 웹서버 인터페이스와는 차이가 있습니다.

하지만 인간은 적응의 동물이죠. 

Serverless를 이용하던 개발자들이 serverless를 좀 더 익숙한 방식으로 사용하기 위해 여러가지 플러그인들을 도입했는데요, serverless-http는 그 중에서도 람다의 event나 context, callback을 wrap해서 Node.js 개발자들이 익숙한 웹서버 인터페이스로 코드를 작성할 수 있게 도와줍니다.

이 외에도 serverless 에서 webpack을 사용할 수 있는 serverless-webpack이나 로컬 컴퓨터에서 serverless 앱을 테스트해볼 수 있는 serverless-offline 등의 편리한 플러그인도 함께 사용해보도록 하겠습니다.

Serverless-http (https://github.com/dougmoscrop/serverless-http)

Serverless-webpack (https://github.com/serverless-heaven/serverless-webpack)

Serverless-offline (https://github.com/dherault/serverless-offline)


설명도 마쳤으니 진짜 시작해봅시다!

일단 폴더를 생성해주시구요.

Package.json 설정을 해줍니다.

이제 serverless.yml 파일을 프로젝트 루트 디렉토리에 만들고 아래와 같이 작성해줍니다.

다음으로 src 폴더를 만들고 우리의 앱 코드를 작성해줍시다.

아직 갈 길이 멉니다.

es6 문법을 사용하기 위해 바벨과 웹펙 설정을 해줘야하거든요.

프로젝트의 루트 디렉토리에 아래의 두 파일을 작성해줍니다.

아래 파일은 .babelrc 파일 (바벨 설정 파일)입니다. 마찬가지로 프로젝트 루트 디렉토리에 작성해주세요.  

필요한 준비를 마쳤으니 이제 디펜던시를 설치해봅시다.

이제 간단한 명령어 한 번으로 우리의 서비스를 배포할 수 있습니다.

deploy 이후에 서비스가 배포된 엔드포인트를 알려주는데, 이 url로 접속하면!

hello world

hello world! 가 보이네요.

(저는 크롬 확장 프로그램 중 하나인 JsonFormatter를 사용하고 있습니다. json 데이터를 깔끔하게 볼 수 있어서 좋은 것 같아요. 링크(https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa))


만약 배포된 url을 까먹었다면요?

AWS에 접속하여 Api Gateway 콘솔로 들어가면 좌측 API 탭에서 우리가 배포한 서비스 명으로 찾을 수 있습니다. (serverless-express) 그리고 아래 스테이지 메뉴에 들어가면 dev 스테이지를 찾을 수 있습니다.

dev 스테이지에서 URL 호출 부분에 보면 엔드포인트의 url이 적혀있습니다. 이 곳으로 접속하더라도 같은 결과를 볼 수 있습니다.


번외

1. eslint 설정입니다. eslint 설정은 serverless 앱 설정과는 직접적인 관련은 없지만 많은 도움이 되므로 추가해놓도록 하겠습니다.

먼저 eslint를 설치하고,

eslint cli를 사용해 구성해줍니다.

이제 프로젝트 디렉토리에서 .eslintrc.js 파일을 찾을 수 있습니다.

좋군요!


2. serverless 앱을 로컬 컴퓨터에서 테스팅

코드 한 줄로 로컬호스트에서 서버를 확인할 수 있습니다.


3. gitignore 설정

좋은 개발자라면 이런 사소한 부분을 잘 신경 써줘야겠죠?

serverless 의 설정 파일과 zip 파일이 들어있는 .serverless 폴더와 webpack의 빌드 파일이 들어있는 .webpack 폴더를 제외해줍니다.


Trouble Shooting

1. 엔드포인트에 접속했더니 internal server error 라고만 뜨네요 ㅜㅜ

sls offline start 명령어를 통해 로컬 서버에서 어떤 이상이 발생하는지 확인해보시고 만약 로컬 서버 빌드 과정에서 아무런 이상이 없었다면,

  1. 필요한 디펜던시를 모두 설치하지 않았다. (serverless는 람다 함수 및 필요한 디펜던시를 zip 형태로 압축해서 업로드하기 때문에 필요한 디펜던시가 빠지면 이런 에러가 발생합니다.)
  2. 디펜던시 항목에 들어가야하는 항목을 dev dependency로 설치했다.

의 두 가지 사항을 확인해주세요.


2. unexpected token import 에러

바벨 설정 관련 문제입니다. 

.babelrc나 webpack의 로더 부분을 체크해주세요. 설정이 잘못되었을 확률이 높습니다.

혹은 

저 같은 경우 serverless.yml의 plugins 부분을 plugin으로 잘못 적었더니 웹팩 로더가 작동하지 않아 이런 에러가 뜨더군요 ... ㅜㅜ



이번 시간에는 serverless를 활용한 express 앱 설정하기를 다뤄보았습니다.

설정 과정에서 에러가 발생하거나 도움이 필요한 부분이 있다면 댓글 남겨주세요.

감사합니다.

이준형 님의 창작활동을 응원하고 싶으세요?

댓글

SNS 계정으로 간편하게 로그인하고 댓글을 남겨주세요.