React .env ファイルの使い方

React プロジェクトに .env ファイルを追加する

React プロジェクトで環境変数を管理するために .env ファイルを使用します。このファイルはプロジェクトのルートディレクトリに配置され、環境に依存する設定 (API キー、データベース接続情報など) を安全に格納します。

手順

1. .env ファイルの作成
   

2. 環境変数の設定
   

   • ファイル内に環境変数をキー-値ペアで設定します。

     REACT_APP_API_KEY=your_api_key
     REACT_APP_DATABASE_URL=your_database_url
     

   • キーには REACT_APP_ プレフィックスを付ける必要があります。これは React が環境変数をビルド時に読み込むための規約です。

3. 環境変数の読み込み
   

例

import React from 'react';

function App() {
  const apiKey = process.env.REACT_APP_API_KEY;

  return (
    <div>
      <h1>API Key: {apiKey}</h1>
    </div>
  );
}

export default App;

注意

• 開発環境、ステージング環境、本番環境ごとに異なる .env ファイルを作成し、適切な環境変数を設定することができます。
• .env ファイルはバージョン管理システム (Gitなど) にコミットしないでください。機密情報を公開しないようにしてください。

REACT_APP_API_KEY=your_api_key
REACT_APP_DATABASE_URL=your_database_url

react-dotenv パッケージのインストール

npm install react-dotenv

環境変数の読み込み

import React from 'react';
require('dotenv').config();

function App() {
  const apiKey = process.env.REACT_APP_API_KEY;
  const databaseUrl = process.env.REACT_APP_DATABASE_URL;

  return (
    <div>
      <h1>API Key: {apiKey}</h1>
      <p>Database URL: {databaseUrl}</p>
    </div>
  );
}

export default App;

環境変数の使用

const apiKey = process.env.REACT_APP_API_KEY;
const databaseUrl = process.env.REACT_APP_DATABASE_URL;

React .env ファイルの使い方

• キーには REACT_APP_ プレフィックスを付ける必要があります。
• .env ファイルにキー-値ペアで環境変数を設定します。

• require('dotenv').config(); をメインのエントリポイントファイルに追加します。
• react-dotenv パッケージを使用して環境変数をプロジェクト内で読み込みます。

• JavaScriptコードで process.env.REACT_APP_ を使用して環境変数を参照します。

const apiKey = process.env.REACT_APP_API_KEY;
const databaseUrl = process.env.REACT_APP_DATABASE_URL;

// API 呼び出し
fetch('https://api.example.com', {
  headers: {
    Authorization: `Bearer ${apiKey}`
  }
})
.then(response => response.json())
.then(data => {
  // データ処理
});

// データベース接続
const connection = new DatabaseConnection(databaseUrl);

• .env ファイルはバージョン管理システムにコミットしないでください。

WebpackのDefinePluginを使用する

• 以下のように設定します:
• webpack.config.js ファイルに DefinePlugin を追加して環境変数を定義します。

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.REACT_APP_API_KEY': JSON.stringify('your_api_key'),
      'process.env.REACT_APP_DATABASE_URL': JSON.stringify('your_database_url')
    })
  ]
};

Create React Appの環境変数機能を使用する

• Create React Appを使用している場合は、.env ファイルを作成する代わりに、REACT_APP_ プレフィックスを付けた環境変数を直接ターミナルで設定することができます。

REACT_APP_API_KEY=your_api_key REACT_APP_DATABASE_URL=your_database_url npm start

JavaScriptのprocess.envオブジェクトを使用する

• Node.jsのprocess.envオブジェクトを使用して環境変数を直接読み込むことができます。

const apiKey = process.env.REACT_APP_API_KEY;
const databaseUrl = process.env.REACT_APP_DATABASE_URL;

注意

• WebpackのDefinePluginやCreate React Appの環境変数機能を使用すると、ビルド時に環境変数を定義し、本番環境でのセキュリティを強化することができます。
• process.envオブジェクトを使用する場合、環境変数をビルド時に定義する必要があります。

• react-dotenv パッケージを使用するか、WebpackのDefinePluginやCreate React Appの環境変数機能を使用します。

const apiKey = process.env.REACT_APP_API_KEY;
const databaseUrl = process.env.REACT_APP_DATABASE_URL;

// API 呼び出し
fetch('https://api.example.com', {
  headers: {
    Authorization: `Bearer ${apiKey}`
  }
})
.then(response => response.json())
.then(data => {
  // データ処理
});

// データベース接続
const connection = new DatabaseConnection(databaseUrl);