javascript - 如何在 next.js 部署中保密我的 API？

Question

我使用 React 和 Next.js 构建了一个小型内部应用程序。我正在使用 .env 文件 per their instructions使用我的 API key 和 secret 。

我的 api/hello.js 文件做了一个简单的事情

export default async (req, res) => {
  const data = await fetch(`https://api.trello.com/1/lists/abc123/cards?key=${process.env.KEY}&token=${process.env.TOKEN}`)

然而，当我构建应用程序并将其部署到生产环境、检查 JS 文件并在其中搜索“trello”时，我能够在那里看到 key 和 secret 。

不太确定我在这里做错了什么。希望得到一些帮助。谢谢!

我的next.config.js文件:

module.exports = {
  env: {
    KEY: process.env.KEY,
    TOKEN: process.env.TOKEN
  },
}

Answer 1

从 Next.js 9.4 开始，您可以添加 .env 文件并在其中添加 secret ，而无需使用 dotenv 等第三方包。

next.config.js

require('dotenv').config();

// this code exposes your environment variables to the client-side. 
module.exports = {
  env: {
    KEY: process.env.KEY,
    TOKEN: process.env.TOKEN
  },
}

您在 API 路由中使用 secret ，因此无需将它们公开给客户端。您可以将其删除:

module.exports = {
  env: {
    KEY: process.env.KEY,
    TOKEN: process.env.TOKEN
  },
}

为避免泄露 secret ，请勿使用 NEXT_PUBLIC_ 前缀。

如果您运行next build，您不应在输出 JS 文件中看到 .env 变量。