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

概要

これは、GTを使用してReactアプリをデプロイするための短いチュートリアルです。

これを3つのステップで行います：

本番環境のAPIキーを追加します。

プロジェクトを設定するためにinitコマンドを実行します。

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

ビルドスクリプトに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: init コマンドを実行する 🔧

init コマンドを実行してプロジェクトを設定します。

npx gtx-cli init

翻訳を GT CDN にホストしたくない場合は、言語ファイルが保存される場所を尋ねられたときに「ローカル」を選択してください。また、loadTranslations() 関数を設定する必要があります。

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

init コマンドはルートに設定ファイルを生成します。

設定ファイルを <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 コマンドがビルドコマンドの前に来ることを確認してください。

package.json

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

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

次のステップ

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