ServerlessFrameworkのテンプレをYarn Workspacesで扱うチュートリアル

概要

複数のServerlessFrameworkプロジェクトをYarn Workspacesを利用して１リポジトリに収めた際の備忘録です。

GitHubにコードサンプルを上げています：https://github.com/shu000/serverless-ts-monorepo-sample

Dependencies

• Node.js v14.15.1
• Yarn v1.22.5
• ServerlessFramework v2.52.1

Step 1. テンプレートのインストール

まずは、ServerlessFrameworkのテンプレートを利用して、helloパッケージを作成します。

sls create --template aws-nodejs-typescript --path hello

複数のパッケージを用意したいので、同様にbyeパッケージも作成します。

sls create --template aws-nodejs-typescript --path bye

これでディレクトリはこのような状態です（一部ファイル省略）。

bye/
    src/
        functions/
        libs/
    package.json
    serverless.ts
    webpack.config.js
hello/
    src/
        functions/
        libs/
    package.json
    serverless.ts
    webpack.config.js

（以下、helloパッケージのコードサンプルが登場しますが、byeパッケージでも同一の変更が必要です。）

Step 2. モノレポ化

ここまでで１リポジトリ内に２つのnpmパッケージを設置しました。
ここからYarn Workspacesを活用してモノレポと呼べる構成にしていきます。

packages/
    bye/
        src/
            functions/
            libs/
        package.json
        serverless.ts
        webpack.config.js
    hello/
        src/
            functions/
            libs/
        package.json
        serverless.ts
        webpack.config.js

次にルートディレクトリにpackage.jsonを作成して、Yarn Workspaces設定を記述します。
また、今回は子パッケージのdevDependenciesは共通依存と見做し、ルートのpackage.jsonに書き写してします。

/package.json

{
  "name": "monorepo-sample",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "packages/bye",
    "packages/hello"
  ],
  "devDependencies": {
    "@serverless/typescript": "^2.23.0",
    "@types/aws-lambda": "^8.10.71",
    "@types/node": "^14.14.25",
    "json-schema-to-ts": "^1.5.0",
    "serverless": "^2.23.0",
    "serverless-webpack": "^5.3.5",
    "ts-loader": "^8.0.15",
    "ts-node": "^9.1.1",
    "tsconfig-paths": "^3.9.0",
    "tsconfig-paths-webpack-plugin": "^3.3.0",
    "typescript": "^4.1.3",
    "webpack": "^5.20.2",
    "webpack-node-externals": "^2.5.2"
  }
}

ルートにdevDependenciesを記述したので、byeおよびhelloのpackage.jsonも編集します。

/packages/hello/package.json

{
  "name": "hello",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@middy/core": "^1.5.2",
    "@middy/http-json-body-parser": "^1.5.2",
    "source-map-support": "^0.5.19"
  }
}

これで一旦モノレポにはなりました。
ルートディレクトリでyarnを実行すると、共通するライブラリがルートに巻き取られることが分かります。

Step 3. webpack.config の修正

ここまででは、まだデプロイはうまくいきません。
デフォルトのwebpack.config.jsでは親のnode_modulesを解決できないためです。

従ってwebpack-node-externalsに親のnode_modulesを教えてやります。

/packages/hello/webpack.config.js

  externals: [nodeExternals({
    modulesDir: path.resolve(__dirname, '../../node_modules')
  })],

これで、各パッケージ内でsls deployの実行に成功するようになります。

Step 4. 共通パッケージの作成

せっかくモノレポにしたので、重複ソースを共通パッケージとして切り出しましょう。
まずはpackages/my-libsディレクトリを作成します。

mkdir packages/my-libs

テンプレートに含まれるsrc/libsを共通パッケージにしてみます。

mv packages/hello/src/libs packages/my-libs/src
rm -rf packages/bye/src/libs

/packages/my-libs/package.json

{
  "name": "my-libs",
  "version": "1.0.0",
  "private": true,
  "main": "src/index.ts",
  "dependencies": {
    "@middy/core": "^1.5.2",
    "@middy/http-json-body-parser": "^1.5.2"
  }
}

/packages/my-libs/src/index.ts

export * from './apiGateway'
export * from './handlerResolver'
export * from './lambda'

上記ではmy-libsのmainをts（src/index.ts）にしています。
今回の構成では、byeやhelloのビルド時に、ts-loaderがmy-libsのtsも併せてビルドしてくれるためです。
通常、他者のパッケージからも呼ばれる場合は、ちゃんとトランスパイルしてからjsをmainに設定しましょう。

これでディレクトリ構成はこんな感じ。

package.json
packages/
    my-libs/
        src/
            index.ts
            apiGateway.ts
            handlerResolver.ts
            lambda.ts
        package.json
    bye/
        src/
            functions/
        package.json
        serverless.ts
        webpack.config.js
    hello/
        src/
            functions/
        package.json
        serverless.ts
        webpack.config.js

ではmy-libsをworkspacesに追加しましょう。

/package.json

  "workspaces": [
    "packages/my-libs",
    "packages/bye",
    "packages/hello"
  ]

続いてbyeとhelloからmy-libsを利用してみます。

/packages/hello/package.json

  "dependencies": {
    "my-libs": "*",
    "source-map-support": "^0.5.19"
  }

/packages/hello/src/functions/handler.ts

import type { ValidatedEventAPIGatewayProxyEvent } from 'my-libs';
import { formatJSONResponse } from 'my-libs';
import { middyfy } from 'my-libs';

/packages/hello/src/functions/index.ts

import { handlerPath } from 'my-libs';

最後に、このままではServerlessFrameworkがmy-libsをバンドルする際にエラーになるため、webpack.configに設定を追加します。

/packages/hello/webpack.config.js

  externals: [nodeExternals({
    modulesDir: path.resolve(__dirname, '../../node_modules'),
    allowlist: ['my-libs']
  })],

これで、ルートディレクトリでyarnを再実行すれば、sls deployが成功するようになります！

以上、当方初学者のため、マサカリ募集中です。

参考記事