本番環境と開発環境

本番環境と開発環境の相違点

概要

gt-react は、React アプリケーションが実行される環境に応じて動作が変わります。

NODE_ENV 環境変数を確認して、実行環境を判別します。

本番環境での動作

環境変数

本番環境で許可される環境変数は、GT_PROJECT_IDNEXT_PUBLIC_GT_PROJECT_ID のような接頭辞付きのものを含む)のみです。

APIキーが環境変数として設定されている場合、gt-react はエラーをスローします。これは、API Keys がクライアントに露出するのを防ぐためです。

翻訳の読み込み動作

本番環境では、デフォルトで gt-react プロバイダーが General Translation の翻訳 CDN(コンテンツ配信ネットワーク)から翻訳を読み込みます。

loadTranslations 関数でローカルの翻訳などの独自の読み込み方法を設定している場合は、gt-react がそちらを使用します。

本番環境では、翻訳のホットリロードは無効です。

開発時の挙動

環境変数

開発はローカル環境で行われ、外部のユーザーに公開されないため、gt-reactNEXT_PUBLIC_VITE_(および類似のもの)でプレフィックスされたものを含む、General Translation の任意の環境変数を受け付けます。

翻訳の読み込み動作

開発環境では、gt-react プロバイダーはまず本番環境と同様の方法で翻訳を読み込みます。 これらの翻訳はメモリにロードされます。

useGT<T>、または useTranslations を使用するコンポーネントをデフォルト以外の言語でレンダリングする場合、gt-react プロバイダーは次の処理を行います。

  1. 対象コンテンツに対して有効な保存済み翻訳が検出された場合は、その翻訳をレンダリングします。
  2. 翻訳が見つからない場合は、General Translation API を介してコンテンツを動的に翻訳します。
  3. 翻訳後は、その翻訳をレンダリングし、将来の利用に備えてメモリに保存します。
  4. 翻訳がタイムアウトした場合は、フォールバックして元のコンテンツをレンダリングします。

当社の API は開発環境の翻訳を短時間内部キャッシュするため、同じ翻訳が再度リクエストされた場合はキャッシュから提供されます。

これらの翻訳はプロジェクト単位で分離されており、他のプロジェクトの翻訳と混在することはありません。 さらに、キャッシュは開発セッションごとに固有であるため、キャッシュされた翻訳は本番環境では使用されません。

gt-react は、useGT<T>、または useTranslations を使用するコンポーネントの変更を検出し、当社の API を介して変更されたコンテンツを動的に翻訳します。

本番環境と開発環境の API Keys

gt-react の本番環境と開発環境での挙動を明確に区別できるよう、「本番環境用 API Keys」と「開発環境用 API Keys」という概念を設けています。

本番用 API Keys

本番用 API keys は、gtx-api- で始まる API keys です。

本番用 API key が指定されると、gt-react本番時の挙動セクションで説明されているとおりに動作します。

つまり、React アプリケーションを開発モードで実行していても、本番用 API key を指定すると、gt-react は本番環境として動作します。 翻訳のホットリロードは無効になり、未翻訳のコンポーネントは元のコンテンツをレンダリングします。

この挙動以外で、gt-react が本番用 API key を利用することはありません。

本番リリース時に別途本番用 API key の作成をお願いしている理由は、CLI ツールが本番用 API Keys のみにアクセスするためです。

CLI ツールは「production」カテゴリで課金とレート制限を適用します。

開発用 API Keys

開発用 API Keys は、gtx-dev- で始まる API Keys です。

開発用 API key が指定されると、gt-react開発時の挙動セクションで説明されているとおりに動作します。

開発用 API key を使用する場合、課金とレート制限は「development」カテゴリが適用されます。

開発用 API key で作成された翻訳は保存されず、本番環境では利用できません。

開発用の翻訳の目的は、本番リリース前にアプリケーションをテストできるようにすることです。

このガイドはいかがですか?