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

发布于 2025-01-10 07:40:47 字数 633 浏览 3 评论 0原文

我有一个 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);
      });
  }

原文

I have a netlify react app. which is connected to my github. I'm using emailjs for receiving the messages from whoever reaches to my app.

emailjs deals with three ids 'SERVICE_ID', 'TEMPLATE_ID' and 'USER_ID'. But I don't wanna use them openly in my component js file.

Driver Function

  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);
      });
  }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

御守 2025-01-17 07:40:48

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

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

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

.env

之后，您可以使用进程调用代码中的变量.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 会执行以下操作：

注意：您必须创建以以下开头的自定义环境变量
REACT_APP_。除 NODE_ENV 之外的任何其他变量都将被忽略
避免意外暴露机器上的私钥
有相同的名字。更改任何环境变量都需要
如果开发服务器正在运行，请重新启动它。

如果您使用 gatsby 或 nextjs，环境变量命名约定可能会改变，所以请注意这一点。

I think you're referring to environment variables, in order to test that out locally it will vary per the stack you use for creating the app, if you use react create app you can create a .env file in the root of your project and populate the values

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

Don't forget to exclude this file from git, to avoid pushing secrets in your repo. to do that add this to your .gitignore

.env

After that you can call the variables in your code using the process.env like this:

process.env.REACT_APP_SERVICE_ID

Now modify the code:

  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
  }

To make that work in netlify you would have to add the variable in your netlify project, follow this section to do that: https://docs.netlify.com/configure-builds/environment-variables/#declare-variables

As you noted I added the prefix REACT_APP_, this is because react create app does this:

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.

If you are using gatsby or nextjs the env variables naming convention might change so please be aware of that.

回复收藏 0 原文