react-snapで環境変数を切り替える方法

2021-06-18

公式のドキュメント がすべてなのですが…。

const BASE_URL =
  process.env.NODE_ENV == "production" && navigator.userAgent != "ReactSnap"
    ? "/"
    : "http://xxx.yy/rest-api";

You can use navigator.userAgent == "ReactSnap" to do some checks in the app code while snapping—for example, if you use an absolute path for your API AJAX request. While crawling, however, you should request a specific host.

Google 翻訳

navigator.userAgent == "ReactSnap"を使用して、スナップ中にアプリコードでいくつかのチェックを行うことができます。たとえば、API AJAX リクエストに絶対パスを使用する場合などです。ただし、クロール中に特定のホストを要求する必要があります。

ちょっと説明不足なのでざくっと説明すると。

react-snap を使用する場合、以下の環境ごとに変数を割り当てる必要が出てくるケースがあります。

  1. ローカル開発環境（development）
  2. react-snap 時（production）
  3. 本番環境（production）

このうち 2 と 3 については環境変数で切り替えることができません。

そのため、たとえば本番環境の api を react-snap の環境からは叩くことができないようなときに、api の向き先を環境変数以外の何かしらの方法で切り替える必要が出てきます。

で、そういう時に userAgent で切り替えてあげれば良いよ、というわけですね。

この事実に気づくまで数年悩まされていたので、久しぶりにスッキリしました。