构建时使用环境变量

Question

我正在开发一个将在本地部署（无云）的应用程序，并且需要将应用程序部署到不同的服务器路径。例如，在一家公司中它可能是company1.com而另一家公司可能是company2.com/app，因为它们已经有一台服务器，并希望在不同的上下文路径下将它部署在同一台服务器上。

问题是在Webpack中我们编译应用程序并创建HTML + JS + CSS文件。 HTML和JS文件将服务器上下文路径（域名后面的部分）硬编码到代码中。例如，加载JS文件将使用<script src="/hello.js" />完成，因此如果应用程序将部署到company2.com/app，我需要脚本标记为<script src="/app/hello.js" />

我正在寻找改变服务器上下文路径的方法，最好是使用环境变量。

为了比较我们在服务器端使用Spring，在那里我们可以定义env-var server.contextPath，它将改变应用程序工作的上下文路径。

如果它发生任何变化，应用程序将部署为docker image。

任何想法如何实现这样的事情？

Answer 1

这是一个有趣的问题，有一些方法可以解决这个问题。我将在下面列出一些选项。

我正在寻找使用环境变量动态更改服务器上下文路径的方法。

我会列出其他一些选项，但第一个选项是使用env vars。

构建时使用环境变量

webpack有一个插件（DefinePlugin），允许我们将环境变量设置为javascript代码。

然后，您将能够使用process.env获取这些环境变量。例如，如果您具有以下配置：

plugins: [
    new webpack.DefinePlugin({
        fruit: JSON.stringify('orange'),
        MY_VAR: JSON.stringify('value'),
        API_URL: JSON.stringify('http://some-api')
    })
]

然后，在您的代码中，您可以使用以下代码获取它们：

console.log(process.env.fruit); // "orange"
console.log(process.env.MY_VAR); // "value"
console.log(process.env.API_URL); // "http://some-api"

这就是说，你可以这样做：

Passing environment-dependent variables in webpack

然后，例如，您可以在代码中使用process.env.API_URL，而不是使用硬编码。

重要提示：只有在将构建代码并将其发布到生产环境之前，此方法才有效。（我认为这对你来说不是问题）。

我认为这是最好的选择，因为您的代码将是“干净的”，它更“可自定义”，无论您的环境如何，它都将“简单地工作”。

使用地图

您可以使用一些应用程序逻辑来决定变量。例如，您可以“查看”该网址（即location.href）并根据此地址决定要使用的值。

let api;

if (domain === 'domain1.com') api = 'api1';
if (domain === 'domain2.com') api = 'api2';

使用额外HTTP服务器

您始终可以指向服务器中的硬编码路径，例如/api。然后，在您的代码中，您将指向/api。因此，您的所有请求都将转到/api。

你需要有一个HTTP服务器（它可以是一个Nginx，一个NodeJS，无论你想要什么），听/api，然后在那里有这个“路由”逻辑。

它可以正常工作，但您需要控制此HTTP服务器的部署。这对您来说可能不是一个好选择，但它可能适合您的需求。

一个优点是，您只能在更改某些路由时更改此HTTP服务器的代码，而无需再次部署前端代码。

我认为总结一下。

希望它有所帮助！

更改React Webpack应用程序文件和api路径

1 个答案:

构建时使用环境变量

使用地图

使用额外HTTP服务器