Reactプロジェクトへの.envファイルの追加

githubにコミットするときのために、APIキーを非表示にしようとしています。フォーラムを調べて、ガイダンス、特に次の投稿を探しました。

create-react-appでAPIキーを非表示にするにはどうすればよいですか？

変更を加えて、糸を再開しました。何が間違っているのかわかりません-.envプロジェクトのルートにファイルを追加し（名前を付けましたprocess.env）、ファイルにファイルを追加しましたREACT_APP_API_KEY = 'my-secret-api-key'。

fetchApp.jsでキーを追加する方法かもしれないと思っており、テンプレートリテラルを使用しないなど、複数の形式を試しましたが、プロジェクトはまだコンパイルされません。

どんな助けでも大歓迎です。

performSearch = (query = 'germany') => {
    fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}`)
    .then(response => response.json())
    .then(responseData => {
        this.setState({
            results: responseData.results,
            loading: false
        });
     })
     .catch(error => {
            console.log('Error fetching and parsing data', error);
     });
}

4ステップ

1. npm install dotenv --save

2. 次に、次の行をアプリに追加します。

   require('dotenv').config()

3. 次に.env、アプリケーションのルートディレクトリにファイルを作成し、それに変数を追加します。

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'

4. 最後に、ファイルに追加.envして.gitignore、Gitがそれを無視し、GitHubで終了しないようにします。

create-react-appを使用している場合は、手順3と4のみが必要ですが、変数が機能するためには最初から始める必要があることに注意してREACT_APP_ください。

参照：https：//create-react-app.dev/docs/adding-custom-environment-variables/

注- .envファイルに変数を追加した後、再起動アプリケーションする必要があります。

リファレンス-https：//medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f

だから私はReactに不慣れで、それを行う方法を見つけました。

このソリューションでは、追加のパッケージは必要ありません。

ステップ1ReactDocs

上記のドキュメントでは、シェルでのエクスポートやその他のオプションについて言及していますが、説明しようとしているのは.envファイルの使用です。

1.1 Root /.envを作成します

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

それは重要な注意しなければならないと起動REACT_APP_

1.2ENV変数にアクセスする

#App.js file or the file you need to access ENV
<p>print env secret to HTML</p>
<pre>{process.env.REACT_APP_SECRET_NAME}</pre>

handleFetchData() { // access in API call
  fetch(`https://awesome.api.io?api-key=${process.env.REACT_APP_SECRET_NAME}`)
    .then((res) => res.json())
    .then((data) => console.log(data))
}

1.3ビルド環境の問題

したがって、ステップ1.1 | 2を実行した後、それが機能していなかったので、上記の問題/解決策を見つけました。Reactは、ビルド時にenvを読み取り/作成するため、変数が更新されるように.envファイルを変更するたびにnpm runstartを実行する必要があります。

今日、それを行うためのより簡単な方法があります。

ルートディレクトリに.env.localファイルを作成し、そこに変数を設定するだけです。あなたの場合：

REACT_APP_API_KEY = 'my-secret-api-key'

次に、そのようにjsファイルでそれを呼び出します。

process.env.REACT_APP_API_KEY

Reactはreact-scripts@0.5.0以降、環境変数をサポートしています。これを行うために外部パッケージは必要ありません。

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

*注：create-react-appは、プロジェクトの作成時にこのファイルをgitignoreに追加するため、.envではなく.env.localを提案します。

ファイルの優先度：

npm start：.env.development.local、.env.development、.env.local、.env

npm run build：.env.production.local、.env.production、.env.local、.env

npmテスト：.env.test.local、.env.test、.env（.env.localが欠落していることに注意してください）

詳細：https：//facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Webpackユーザー

webpackを使用している場合は、dotenv-webpackプラグインをインストールして使用できます。これを行うには、以下の手順に従います。

パッケージをインストールします

yarn add dotenv-webpack

.envファイルを作成する

// .env
API_KEY='my secret api key'

webpack.config.jsファイルに追加する

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

コードで次のように使用します

process.env.API_KEY

詳細および構成情報については、こちらをご覧ください。

1.ルートフォルダに.envファイルを作成します

一部の情報源は使用.env.developmentを好みます.env.productionが、それは必須ではありません。

2.変数の名前はREACT_APP_YOURVARIABLENAMEで始まる必要があります

環境変数がそのように開始されない場合、問題が発生するようです

3.変数を含めます

コードに配置するだけで環境変数を含める process.env.REACT_APP_VARIABLE

外部依存関係をインストールする必要はありません

npm installenv-cmdをインストールする必要があります

ルートディレクトリに.envを作成し、次のように更新します。REACT_APP_は、変数名の必須のプレフィックスです。

REACT_APP_NODE_ENV="production"
REACT_APP_DB="http://localhost:5000"

package.jsonを更新します

  "scripts": {
    "start": "env-cmd react-scripts start",
    "build": "env-cmd react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

1. dotenvdevDependenciesとしてインストールします。

npm i --save-dev dotenv

2. .envルートディレクトリにファイルを作成します。

my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md

3. .env以下のようにファイルを更新します。REACT_APP_は変数名の必須プレフィックスです。

REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY

4. [オプションですがグッドプラクティス]これで、変数を格納する構成ファイルを作成し、変数をエクスポートして、他のファイルから使用できるようになりました。

たとえば、という名前のファイルを作成し、base.js次のように更新します。

export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;

5. または、次の方法でJSファイルの環境変数を呼び出すこともできます。

process.env.REACT_APP_BASE_URL

として値を取得している場合はundefined、ノードサーバーを再起動して再コンパイルすることを検討する必要があります。