javascript - 如何制作不同版本的JS代码(开发版和生产版)？

Question

我开发了小型 Web 应用程序，分布在 Docker 容器中，基于 nginx 镜像。它包含纯 html 和 js 代码，没有框架。

在 JS 代码中，可以通过 WebSockets 访问远程主机。环境有所不同:在本地主机上测试期间，它通过 http 工作，在生产服务器上它使用 https。因此，传递给 WebSocket 的 URL 以 ws:// 或 wss://

开头

考虑到我想为开发和生产保留单个 Docker 镜像，并且只使用不同的 Docker Compose 配置脚本，那么在代码中维护这些 URL 的两个版本的可靠解决方案是什么？

有使用 WebSocket 的示例:

// This is for testing in localhost environment
var url = "ws://" + window.location.host + window.location.pathname + "bridge/";
// This is for working in production environment
var url = "wss://" + window.location.host + window.location.pathname + "bridge/";
BRIDGE.socket = new WebSocket(url);

Answer 1

这是一个更简单的“运行时模板替换”想法，可以发挥作用。

来自 Docker Hub 的基本 nginx 镜像实际上有一个来自 gettext 包的实用程序，名为 envsubst。它可以替换文件内的环境变量。我们可以在运行时利用这一点，通过制作一个快速 shell 脚本作为入口点来为我们进行替换。

首先，让我们创建 entrypoint.sh 脚本:

#!/bin/sh

if [ -n "$BASEURL" ]; then
  envsubst '$BASEURL' < /my.js.template > /my.js
  exec nginx -g "daemon off;"
else
  echo "you must specify \$BASEURL as en environment variable"
fi

这将在 /my.js.template 中查找文件。我的示例文件如下所示:

var url = "$BASEURL" + window.location.pathname + "bridge/";

我们需要将其包装在基于原始 nginx 的新 Docker 镜像中。 Dockerfile 看起来像:

FROM nginx
COPY entrypoint.sh /entrypoint.sh
COPY my.js.template /my.js.template
ENTRYPOINT ["/entrypoint.sh"]

现在，假设 /my.js 是您想要替换每个环境的 URL 的文件，您可以像这样启动此图像:

docker run -d -e BASEURL=wss://myhost mynewnginximage

它将替换$BASEURL int eh模板并将其写入/my.js，然后以PID 1执行nginx就像原始基础图像一样。

当然，您必须根据实际代码调整 shell 脚本路径。但理论上，您现在可以使用相同的图像，只需更改每个环境的 BASEURL 环境变量即可。在 Docker Compose 中，您可以指定一个空白环境变量，例如:

environment:
  BASEURL:

这将指示 docker-compose 使用在本地 shell 上设置的 BASEURL 并将其传递到容器。所以，你会像这样进行docker-compose up:

export BASEURL=ws://myhostfordev
docker-compose up

如果有什么不明白的地方，请告诉我，我可以尝试澄清。用于更多模板的 envsubst 替代方案可能类似于 https://github.com/kelseyhightower/confd相反，它更强大一些，还可以将环境变量作为模板的输入。