向React Project添加一个.env文件

我试图隐藏我的API密钥，当我提交到github，我已经通过论坛的指导，特别是下面的帖子:

我如何隐藏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);
});
}

515051 次浏览
小开
最佳答案

4个步骤

  1. < p > npm install dotenv --save

  2. 接下来添加以下行到你的应用程序。

    require('dotenv').config()

  3. 然后在应用程序的根目录下创建一个.env文件，并将变量添加到其中。

// contents of .env


REACT_APP_API_KEY = 'my-secret-api-key'
  1. 最后，将.env添加到你的.gitignore文件中，这样Git就会忽略它，它永远不会出现在GitHub上。

如果你正在使用create-react-app，那么你只需要第3步和第4步，但请记住变量需要从REACT_APP_开始才能工作。

参考:https://create-react-app.dev/docs/adding-custom-environment-variables/

__abc0 - __abc1

引用- https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f

小开

现在有一种更简单的方法。

只需创建.env。在根目录中的本地文件，并在那里设置变量。在你的情况下:

REACT_APP_API_KEY = 'my-secret-api-key'

然后在js文件中按如下方式调用它:

process.env.REACT_APP_API_KEY

React支持环境变量，因为react-scripts@0.5.0 .你不需要外部包来做到这一点。

< a href = " https://facebook.github。io / create-react-app / docs / adding-custom-environment-variables # adding-development-environment-variables-in-env noreferrer“rel = > https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables adding-development-environment-variables-in-env < / >

*注:我建议。env。Local而不是。env，因为create-react-app在创建项目时将此文件添加到gitignore。

文件的优先级:

NPM启动:.env.development.local， .env.development， .env。地方、.env

NPM运行build: . environment .production。地方,.env。生产、.env。地方、.env

NPM测试:.env.test。地方,.env。Test， .env(注意。env。本地不见了)

更多信息: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

有关更多信息和配置信息，请访问在这里

小开

所以我是React的新手，我找到了一种方法来做到这一点。

这个解决方案不需要任何额外的包。

步骤1 ReactDocs

在上面的文档中，他们提到了在Shell中导出和其他选项，我将尝试解释的是使用.env文件

1.1创建Root/.env

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

重要提示:必须以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运行启动，以便更新变量。

小开

你必须安装NPM安装env-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. 将dotenv安装为devDependencies:
npm i --save-dev dotenv
  1. 在根目录中创建一个.env文件:
my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md
  1. 更新.env文件，如下所示REACT_APP_是变量名的强制前缀。
REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY
  1. [可选但良好的实践]现在你可以创建一个配置文件来存储变量，并导出变量，以便从其他文件中使用它。

例如，我创建了一个名为base.js的文件，并像下面这样更新它:

export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;
  1. 或者你可以简单地在JS文件中调用环境变量，如下所示:
process.env.REACT_APP_BASE_URL
小开

1. 在根文件夹中创建.env文件

有些源更喜欢使用.env.development和.env.production，但这不是强制性的。

2. 变量的名称必须以REACT_APP_YOURVARIABLENAME开头

似乎如果你的环境变量不是这样开始的，那么你就会有问题

3.包括你的变量

要包含环境变量，只需将其放入代码process.env.REACT_APP_VARIABLE

您不必安装任何外部依赖项

小开

如果你得到的值是undefined，那么你应该考虑重新启动节点服务器并重新编译。

小开

每个人都没有定义的解决方案是把你的。env文件放在根目录，如

  • 项目名称/
  • src
  • .env

不要在src文件夹中创建应用程序的根目录

我认为你们在src文件夹中创建了文件，因为我也只在那里创建了… 然后我才意识到这是错误的，所以在src的外部创建.env文件，它将工作

小开

我想解释如何解决这个问题，以防止undefined问题:

  • 首先，在.env中添加开发环境变量可以通过react-scripts@0.5.0或更高版本获得。这意味着你不需要安装任何😃。
  • 其次，创建你的.env文件或.env_developement文件或其他文件，并放置ur变量but，这是大的but，将REACT_APP_添加到ex REACT_APP_API_KEY= "secret_key_here"的每个变量名中。如果不添加REACT_APP_，就会出现undefined问题。
  • 现在，你可以简单地使用这个变量process.env.REACT_APP_VARIBALE_NAME。例如:const API_KEY = process.env.REACT_APP_API_KEY。
  • 最后，我们解决了这个悲惨的情况😇。
小开

在CREATE REACT APP中使用环境变量的步骤(不含dotenv包)

  • 在项目的根文件夹中创建一个名为.env的新文件(不 在src文件夹，但上一级)。记住，它应该与package处于同一级别。json (这非常重要!!)

  • 像这样定义你的变量(注意你定义的每个变量都应该以REACT_APP_开头)

    示例:.env file

    REACT_APP_ACCESS_KEY=8Sh9ZLwZevicWC-f_lmHvvyMu44cg3yZBU

    注意:不必须将值括在"" or ''中

  • 现在你可以像这样在你的任何组件中使用变量

    const apiKey = process.env.REACT_APP_ACCESS_KEY

    该名称应该与.env文件中给出的键匹配

  • 现在，在你尝试这个之前，始终记得重新启动本地服务器。一旦你运行npm start，它就工作了。这一步适用于任何对.env文件进行更改的时候。我们通常会忘记这一步，所以它可能不起作用。

  • 可选，检查.env条目是否存在于.gitignore文件中。如果.env的条目存在于.gitignore中，那么你的.env文件将不会被推送到github(这就是我们首先使用.env的原因)。

小开

一旦你设置了环境变量，你必须再次运行npm start。这是我所缺少的部分。env变量不会在自动重新加载时得到更新


提交答案