管理使用 vanilla JavaScript 制作的网站的 API 端点答案

【问题标题】：Managing API endpoints for a website made with vanilla JavaScript管理使用 vanilla JavaScript 制作的网站的 API 端点
【发布时间】：2020-11-06 23:47:27
【问题描述】：

我有一个正在使用 vanilla JS/HTML 开发的网站，我计划最终使用 docker 通过 nginx 为该网站提供服务，并将其托管在云中的某个 VM 上。

在测试我的网站时，我希望我的 JavaScript 使用在我的机器上运行的测试端点，例如 http://localhost/myapi/

在生产环境中运行时，我希望我的 JavaScript 使用生产端点，例如 http://example.com/myapi/

之前我通过创建 2 个不同的文件 test_endpoint.js 和 prod_endpoint.js 解决了这个问题，并根据传递给我的 Dockerfile 的参数将它们简单地复制为 endpoint.js。

根据我的设置，是否有更好的方法来管理测试端点和生产端点？

【问题讨论】：

可以设置环境变量
@GrantHerman — 在客户端 JS 中？！
您已经发现（正如我们都曾在某个时候）在我们的开发环境中需要一些自动化。有很多很多方法可以完成与您类似的任务。根据您的 IDE，它可以通过“重构”菜单非常简单地完成任务。您可以使用像 Gulp 这样的简单任务运行器来为您自动执行许多此类操作。您可以全力以赴，使用 WebPack 为您完成各种自动化任务。现在，您可以考虑使用Gulp
webpack.js.org/guides/environment-variables 你可以通过 webpack 传递环境变量。我认为到以上这一点，您将不得不研究一些外部客户端工具才能拥有这种切换能力。

标签： javascript docker nginx endpoint

【解决方案1】：

如何根据您所在的网址在变量中设置基本网址？像这样：

const api = window.location.host === 'localhost' ? 'http://localhost/myapi/' : 'http://example.com/myapi/';

然后在任何你想调用你的 api 的地方使用这个变量：

fetch(api + 'my/endpoint')

【讨论】：

我想这可能行得通，但它似乎有点不可靠/难以扩展，如果最终我有一整套端点、本地测试、暂存、生产、不同区域等，我会怎么做？我想知道如何在现实世界场景中实际解决这个问题
在现实世界的场景中，我们使用environment variables，通常在服务器上的.env 文件或某些设置中找到，具体取决于您托管它的位置。该文件（或设置）中设置了基本 url，代码在运行之前首先读取该文件以获取基本 url。然后，您可以拥有任意数量的环境，所有环境都有自己的基本 url。