web-dev-qa-db-ja.com

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

GithubにコミットするときにAPIキーを非表示にしようとしています。特に次の投稿については、フォーラムを参照してください。

create-react-appでAPIキーを非表示にする方法

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

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

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

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);
     });
}
reactjsenvironment-variablesapi-key
25
Bianca M

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で終了しないようにします。

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

31
tarzen chugh

それで、私はReactが初めてなので、それを行う方法を見つけました。

このソリューションは、余分なパッケージをnotRequireしません。

ステップ1 ReactDocs

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

1.1 Root/.envの作成

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

重要な注意事項MUST先頭がREACT_APP _

1.2 ENV変数へのアクセス

#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 run startを実行する必要があります。更新されます。

18
T04435

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

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

9
Aminu Kano

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

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

REACT_APP_API_KEY = 'my-secret-api-key'

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

process.env.REACT_APP_API_KEY

Reactは[email protected]以降の環境変数をサポートしています。そのために外部パッケージは必要ありません。

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

7
Pablo