Zenn
ランサーズ株式会社Publicationへの投稿
📑

Serverless Frameworkの公式TypeSctiptテンプレートでPuppeteerを使うTips

Isana
2023/12/04に公開
TypeScript
Lambda
esbuild
Puppeteer
Serverless Framework
tech

この記事は、Lancers（ランサーズ） Advent Calendar 2023 の5日目の記事です。

https://qiita.com/advent-calendar/2023/lancers

かつ、AWS Lambda と Serverless Advent Calendar 2023 の5日目の記事です。

https://qiita.com/advent-calendar/2023/lambda

モチベーション

Puppeteerを使ってちょっとした処理を書きたいケースがあり、下記のスタックでシステムを構築しました。

この時、TypeScriptのビルドに失敗したのでTipsとして紹介します。

tl;dr

  • esbuildはpuppeteer-coreの依存関係を解決できない
  • esbuild-plugin-aliasを使って別名を付けるとビルドできる

esbuildはpuppeteer-coreの依存関係を解決できない

sls deployでデプロイするとesbuildが下記のエラーを吐きます。

Running "serverless" from node_modules

Deploying test-service to stage dev (ap-northeast-1)
✘ [ERROR] Do not know how to load path: node_modules/@puppeteer/browsers/node_modules/yargs/yargs

    node_modules/@puppeteer/browsers/lib/cjs/CLI.js:49:40:
      49 │ const yargs_1 = __importDefault(require("yargs/yargs"));
         ╵                                         ~~~~~~~~~~~~~

✘ [ERROR] Do not know how to load path: node_modules/@puppeteer/browsers/node_modules/yargs/yargsとある通り、
Puppeteerが依存しているyargsが解決できないようです。

esbuild-plugin-aliasを使って別名を付けるとビルドできる

esbuild-plugin-aliasをインストールします。

npm install --save-dev esbuild-plugin-alias

esbuild.config.jsを作成し下記を記述します。

esbuild.config.js
const alias = require("esbuild-plugin-alias");

module.exports = (serverless) => ({
    plugins: [
        alias({
            "yargs/yargs": `${__dirname}/node_modules/@puppeteer/browsers/node_modules/yargs/index.mjs`,
        }),
    ],
});

serverless.tsに下記の設定を追加します。

serverless.ts
const serverlessConfiguration: AWS = {
// 略
    custom: {
        esbuild: {
            bundle: true,
            minify: false,
            sourcemap: true,
            exclude: ["aws-sdk"],
            target: "node16",
            define: { "require.resolve": undefined },
            platform: "node",
            concurrency: 10,
+           config: "./esbuild.config.js",
        },
    },
};

これでビルドできるようになりました。

まとめ

普段、esbuildは使っていないのでエラーが出た時はビビりましたが解決できました。

この記事が誰かの役に立てれば幸いです。

ランサーズ株式会社
ランサーズ株式会社Publication

ランサーズ社の開発やデザインに関するノウハウをご紹介します。

Discussion