VercelとSupabaseのトラブル対処｜ビルドエラー・リージョン・ドメイン移行

はじめに

VercelとSupabaseの組み合わせで実際に詰まった場面をまとめました。どれも原因が分かれば対処は短いのですが、エラーメッセージから原因にたどり着くまでが長い類のものです。

Vercelのビルドで lightningcss が見つからない

Astroをバージョンアップしてデプロイしたところ、このエラーでビルドが失敗しました。

[vite] (ssr) Error when evaluating SSR module /vercel/path0/astro.config.ts:
Cannot find module '../lightningcss.linux-x64-gnu.node'

lightningcss が、Vercelのビルド環境（Linux）向けのネイティブバイナリを見つけられていないのが原因です。手元のmacOSやWindowsでは動くのに、デプロイ時だけ失敗するという形で表面化します。

package.json の optionalDependencies に、Linux向けのパッケージを明示的に追加すると解消します。

{
  "name": "your-astro-project",
  "dependencies": {},
  "optionalDependencies": {
    "lightningcss-linux-x64-gnu": "^1.30.1"
  }
}

SupabaseとVercelの通信が遅い

VercelにデプロイしたアプリからSupabaseにリクエストを投げると、異常に反応が遅いことがありました。

原因は、Supabaseが東京リージョン、VercelがワシントンD.C.リージョンだったことです。リクエストのたびに太平洋を往復していました。

Vercelのリージョンを変更する

Settings > Functions > Function Region から変更できます。

Supabaseのリージョンは後から変えられない

Supabaseは、**プロジェクト作成後にリージョンを変更できません。**作成時に選ぶ必要があります。

日本国内向けのサービスなら、両方を東京リージョンに揃えるのが基本です。先にSupabaseのリージョンを決めて、それにVercel側を合わせるという順序で考えると迷いません。

Vercelでプロジェクト間のドメインを付け替える

あるプロジェクトに設定しているドメインを、別のプロジェクトに移す手順です。ここでは my-astro-blog に設定している example.com を my-blog に付け替えます。

移行先のプロジェクトの Settings を開く

Domains に、移行元で使っているドメインを入力して Add

表示される選択肢は Recommended に従う

Move Domains を押す

移行元から自動的に外れるので、先に削除しておく必要はありません。

FlutterのSupabaseアプリが実機で動かない

エミュレーターでは動くのに、Android実機に入れると動かない、という現象がありました。

原因は、インターネット通信の許可がないことでした。Androidでは、アプリがネットワークを使うために明示的な宣言が必要です。エミュレーターでは制限が緩いため、実機で初めて表面化します。

android/app/src/main/AndroidManifest.xml に1行追加すれば解決します。

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- 明示的にインターネット通信を許可する -->
  <uses-permission android:name="android.permission.INTERNET" />
  <!-- ... -->
</manifest>

参考: Use Supabase with Flutter

おわりに

どれも環境の違いが原因で起きるものばかりです。ローカルとデプロイ先、エミュレーターと実機のように、動く環境と動かない環境がはっきりしている場合は、その差分から絞り込むのが近道になります。

関連記事

この記事を書いた人