herokuでNextjs + puppeteerを使うまでに必要な対応

heroku-use-nestjs-puppeteer.md

確認環境

Node.js	18.0.0
npm	8.6.0

---

HerokuにNest.jsのコードをデプロイするためにやること

ポート番号を process.env.PORT からも参照できるようにする

• main.ts でアプリのポート番号を指定する部分を修正

// main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(process.env.PORT || 3000); // ここ
}
bootstrap();

プロジェクトのルートに Procfile を追加する

• Procfile
  • Heroku上にあるWebアプリがどのようなコマンドで実行されるのかを記述するためのファイル
  • Webアプリを動かす指示書みたいなもの
  • <process type>: <command> 形式で書く
• webタイプでNest.jsのビルド後のファイルで実行するようにコマンドを指定する

web: npm run start:prod

---

HerokuでPuppeteerを動かすためにやること

• Puppeteer公式のTroubleshooting

追加で依存関係を解決する

• HerokuでPuppeteerを実行するには、Herokuが起動するLinuxボックスに含まれていないいくつかの追加の依存関係が必要
• Puppeteer公式で指定があるBuildPackを追加する
  • 最新の安定バージョンのビルドパックを追加する

    heroku buildpacks:add jontewks/puppeteer --app アプリケーション名

  • 日本語、中国語、韓国語のフォントのサポートが必要な場合に追加するビルドパック

    heroku buildpacks:add https://github.com/CoffeeAndCode/puppeteer-heroku-buildpack  --app アプリケーション名

Puppeteerのモジュールのコンテンツすべてをインポートする

• PuppeteerのモジュールがDefault Nameで指定されていないため、'puppeteer'からすべてインポートする
  • 少なくとも記載時はこの仕様だった

import * as puppeteer from 'puppeteer';

Puppeteerの起動オプションを指定する

• puppeteer.launch 時に args の指定をする
  • --no-sandbox
  • --disable-setuid-sandbox
• headless オプションがoffになっているとエラーになるので、onにする

const browser: puppeteer.Browser = await puppeteer?.launch({
  ︙
  headless: true,
  args: ['--no-sandbox', '--disable-setuid-sandbox'],
  ︙
})

---

参考

• NestJS アプリを Heroku にデプロイしたときに発生する 503エラーを解消する
• node.js - First Heroku deploy failed error code=H10 - Stack Overflow
• Git を使用したデプロイ | Heroku Dev Center
• The Procfile | Heroku Dev Center
• Herokuに必要なProcfileの書き方についてまとめておく | ハイパー猫背
• puppeteer/troubleshooting.md at main · puppeteer/puppeteer
• jontewks/puppeteer-heroku-buildpack: Installs dependencies needed in order to run puppeteer on heroku.
• HerokuにデプロイしたLINEボットからPuppeteerが使えない！ | 神戸システムデザイン
• HerokuでPuppeteerを動かすために必要なこと｜canonono.com
• import - JavaScript | MDN