将.env文件添加到React Project

我试图在提交到github时隐藏我的API密钥，并且我在论坛中浏览了相关指南，尤其是以下文章：

如何在create-react-app中隐藏API密钥？

我进行了更改，然后重新开始了纱线。我不确定自己在做什么错–我.env在项目的根目录（我将其命名为process.env）中添加了一个文件，并在我刚刚放入的文件中添加了一个文件REACT_APP_API_KEY = 'my-secret-api-key'。

我认为这可能是fetch在App.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的新手，我找到了一种方法。

此解决方案不需要任何额外的程序包。

第1步ReactDocs

在上面的文档中，他们提到了Shell中的export和其他选项，我尝试解释的是使用.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 Build Env问题

因此，在执行步骤1.1 | 2之后，它不起作用，然后发现了上述问题/解决方案。React构建时会读取/创建env，因此每次修改.env文件时都需要npm run start，以便变量得到更新。

今天，有一种更简单的方法可以做到这一点。

只需在根目录中创建.env.local文件，然后在其中设置变量即可。在您的情况下：

REACT_APP_API_KEY = 'my-secret-api-key'

然后以这种方式将其称为js文件：

process.env.REACT_APP_API_KEY

由于react-scripts@0.5.0，因此React支持环境变量。您不需要外部程序包就可以做到这一点。

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.local，.env

npm运行构建：.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.您的VARIABLE名称-必须以REACT_APP_YOURVARIABLENAME开头

看来，如果您的环境变量不是这样启动的，那么您将遇到问题

3.包含您的变量

包括环境变量，只需将其放在代码中 process.env.REACT_APP_VARIABLE

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

您必须安装npm install 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

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，则应考虑重新启动节点服务器并再次重新编译。