如何将前端指向本地后端服务器进行本地测试

Question

我正在开发一个全栈网络应用程序，它既有前端又有后端。在生产中，我的前端将托管在

https://frontend.com

，我的后端将托管在

https://backend.com

。在我的前端代码中对地址

https://backend.com

进行硬编码似乎是合理的。

但是，当我在本地测试应用程序时，我想在

localhost:8000

处启动后端，并将我的前端重定向到该地址。我的问题是：最简单/最优雅的方法是什么？

一种方法是手动更改前端代码以指向

localhost:8000

进行本地测试，然后在部署之前将其更改回来。不过，这很烦人，而且很容易忘记改回来。

我过去使用过的方法是：

1. 创建一个文件

   server.js

   ，其中包含：

   const LOCAL_SERVER = "http://localhost:8000"
   

2. 在我的前端 HTML 中导入此文件：

   <script src="server.js"></script>
   

3. 在我的 JS 脚本中设置回退到远程/生产服务器：

   let SERVER = typeof LOCAL_SERVER === 'undefined' ? 'https://backend.com' : LOCAL_SERVER
   

4. 将

   server.js

   添加到我的

   .gitignore

   。

这可行，但感觉有点hacky，并且它通过引用这个（可能不存在）

server.js

和

LOCAL_SERVER

常量污染了我的生产代码。 我想知道是否有人有更好的方法。

Answer 1

如果您的真实后端和本地后端使用相同的端口，一个简单的解决方案是将以下行添加到您的

hosts

文件中：

127.0.0.1   backend.com

Answer 2

理想情况下，您应该从环境或环境文件（如

.env

（或类似的东西））中存储和获取这些详细信息。您可以存储后端的 URL 和更多此类信息，例如第三方 API、凭据等。此文件不会提交到您的存储库，您可以在系统本地和服务器上单独维护它。这种方法的好处：

1. 您的代码干净且结构清晰。
2. 您正在遵循标准做法。
3. 其他开发人员可以轻松地处理您的代码。
4. 适用于 FE 和 BE 设置。

注意 — 此文件不应提交到您的存储库，请将其保留在

.gitignore

。

另一个相关的高级用例

通过阅读标题，我认为您在询问更高级的用例。也就是说，您希望使用前端部署来测试后端 API 的本地更改。确保您的 API 仍然与前端兼容并避免在本地系统上部署前端。

解决方案

这可以使用Requestly的替换规则来解决。只需定义一个替换字符串规则，拦截并查找主机名并将其替换为 API 的 localhost:8000 等主机名。步骤：

1. 下载 Requestly 的浏览器扩展后。打开应用程序。
2. 单击左侧栏中的 HTTP 规则。
3. 创建新规则，然后选择替换字符串规则。
4. 单击“创建规则”打开规则编辑屏幕。
5. 使用生产主机名作为源条件，也可以将其保留为空。
6. 在

   Replace

   字段下输入生产 API url —

   backend.com

7. 在

   With

   字段下输入 stag API url —

   localhost:8000

8. 保存规则并测试。

参考 - https://requestly.com/blog/replace-rule/

这也可以使用其他工具来完成，如 Fiddler、Charles Proxy 等。

替换规则也可以解决您的问题，但我强烈建议您针对您的用例使用环境文件。正如你提到的，它很hacky而且很危险。

附注- 我是 Requestly 的维护者之一。