Vercel と create-react-app

September 30, 2020

create-react-app で作っているものを Vercel で利用したいと思い少し試してみたところ、普通にデプロイするだけで Serveless Functions も込みで利用することができました(Serverless Functions については Node.js で試しています)。

しかし、逆に言うとデプロイしないと Serverless Functions などの挙動がわからないので、ローカル側である程度のデバッグができないかもう少し試してみました。

vercel cli を利用

デプロイ前にローカルでデバッグする方法は検索したらすぐに出てきました。 vercel cli の dev コマンドにローカル側で Sereverless Functions 等を実行する機能があるようです。

Vercel CLI Reference - Vercel # Dev

The vercel dev command is used to replicate the Vercel deployment environment locally, allowing you to test your Serverless Functions, without requiring you to deploy each time a change is made.

vercel dev の詳しい内容については丸投げしてしまいますが、「Vercel を素振りしてみたメモ - ngyukiの日記」が参考になります。

vercel dev を create-react-app のプロジェクトで利用

プロジェクトのルートで $ vercel dev を実行すると create-react-app を検出し、 vercel dev が react の development server としても実行されました¹。よって、別途 $ yarn start を実行しなくとも、ブラウザで http://localhost:3000 を開けば create-react-app で作成した内容が表示されます。

Serverless Functions については、プロジェクト内で /api/foo.ts のようにファイルを作成すれば http://localhost:3000/api/foo にアクセスすることで foo.ts が実行されます。

また create-react-app 部分のソースについては Visual Sutdio Code で Chrome debugger も使えました。

しかし、Serverless Functions 部分へのデバッガー利用方法については現時点では不明です。 /api/**/*.ts に記述した console.log() は vercel dev の出力として表示されたので、簡単なものであれば console.log() デバッグはできると思います (画像右下の format: ～ が console.log() からの出力です)。

PUBLIC_URL

create-react-app のプロジェクトで yarn start した場合、スクリプトファイルのパスなどに絶対パスが使われるため、デバッグ時になんらかの理由でサイトのパスを変更しようとすると少し手間がかかります。

これについては、私は $PUBLIC_URL 環境変数でパスを指定していますが、 vercel dev は $PUBLIC_URL を考慮しての動作はしないようなので vercel.json を作成し以下のような記述が必要となりました。

{
    "rewrites": [
        {
            "source": "/dev_path/api/(.*)",
            "destination": "/api/$1"
        }
    ]
}

なお、vercel.json をプロジェクトのルートに置いておくとデプロイに影響してしまうので、注意が必要です。

vercel dev と deploy 時で設定を変更するような方法もあるかもしれませんが、とりあえずはデプロイに影響を与えない場所に vercel.json を作成し $ PUBLIC_URL=/dev_path vercel dev --local-config=/path/to/vercel.json のようにしています。

Serverless Functions の依存ライブラリ

vercel dev ではとくに追加設定を行わなくても、プロジェクトに $ yarn add 等でライブラリをインストールしておけば Serverless Functions の実行時に利用されるようです (package.json で依存関係を指定するだけでなく、実際にインストールしておく必要がありました)。

デプロイするときには、依存関係の記述があれば通りそうですが、実行時に yarn.lock 等が作用するかは不明です。

なお、Serverless Functions に必要な @vercel/node は明示的に依存関係を指定しなくても vercel dev で利用できましたが、デプロイ時には Build Logs にエラーが出力されました。

04:39:17.702  	NowBuildError: api/format/[op].ts(1,41): error TS2307: Cannot find module '@vercel/node'.

おそらくはビルド時に /api を除外すればよいのだとは思いますが、デプロイ自体は成功し Serverless Functions も動作したので今回はそのままにしてあります。

テスト

まだ試していませんが、$ vercel dev を実行したまま $ yarn test を実行できるとは思います。この辺は追記するかもしれません。

リポジトリとデプロイしたサイト

今回作成したリポジトリと実際にデプロイしてみたサイトです。

リポジトリ: GitHub - hankei6km/react-app-funcs
サイト: https://react-app-funcs.vercel.app/

※ ライセンス関連のファイルを書き出すテストも行っていたので build コマンドを override しています (yarn run credits && yarn run build)

まとめ

試してみる前は「Next.js のプロジェクトでないと Serverless Functions 等をローカルで利用するのは面倒かな?」という風に思っていましたが、実際には「$ yarn start の代わりに $ vercel dev を使うだけ」な感覚で利用することができそうです。

とはいっても、次に Vercel 上に何かつくるときは Next.js を使おうかなとは思っていますが :-)

初回実行時には Vercel へのログインと Vercel 上へのプロジェクトの作成(リンク)が実施されます。 ^[return]