如何在 netlify 上设置环境变量？

Question

我有一个 netlify React 应用程序。它连接到我的 github。我正在使用 emailjs 接收来自任何访问我的应用程序的人的消息。

emailjs 处理三个 id 'SERVICE_ID'、'TEMPLATE_ID' 和 'USER_ID'。但我不想在我的组件 js 文件中公开使用它们。

驱动函数

  function sendEmail(e) {
    e.preventDefault();    //This is important, i'm not sure why, but the email won't send without it

    emailjs.sendForm(SERVICE_ID, TEMPLATE_ID, e.target, USER_ID)
      .then((result) => {
          window.location.reload()  //This is if you still want the page to reload (since e.preventDefault() cancelled that behavior)
      }, (error) => {
          console.log(error.text);
      });
  }

Answer 1

勾选Adding env variables to react app

您可以在您的根目录中创建一个 .env 并在其中添加您的密钥、api 端点...。

Answer 2

我认为您指的是环境变量，为了在本地进行测试，它会根据您用于创建应用程序的堆栈而有所不同，如果您使用 react create app，则可以在项目的根并填充值

REACT_APP_SERVICE_ID ="your_value"
REACT_APP_TEMPLATE_ID ="your_value"
REACT_APP_USER_ID ="your_value"

不要忘记从 git 中排除此文件，以避免在您的存储库中推送机密。为此，请将其添加到您的 .gitignore

.env

之后，您可以使用 process.env 调用代码中的变量，如下所示：

process.env.REACT_APP_SERVICE_ID

现在修改代码：

  function sendEmail(e) {
   // Your code

   emailjs.sendForm(process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, e.target, process.env.REACT_APP_USER_ID)
   // your promise
  }

要在 netlify 中工作，您必须在 netlify 项目中添加变量，请按照本节进行操作：https://docs.netlify.com/configure-builds/environment-variables/#declare-variables

如您所述，我添加了前缀 REACT_APP_，这是因为 react create app 这样做：

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

如果您使用的是 gatsby 或 nextjs，环境变量命名约定可能会发生变化，因此请注意这一点。

Answer 3

您可以在 netlify 上设置环境变量。请检查以下图片。

如何在 netlify 上设置环境变量？

How can I set environment variables on netlify?

javascript

reactjs

react-native

email-client

react-typescript