我有一个 NEXT.JS 项目,我想将其部署到 3 个不同的环境。例如:SIT、UAT、PROD,所有这 3 个环境都有不同的配置值,例如 API_URL 和 API_KEY,必须相应更改。因此,每次我想部署到另一个环境时,我都必须一次又一次地构建项目,因为默认情况下,NEXT.JS 在构建时读取这些值,一旦项目构建完毕,这些值就无法更改。在这个项目中我使用页面路由器。
我只想构建一次并将其部署到任何地方,只需按照 The Twelve-Factor-App 方法更改 .env 文件中的环境值即可。例如,我可以用我的 Spring Boot 项目来做到这一点,我只需构建一次,然后当我想部署到其他环境时,我只需要更改 .env 文件中的环境值并重新启动应用程序,但使用 NEXT.JS ,好像有点棘手。
既然你正在谈论环境变量(这是非常好的),为了简单起见,应该放弃反应。我的意思是更改变量应该在支持层(nodejs)使用。在您的示例中,API_URL 和 API_KEY 不应在反应级别使用,而应在后端层使用。比如:
因此,next.js 后端应该使用环境变量来执行所需的操作,然后使用相同的端点将数据返回到反应层。因此,如果您部署到另一台服务器,只需更改后端的环境变量并分配另一个域即可。
请记住,为了安全起见,在前端层(react),您不应使用静态变量,因为正如您所提到的,它们将位于 js 构建内部。仅应在前端层使用短期令牌(oauth2)
无论如何,如果你被迫在前端层(react)使用 API_URL 和 API_KEY,你可以使用这些方法:
{
"API_URL":"www.foo-api.com/productos",
"API_KEY":"e3c06b64-f242-4ca7"
}
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 />);
});
使用这些方法,您只需构建一次应用程序,然后在启动之前设置所需的环境变量即可部署到任何地方