概要

FRAMEWORK PRESET を Other に、BUILD COMMAND と INSTALL COMMAND は : （何もしないコマンド）にしてプロジェクトを作成し Production Branch を gh-pages にする。

※Vercel 上で Puppeteer を動かす方法ではありません。

事の起こり

React で作成したアプリ(SPA)を Vercel で配信しようとしたところ、「Error: Failed to launch chrome!」というエラーが出てしまいました。どうやらサーバー側で yarn build を実行しようとしたところ、chrome が起動できなかったようです。

[05:24:30.478] $ react-snap ; cp -R assets/ dist/
[05:24:30.988] Error: Failed to launch chrome!
[05:24:30.988] [0427/202430.981852:ERROR:zygote_host_impl_linux.cc(89)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.
[05:24:30.988] 
[05:24:30.988] 
[05:24:30.988] TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
[05:24:30.988] 
[05:24:30.989]     at onClose (/vercel/path0/node_modules/puppeteer/lib/Launcher.js:348:14)
[05:24:30.989]     at Interface.<anonymous> (/vercel/path0/node_modules/puppeteer/lib/Launcher.js:337:50)
[05:24:30.989]     at Interface.emit (events.js:412:35)
[05:24:30.989]     at Interface.close (readline.js:530:8)
[05:24:30.989]     at Socket.onend (readline.js:254:10)
[05:24:30.989]     at Socket.emit (events.js:412:35)
[05:24:30.989]     at endReadableNT (internal/streams/readable.js:1334:12)
[05:24:30.989]     at processTicksAndRejections (internal/process/task_queues.js:82:21)
[05:24:30.994] Done in 7.02s.
[05:24:31.007] Error: No Output Directory named "public" found after the Build completed. You can configure the Output Directory in your Project Settings. Learn More: https://vercel.link/missing-public-directory

これは、↓の記事に従って react-snap でサイト全体を SSG (Static Site Generation) して配信しようとしていたことが原因のようでした。react-snap では Puppeteer を使用しているようですが、その Puppeteer が chrome を起動しようとしているようです。

解決方法

解決方法は色々とあると思いますが、そもそもの話として、React というのは yarn build したファイルをサーバーで配信すれば済む話だったはずですので、今回はその方法を試したいと思います。

まず、 gh-pages パッケージを導入して github にビルド済みのファイルをアップロードします。dist/ ディレクトリにビルドしたファイルを配置する場合は以下のようなコマンドになります。

yarn add -D gh-pages
yarn build && yarn gh-pages -d dist/

そしたら Vercel で新しいプロジェクトを作成して、 FRAMEWORK PRESET を Other に、BUILD COMMAND と INSTALL COMMAND は何もしなくてよいので : に、OUTPUT DIRECTORY は . にしておきます。

この状態で Deploy を押すと一旦 master (main) ブランチがデプロイされますが、index.html が無いので 404 となります。

Production Branch の変更

配信したいのは master (main) ブランチではなく gh-pages ブランチなので、 Project Settings → Git → Production Branch と移動して、 BRANCH NAME を gh-pages に変更します。

デプロイの実行

Vercel は github にブランチを push したタイミングでデプロイがトリガされるようなので、再度 gh-pages ブランチを push します。

yarn build && yarn gh-pages -d dist/

するとビルドが実行されてファイルが配信されます。Vercel を使用しているので、 / 以外の URL にアクセスしてもページが表示されるようになっているはずです。また、カスタムドメインを指定している場合は自動でそのドメインにも配信されるはずです。お疲れ様でした！何か気になる点などありましたらコメントお願いします。