Reactで環境変数を使用する方法

React

Reactで環境変数を使用する方法

Reactアプリで環境変数を使用するためには、.envファイルをプロジェクトのルートディレクトリに作成し、必要な環境変数を定義します。
REACT_APP_プレフィックスを使用する必要があります。

以下は具体的な例です：

1. 環境変数の設定

.envファイル
REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=your_api_key_here

2. 環境変数の使用

src/App.tsx
import React from 'react';

const App: React.FC = () => {
  const apiUrl = process.env.REACT_APP_API_URL;
  const apiKey = process.env.REACT_APP_API_KEY;

  if (!apiUrl || !apiKey) {
    console.error("環境変数が設定されていません。");
    return <div>環境変数が設定されていません。</div>;
  }

  return (
    <div>
      <h1>環境変数の使用例</h1>
      <p>API URL: {apiUrl}</p>
      <p>API Key: {apiKey}</p>
    </div>
  );
}

export default App;

3. TypeScriptでの型定義

TypeScriptでprocess.envを型安全に使用するために、以下のように型定義を追加します。

src/react-app-env.d.ts
/// <reference types="react-scripts" />

declare namespace NodeJS {
  interface ProcessEnv {
    REACT_APP_API_URL: string;
    REACT_APP_API_KEY: string;
  }
}

4. 実行

環境変数を読み込んでアプリケーションを実行します。
.envファイルに設定された値が読み込まれ、コンポーネント内で使用できるようになります。

これで、Reactアプリケーションで環境変数を使用する方法が完成です。
特別なライブラリのインストールは不要ですので、npmやyarnの手順は必要ありません。

.envファイルをビルド時に環境を指定して切り替える方法

Reactアプリケーションでビルド時に異なる環境を指定して環境変数を切り替えるには、複数の.envファイルを使用します。
例えば、開発、ステージング、本番環境に対してそれぞれの環境変数を定義します。

1. 環境ごとの.envファイルを作成

.env.development
REACT_APP_API_URL=https://dev-api.example.com
REACT_APP_API_KEY=dev_api_key_here
.env.staging
REACT_APP_API_URL=https://staging-api.example.com
REACT_APP_API_KEY=staging_api_key_here
.env.production
REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=prod_api_key_here

2. スクリプトの設定

package.jsonファイルにビルドスクリプトを追加し、それぞれの環境でビルドできるようにします。

package.json
{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:dev": "env-cmd -f .env.development react-scripts build",
    "build:staging": "env-cmd -f .env.staging react-scripts build",
    "build:prod": "env-cmd -f .env.production react-scripts build"
  }
}

3. env-cmdパッケージのインストール

環境変数を読み込むためにenv-cmdパッケージをインストールします。

npm install env-cmd --save-dev

または

yarn add env-cmd --dev

4. 環境ごとのビルド実行

それぞれの環境に応じてビルドを実行します。

  • 開発環境ビルド:
npm run build:dev

または

yarn build:dev
  • ステージング環境ビルド:
npm run build:staging

または

yarn build:staging
  • 本番環境ビルド:
npm run build:prod

または

yarn build:prod

これで、Reactアプリケーションをビルドする際に特定の環境変数を使用して切り替えることができます。