本番環境へのデプロイ (5分)

概要

これは、ReactアプリをGTでデプロイするための簡単なチュートリアルです。

この作業は3つのステップで行います：

本番用APIキーを追加します。

プロジェクトを設定するために、gtx-cli configure コマンドを実行します。

設定をアプリと共有します。

ビルドスクリプトにtranslateコマンドを追加します。

前提条件

GTを使用してReactアプリをセットアップするために、クイックスタートガイドに従っていることを確認してください。

ステップ 1: 本番 API キーに切り替える 🔑

本番 API キーとプロジェクト ID を本番環境変数に追加します。

ダッシュボードから、サイドバーの API キー に移動します。 API キーを作成 をクリックし、それらを本番環境に追加します。

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

API キーを保護してください！

本番キーは本番でのみ使用する必要があります。同様に、開発キーは開発でのみ使用する必要があります。 API キーを公開リポジトリにコミットしないでください！

ステップ 2: `gtx-cli configure` コマンドを実行する 🔧

gtx-cli configure コマンドを実行して、プロジェクトを設定します。

npx gtx-cli configure

翻訳をGT CDNでホストしたくない場合は、質問されたときに「No」を選択してください。また、loadTranslations() 関数の設定も必要です。

ステップ 3: 設定をアプリに共有する ⚙️

gtx-cli configure コマンドは、プロジェクトのルートに設定ファイルを生成します。

設定ファイルを <GTProvider> に渡してください。プロバイダーでロケールを指定している場合は、それらを削除してください。設定ファイルがその処理を行います。

src/App.js

import { GTProvider } from "gt-react";
import MyApp from "./MyApp";
import config from "../gt.config.json";  
 
export default function App() {
  return (
    <GTProvider {...config}> 
      <MyApp />
    </GTProvider> 
  );
}

ステップ 4: translate コマンドをビルドスクリプトに追加する 🏗️

最後のステップは、translate コマンドをビルドスクリプトに追加することです。
translate コマンドが build コマンドの前に来るようにしてください。

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

これで完了です！GT を使って React アプリをデプロイする準備ができました！

次のステップ

CLIツールの詳細については、CLI ドキュメントを参照してください。
文字列を翻訳する方法を学びましょう。
<T> コンポーネントについて学びましょう。