将 .env 文件添加到 React 项目

Posted

技术标签:

【中文标题】将 .env 文件添加到 React 项目【英文标题】：Adding an .env file to React Project 【发布时间】：2018-09-09 18:24:11 【问题描述】：

当我提交到 github 时，我试图隐藏我的 API 密钥，并且我查看了论坛以获取指导，尤其是以下帖子：

How do I hide API key in create-react-app?

我进行了更改并重新启动了纱线。我不确定自己做错了什么——我在项目的根目录中添加了一个.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);
     );

【问题讨论】：

嗨@RIYAJKHAN 我已将文件更改为 .env.local 并且它肯定在 src 目录之外，但我仍然没有定义 REACT_APP_API_KEY ：/ 为我解决的只是关闭运行本地开发服务器的终端并重新运行npm run start。 你不能在 React 应用中隐藏秘密。请参阅 ***.com/a/46839021/4722345 不要使用它来存储秘密。来自docs...WARNING: Do not store any secrets (such as private API keys) in your React app! Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files. 您需要设置服务器并使用 JWT 等身份验证来隐藏它。阅读this suggestion 了解更多信息。 【参考方案1】：

4 个步骤

    npm install dotenv --save

    接下来将以下行添加到您的应用中。

    require('dotenv').config()

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

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'
    最后，将 .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

【讨论】：

在 .env 文件中添加变量后需要重新启动应用程序。如果您使用“create-react-app”创建反应应用程序，请在变量名前使用“REACT_APP_”。 @tarzen chugh 例如，如果我将我的应用程序部署到 AWS 会怎样。由于 .env 是 gitignore 的一部分，它不会被忽略吗？我怎样才能包括它的生产？ 在哪里添加require('dotenv').config()？哪个文件？ @aqteifan 你不需要添加那个sn-p，但是.ENV文件命名起着至关重要的作用 @user2763557 我使用的模式是创建一个 .env.example 文件，其中列出了 env 键的定义。然后，您可以复制 .env.example 并创建一个 .env 文件（在开发和生产中），其中包含您的有效值，例如键、基本 URL 等。您必须将 .env 文件添加到 .gitignore。【参考方案2】：

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

只需在根目录中创建 .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

*注意：我建议使用 .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

【讨论】：

正确的命名为我完成了这项工作。我使用 .env.dev 并且 React 在寻找 .env.development 时退回到 .env 最简单最好的！ 还有一个提示是重新启动服务器以正常工作【参考方案3】：

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

更多信息和配置信息，请访问here

【讨论】：

如果您使用的是 webpack-devserver，在您重新启动之前不会看到更改。 这对我来说是最好的解决方案。谢谢。注意：我使用的是服务器端渲染，所以我必须更新两个 webpack 文件（客户端也是）。 @Aminu Kano 如果我在源代码中在线查看 bundle.js 文件，如果 api-key 仍然可见，您能否解释一下使用这种方法的意义何在？ @LinasM。是的，当然，但你所说的“在线”是什么意思？ @AminuKano，是的，这非常清楚地解释了这一点。谢谢【参考方案4】：

所以我自己是 React 的新手，我找到了一种方法。

此解决方案不需要任何额外的软件包。

第一步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 构建环境Issue

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

【讨论】：

在我看来，这是正确的答案！无需额外的包，以及导入环境变量的正确 React 方式。其他方法也可以，但是既然已经为您完成了，为什么还要添加包和代码配置呢？很好的答案！ 我错过了这个REACT_APP_ 谢谢。没有其他人提到它。 由于某种原因这对我不起作用。我得到undefined @T04435 我已经有伙伴了，我指的是我需要为每个服务器提供不同的 .env 文件吗？ 我什么都试过了。 process.env.REACT_APP_API_KEY 说undefined。【参考方案5】：

你必须安装 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"

【讨论】：

谢谢！帮帮我！【参考方案6】：
    将dotenv 安装为devDependencies： 
npm i --save-dev dotenv
    在根目录下创建.env文件： 
my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md
    更新.env 文件如下 & REACT_APP_ 是变量名的强制前缀。 
REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY
    [ 可选但良好的做法 ] 现在您可以创建一个配置文件来存储变量并导出变量，以便可以从其他文件中使用它。

例如，我创建了一个名为 base.js 的文件并如下更新：

export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;
    或者你也可以直接在你的JS文件中调用环境变量，方法如下： 
process.env.REACT_APP_BASE_URL

【讨论】：

仅使用一个 .env 文件时，如何区分开发环境和生产环境？我知道我们需要创建.env.development 和.env.prod 文件，但是我们如何使用您的方法区分它们？ @ameyaraje 基本上，我们忽略了.gitignore 中的.env 文件。因此，在部署时，我们只需将 .env 文件复制到我们的服务器并更改 BASE_URL 和其他必要的值。这样，当它需要部署最新的代码时，我们只需从 git master 拉取并部署即可。我们不考虑.env，因为我们忽略了它并在一开始就将它设置在我们的服务器中。谢谢！ process.env.REACT_APP_API_KEY 没有给出显示未定义的值。我确实停止了服务器并使用 npm start 重新启动 @vikramvi 您是否将值放在 .env 文件中名为相同 REACT_APP_BASE_URL 的变量中？ @FatemaT.Zuhora 这是我的错，我错误地将 .env 放在子目录中，而不是放在根目录下【参考方案7】：

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

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

2。您的 VARIABLE 名称 - 必须以 REACT_APP_YOURVARIABLENAME 开头

看来如果你的环境变量不是这样开始的那么你就会遇到问题

3。包括你的变量

要包含您的环境变量，只需在您的代码中添加process.env.REACT_APP_VARIABLE

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

【讨论】：

我做同样的事情，但它在控制台中显示未定义 如果您得到未定义的值，请重新编译。 重新编译后仍然不确定。 console.log('process', process.env.REACT_APP_BASE_URL); 确保您的根文件夹中有 .env 文件（与 package.json 相同的位置）而不是 src 文件夹中。【参考方案8】：

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

【讨论】：

【参考方案9】：

每个人都不确定解决方案是将您的 .env 文件放在根目录中，例如

项目名称/ 源代码 .env

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

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

【讨论】：

【参考方案10】：

我想好好解释一下如何解决这个问题以防止undefined问题：

首先，在.env 中添加开发环境变量适用于react-scripts@0.5.0 及更高版本。这意味着你不必安装任何东西?。 第二次创建您的.env 文件或.env_developement 文件或其他任何东西并放置您的变量，但这是一个很大的变量，但将REACT_APP_ 添加到每个变量名称前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。 终于，我们解决了这个悲惨的情况?。

【讨论】：

【参考方案11】：

在 CREATE REACT APP 中使用环境变量的步骤

在项目的 root 文件夹中创建一个名为 .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 文件中。如果 .gitignore 中存在 .env 的条目，那么您的 .env 文件将不会被推送到 github（这就是我们首先使用 .env 的原因）。

【讨论】：

以上是关于将 .env 文件添加到 React 项目的主要内容，如果未能解决你的问题，请参考以下文章

如何在带有 typescript 项目的 react js 中使用 .env 文件？

vue、react项目设置多环境变量

在 React 中隐藏 API 密钥

React：找不到相对于目录“src”的预设“env react”

将 JSON 文件中的项目数据动态加载到 React

如何告诉 React 使用哪个 .env 文件？