Vercel上で1つのGitHub repoについて設定を変えて複数デプロイする

(An English translation is available here.)

Vercel上で、１つのGitHub repoについて、設定を変えて複数ビルド＆デプロイしたいケースがありました。

具体的なケースとしては、私が開発しているアプリとして、Photo Data Viewerというものがあります。これは写真のExifデータを表示するためのアプリです。これを、web browser上で単体で動作するweb appとして公開した上で、Photo Location MapというElectron appにも組み込みたいというものです。

コード的には、photo-data-viewerというGitHub repoにおいて、webpackのtargetをデプロイ先ごとに変更する必要があります。

• 単体で動作するWeb app用の設定
  • webpackのtargetは、'web'（デフォルト）
• Photo Location MapというElectron appに組み込むための設定
  • webpackのtargetは、'electron-renderer'

設定方法

設定方法は、

1. photo-data-viewer repoに対して、２つのVercel projectを作成する。

   • 最初は、１つのGitHub repoについて、１つのVercel projectしか作成できないと思いこんでいたので、これが盲点でした・・・

2. Vercel projectごとに環境変数を設定する。

3. photo-data-viewerのコード中で、環境変数を参照する。

   • next.config.jsでPDV_IN_PLMという環境変数が'True'の場合、config.target = 'electron-renderer'としています。
   • 実際のコード

デプロイ先

Vercel projectごとのデプロイ先は次のとおりです。

Vercel project	URL
Web app	https://photo-data-viewer.vercel.app
Photo Location Map	https://pdv-in-plm.vercel.app

※ https://pdv-in-plm.vercel.app は、Electron renderer process用の設定でビルドしているので、Web browserで開いても正しく動作しません。Photo Location Map上で開くと、Electron renderer processで動作するので、正しく動作します。

以上、参考になれば幸いです。

参考