Skip to content

Instantly share code, notes, and snippets.

@LeeDDHH

LeeDDHH/heroku-use-nestjs-puppeteer.md

Last active May 4, 2022 00:27
Show Gist options
  • Save LeeDDHH/20ae0541d4db52a50189e95cd60b9edd to your computer and use it in GitHub Desktop.
Save LeeDDHH/20ae0541d4db52a50189e95cd60b9edd to your computer and use it in GitHub Desktop.
Download ZIP
herokuでNextjs + puppeteerを使うまでに必要な対応
Raw
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を動かすためにやること

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

  • 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'],
  ︙
})

参考

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment