如何在 NEXT.JS 中运行时更改环境变量值，而无需再次重建项目

Question

我有一个 NEXT.JS 项目，我想将其部署到 3 个不同的环境。例如：SIT、UAT、PROD，所有这 3 个环境都有不同的配置值，例如 API_URL 和 API_KEY，必须相应更改。因此，每次我想部署到另一个环境时，我都必须一次又一次地构建项目，因为默认情况下，NEXT.JS 在构建时读取这些值，一旦项目构建完毕，这些值就无法更改。在这个项目中我使用页面路由器。

我只想构建一次并将其部署到任何地方，只需按照 The Twelve-Factor-App 方法更改 .env 文件中的环境值即可。例如，我可以用我的 Spring Boot 项目来做到这一点，我只需构建一次，然后当我想部署到其他环境时，我只需要更改 .env 文件中的环境值并重新启动应用程序，但使用 NEXT.JS ，好像有点棘手。

Answer 1

环境变量 = 后端

既然你正在谈论环境变量（这是非常好的），为了简单起见，应该放弃反应。我的意思是更改变量应该在支持层（nodejs）使用。在您的示例中，API_URL 和 API_KEY 不应在反应级别使用，而应在后端层使用。比如：

因此，next.js 后端应该使用环境变量来执行所需的操作，然后使用相同的端点将数据返回到反应层。因此，如果您部署到另一台服务器，只需更改后端的环境变量并分配另一个域即可。

AJAX

请记住，为了安全起见，在前端层（react），您不应使用静态变量，因为正如您所提到的，它们将位于 js 构建内部。仅应在前端层使用短期令牌（oauth2）

无论如何，如果你被迫在前端层（react）使用 API_URL 和 API_KEY，你可以使用这些方法：

• 在 next.js 后端创建一个名为 /spa-settings 的端点
• 此端点可以访问后端操作系统，因此能够读取任何环境变量
• 将所需的环境变量作为 /spa-settings 的 json 响应返回

{
  "API_URL":"www.foo-api.com/productos",
  "API_KEY":"e3c06b64-f242-4ca7"
}

• 如果您要公开多个 en 变量，您可以使用 CRA 的方法，其中公开带有 REACT_APP_ 的所有前缀变量。
• 在React应用程序的入口点读取这些值，并使用任何策略（如localstorage、state、全局变量等）将这些值公开给所有react文件（javascript）

import axios from "axios";
import { createRoot } from 'react-dom/client';
import React from "react";
import App from "./App";
import "./index.css";
import "bootstrap/dist/css/bootstrap.css";

axios.get("./settings.json").then(response => response.data)
.then((data) => {
  console.log("settings:", JSON.stringify(data))
  localStorage.setItem('settings', JSON.stringify(data));
  const container = document.getElementById('root');
  const root = createRoot(container); 
  root.render(<App />);
});

• 然后在任何反应文件上，您将能够访问变量

1 次构建，N 次部署

使用这些方法，您只需构建一次应用程序，然后在启动之前设置所需的环境变量即可部署到任何地方

参考文献

• 我使用解释的策略为任何 Spa（React、Angular、Vue 等）构建这个轻量级服务器
  • https://github.com/usil/nodeboot-spa-server
• 水疗中心的几个构建问题
• https://jrichardsz.github.io/devops/just-one-build-for-spas
• https://jrichardsz.github.io/web/how-serve-spa-csr-react-angular-vue-webs
• 让 React 与生产中不同 EC2 实例上的后端 API 服务器对话
• 是否可以在客户端前端使用React服务器环境变量？
• 如何使用节点包dotenv访问Red Hat OpenShift应用程序中的本地开发环境变量？
• 如何在前端js应用程序中像后端应用程序一样使用变量替换？
• 如何使用多阶段、单环境 Rails 应用程序管理凭证？
• 如何检测环境方法是否在JS util文件（CRA）中运行
• 如何在我的React项目中使用环境变量？
• 无法从 Javascript 应用程序访问 Heroku 配置变量中的 API 密钥
• 如何使用 CI/CD 部署 NextJS 应用程序 [jenkins] [docker] [nginx]