puppeteerがGCFローカル環境で動作しない

environment/tech

environment

• Docker
• BuildPack-CLI(https://buildpacks.io/)
  • よしなにDockerコンテナを作成してくれる
• GoogleCloudCLI

tech

• typescript
• pupetter
  • html -> pdfにするために使用

デプロイ & 実行

GCFをローカル上で動作させるために、以下コマンドを使用してデプロイしています。

gcloud alpha functions local deploy test-container --builder gcr.io/gae-runtimes/buildpacks/google-gae-22/nodejs/builder --entry-point testFunction --gen2 --runtime nodejs20

実行時は、作成したコンテナのポート宛にPOSTします。

run.ts

async function run() {

  // NOTE: https://cloud.google.com/functions/docs/running/calling?hl=ja#cloudevent_functions
  const headers = {
    'Content-Type': 'application/json',
    'ce-id': '123451234512345',
    'ce-specversion': '1.0',
    'ce-time': '2020-01-02T12:34:56.789Z',
    'ce-type': 'google.cloud.pubsub.topic.v1.messagePublished',
    'ce-source': '//pubsub.googleapis.com/projects/MY-PROJECT/topics/MY-TOPIC',
  };
  const json = {
    message: {
      data: 'data',
      attributes: {
        attr1: 'attr1-value',
      },
    },
  };

  await ky.post('http://localhost:8080', {headers, json});
}

await run();

エラー☠️

Error: Could not find Chrome (ver. 122.0.6261.69). This can occur if either
2024-03-22 17:28:20  1. you did not perform an installation before running the script (e.g. `npx puppeteer browsers install chrome`) or
2024-03-22 17:28:20  2. your cache path is incorrectly configured (which is: /www-data-home/.cache/puppeteer).
2024-03-22 17:28:20 For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.
2024-03-22 17:28:20     at ChromeLauncher.resolveExecutablePath (file:///workspace/node_modules/.pnpm/puppeteer-core@22.3.0/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:259:27)
2024-03-22 17:28:20     at ChromeLauncher.executablePath (file:///workspace/node_modules/.pnpm/puppeteer-core@22.3.0/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:190:25)
2024-03-22 17:28:20     at ChromeLauncher.computeLaunchArguments (file:///workspace/node_modules/.pnpm/puppeteer-core@22.3.0/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:83:37)
2024-03-22 17:28:20     at async ChromeLauncher.launch (file:///workspace/node_modules/.pnpm/puppeteer-core@22.3.0/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:44:28)

どうやらpuppeteerを使用するためのcacheディレクトリが想定外のところにあるらしい。

こちらを参考に、ルートディレクトリにpuppeteer.config.tsを配置します。

puppeteer.config.ts

import { join } from 'path';
import { Configuration } from 'puppeteer';

const puppeteerConfig: Configuration = {
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
};

export default puppeteerConfig;

これでデプロイした時に、作業ディレクトリにpuppeteerがインストールされます！

補足

コンテナビルドの時に

pnpm i

が走り、puppeteerがインストールされる
デフォルトのままだと、docker上の/www-data-home/.cache/puppeteerにインストールされるが、その後の処理か何かで消えてしまう。
/workspace/.cache/puppeteerにインストールさせることで使えるようになった。

まとめ

GCFをローカルで使用するのに、意外と苦労している。
現状もGCSにアップロードする箇所でエラーです。。
また、なぜか消えてしまう箇所もう少し調査すれば良かったかもしれない。。