AWS LambdaをTypescript+Webpackでデプロイする #AWS

Lambda関数をTypescriptで記述したくなった。
さらに、Webpackでバンドルした後にLambdaにアップロードすることを試みる。

作業手順

Typescript環境構築
Lambda関数作成
Webpack準備

1. Typescript環境構築

package.jsonを用意する。
Typescriptに必要なパッケージやWebpackでtsファイルをビルドするためのパッケージ、Lambda側で型定義するためのパッケージをインストールしておく。

package.json

{
  "scripts": {
    "build": "webpack --mode production --config webpack.config.ts"
  },
  "devDependencies": {
    "@types/aws-lambda": "^8.10.62",
    "@types/webpack": "^4.41.22",
    "ts-loader": "^8.0.4",
    "ts-node": "^8.1.0",
    "typescript": "^4.0.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  }
}

2. Lambda関数作成

Lambda関数を用意する。
ハンドラに渡した引数に対して型を貼っておく。
以下はAPI Gatewayのイベントを受け取っている例だが、S3イベント用やCloudfront用イベントの型も用意されている。

index.ts

import { APIGatewayEvent, APIGatewayProxyCallback, Context } from 'aws-lambda';

export async function handler(event: APIGatewayEvent, context: Context, callback: APIGatewayProxyCallback) {
    console.log("hello world");
    return;
};

3. Webpack準備

Webpackで出力サイズを抑えた上でLambdaにアップロードする。

webpack.config.ts

import { Configuration } from 'webpack';

const config: Configuration = {
  target: 'node',
  entry: {
    'index': `${__dirname}/index`,
  },
  output: {
    path: `${__dirname}/dest`,
    filename: 'src/[name]/index.js',
    libraryTarget: 'commonjs2',
  },
  externals: ['aws-sdk'],
  module: {
    rules: [
      { test: /\.ts$/, use: [ { loader: 'ts-loader' } ]}
    ],
  },
  resolve: {
    extensions: ['.js', '.ts'],
  },
};

export default config;

ビルド実行すると、destディレクトリが作成され、出力ファイルが生成されていることが確認できる。

$ npm run build

後は、出力されたファイルをzip化してアップロードすれば良い。

まとめ

型定義しておけばLambda関数の記述もWebpackの設定も簡単になったように感じました。