본문 바로가기
컴퓨터/소프트웨어

Serverless & Webpack & Typescript 구성하기

by 신규하 2018. 11. 7.

Serverless & Webpack & Typescript 구성하기

serverless에서 webpack을 이용해서 typescript를 구성해 보면서 작업 하던걸 기록 해 둡니다.

기본 환경 구성

기본적으로 node.js가 설치 되어 있어야 합니다.

serverless를 설치 합니다.

npm install -g serverless

그리고, 프로젝트를 생성해 줍니다.

$ serverless create -t aws-nodejs -p hello-lambda
Serverless: Generating boilerplate...
Serverless: Generating boilerplate in "/home/gyuha/workspace/hello-lambda"
 _______                             __
|   _   .-----.----.--.--.-----.----|  .-----.-----.-----.
|   |___|  -__|   _|  |  |  -__|   _|  |  -__|__ --|__ --|
|____   |_____|__|  \___/|_____|__| |__|_____|_____|_____|
|   |   |             The Serverless Application Framework
|       |                           serverless.com, v1.32.0
 -------'

Serverless: Successfully generated boilerplate for template: "aws-nodejs"
$ cd hello-lambda

npm init으로 package.jon을 설정해 주고 필요한 패키지를 설치 해 줍니다.

$ npm init
$ npm install --save-dev serverless-webpack serverless-offline ts-loader typescript webpack

Severless 설정하기

serverless.yml 파일을 아래와 같이 편집 해 줍니다.

service: aws-nodejs # NOTE: update this with your service name

provider:
  name: aws
  runtime: nodejs8.10
  stage: dev
  region: ap-northeast-2

plugins:
  - serverless-webpack
  - serverless-offline

functions:
  hello:
    handler: src/server.hello
    events:
     - http:
         path: hello
         method: get

여기서, 주 된 내용은 plugins의 추가와 functions에서 events의 추가 입니다.

Typescript과 Webpack 설정하기

tsconfig.json 파일을 만들고 아래와 같이 입력해 줍니다.

{
    "compilerOptions": {
      "module": "commonjs",
      "target": "es6",
      "sourceMap": true
    },
    "exclude": [
      "node_modules"
    ]
  }

webpack.copnfg.js 파일을 만들고 아래와 같이 입력해 줍니다.

const path = require("path");

module.exports = {
  entry: path.join(__dirname, "src/server.ts"),
  output: {
    libraryTarget: "commonjs",
    filename: "src/server.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  }
};

소스 작성 해 주기

src/server.ts 파일을 생성하고 아래과 같이 입력 해 줍니다.

interface SomeResponse {
  statusCode: number;
  body: string;
}

export async function hello (event: any, context: any) {
  const response: SomeResponse = {
    statusCode: 200,
    body: JSON.stringify({
      message: Math.floor(Math.random() * 10)
    })
  };

  return response
};

여기까지 완료 하면.. 기본 실행이 구성 됩니다.

오프라인 실행하기

sls offline

배포 하기

sls deploy

예제 코드는 serverless-typescript-webpack에서 볼 수 있습니다.


댓글4

  • noah 2020.01.02 16:17

    오타가 보이네요 ``webpack.copnfg.js => web pack.config.js
    답글

  • 한솔 2020.10.29 17:07

    안녕하세요 !! 타입스크립트 AWS 서버리스로 들어올리다 책 사서 보고 있는데요 8장에 프로젝트 생성하고 dynamodb 설치까지 했는데 8.3 다이나모디비 테이블 생성과 시드 만들기에서 책에는 serverless.yml파일로 되어 있는데 저는 설치하니까 serverless.ts로 설치되어서 양식이 다르니까 yml 형식으로 되어 있는걸 ts 형식으로 변환하면 오류가 나고 그러네요 ... 해결방법 있을까요 ??
    답글

    • 신규하 2020.10.30 22:45 신고

      가장 간단하게 해결하는 방법은 해당 버전의 serverless를 설치하는 방법 입니다.

      npm install -g serverless@1.41.1

      이렇게 serverless를 이전 버전으로 설치 해 주시면 진행이 가능 합니다.

      serverless.ts 파일을 사용해서 serverless-offline과 같은 플러그인 사용 문제가 있는 것으로 보입니다.
      탬플릿에서 serverless.yml을 지원하는 마지막 버전은 1.74.1입니다.

      serverless.ts 파일을 사용해서 정상적으로 플러그인이 사용이 가능하면 그 때 다시 글을 포스팅 해 보겠습니다.