reactjs - ReactJS 应用程序中的配置文件

Question

我开发了一个 reactjs 应用程序并托管在 azure cloud 中。现在我们想通过 Azure 管道实现 CI/CD 流程。我在这两个平台上都很安静。需要知道过程。

目前，我有一个 index.js 文件，我在其中使用了 axios 并设置了基本 URL 以连接到服务器。我在不同组件类中的所有 Web 服务都访问此 axios 设置以从服务器访问数据。我们有四个环境，DEV、SIT、UAT 和 PROD。因此，现在我使用手动更改 axios 基本 URL 并创建构建并将其压缩并将其托管到相应的环境中。

我需要了解 CI/CD 应该采取哪些步骤。大多数谷歌发现建议有一个配置文件。但是如何改变我当前的实现对我来说是一个很大的挑战。例如我的 axios 基本 URL，它将如何从配置文件中获取值，或者我应该在哪里创建配置文件，因为当我创建构建时，所有 js 文件都被缩小到一个文件中并放在静态文件夹中. 除了静态文件夹外，还列出了应用程序图标和项目目录公共文件夹中的文件（在构建文件夹中）。所以我应该在公共文件夹或其他东西中包含一个配置文件。

项目目录的config文件夹下还有webpack.config.dev.js和webpack.config.prod.js。会不会有帮助。因为要求首先通过 Azure 管道，所以代码将进入 DEV 环境，然后从 DEV 到 SIT，从 SIT 到 UAT，然后再到 PROD。所以后来我的 axios Base URL 也应该相应地改变。

任何人都可以提出任何建议吗？

标签： reactjsazureweb-applicationsprogressive-web-apps

Answer 1

我不确定我是否完全理解您的问题，但您可以创建一个 json 文件并将配置数据放入其中，即 server_config.json。它不会被缩小，因为它不是一个 js 文件。然后，您将需要读取代码中的 json 以获取所有设置。如果需要，您的 CI/CD 也可以读取此文件。

您还应该确保从版本控制中忽略 json 配置文件，以便每个环境都必须有自己的文件。