반응형
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-externalswebpack에서 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 해보시면 제대로 작동하는 것을 확인하실 수 있습니다.
반응형