Loading..

Serverless 배포 시 Webpack과 Babel 사용하기

2019.07.24 16:57

Serverless 배포 시 Webpack과 Babel 사용하기

최근 프로젝트에 Serverless Framework를 사용하고 있습니다. GraphQL 백엔드를 AWS Lambda로 배포하기 위해 사용하는 데, 저는 Node.js 프로젝트를 진행할 때 Webpack, Babel을 통해 ES2016을 사용해서 작업하는 편입니다. 근데 보통 Serverless를 통해 배포하는 예제들의 경우 Webpack, Babel을 이용하는 방법이 나와있지 않아서 serverless-webpack 이라는 플러그인을 통해 Serverless에서 Webpack을 사용하는 방법을 정리해보려고 합니다.

Requirements

  • 패키지 매니저로 Yarn을 사용하고 있습니다.
  • 기본적인 Serverless 환경이 구성되어 있음을 전제로합니다.

설정

우선 플러그인 사용을 위해 serverless-webpack을 devDependencies로 설치하겠습니다.

yarn add -D serverless-webpack

그 다음 serverless.yml에 플러그인을 추가해주세요.

plugins:
  - serverless-webpack

그 다음 Webpack을 설치하고 설정하겠습니다. 저는 Webpack을 통해서 ES6을 사용할거기 때문에, 해당 설정에 맞게 패키지를 설치하겠습니다. 먼저 babel을 설치하겠습니다.

yarn add -D @babel/core @babel/cli @babel/preset-env

그 다음 프로젝트 디렉토리에 .babelrc를 생성해서 babel 설정을 하겠습니다.

{
  "presets": ["@babel/preset-env"]
}

그 다음 webpack을 설치하겠습니다.

yarn add -D webpack webpack-node-externals

webpack에서 babel을 사용할 수 있게 babel-loader도 설치하겠습니다.

yarn add -D babel-loader

그 다음 webpack.config.js를 작성하겠습니다.

const slsw = require("serverless-webpack");
const nodeExternals = require("webpack-node-externals");

module.exports = {
  entry: slsw.lib.entries,
  target: "node",
  externals: [nodeExternals()],
  mode: slsw.lib.webpack.isLocal ? "development" : "production",
  module: {
    rules: [
      {
        loader: "babel-loader",
        include: __dirname,
        exclude: /node_modules/
      }
    ]
  }
};

그 다음 serverless.yml에 webpack 관련 설정을 추가하겠습니다.

custom:
  webpack:
    webpackConfig: ./webpack.config.js
    includeModules: true

그 다음 deploy 해보시면 제대로 작동하는 것을 확인하실 수 있습니다.