如何无需构建新镜像或重复代码，按域名提供带正确URL的JS文件？

我正在构建一个部署在Kubernetes集群中的应用，该应用会向客户端提供一个JavaScript文件，文件内容如下：

const URL = "https://fancy.com";

async function doSomething() {
    // ...Do something here...
    let res = await fetch(`${URL}/v1/pizza?${params}`);
    return await res.json();
}

该JS文件嵌入在Docker镜像中，后端基于Go Gin框架开发，当客户端访问首页时会发送该JS文件，后端部署在Nginx负载均衡器之后。现在我正在搭建dev环境，显然上述JS文件需要修改为：

const URL = "https://dev.fancy.com";

才能正常工作。请问是否有合适的方法可以提供包含正确URL的JS文件，而无需构建不同的镜像或重复JS代码？

可行方案 #

1. 后端模板渲染动态注入环境变量 #

把JS文件改成Go模板文件（比如app.js.tmpl），将硬编码的URL替换为模板占位符：

const URL = "{{.APIURL}}";

async function doSomething() {
    // ...Do something here...
    let res = await fetch(`${URL}/v1/pizza?${params}`);
    return await res.json();
}

在Go Gin中，读取环境变量（比如API_URL），在返回JS文件时渲染模板：

package main

import (
    "os"
    "github.com/gin-gonic/gin"
)

func main() {
    r := gin.Default()
    apiURL := os.Getenv("API_URL")
    if apiURL == "" {
        apiURL = "https://fancy.com" // 默认生产环境地址
    }

    r.GET("/app.js", func(c *gin.Context) {
        c.Header("Content-Type", "application/javascript")
        c.HTML(200, "app.js.tmpl", gin.H{
            "APIURL": apiURL,
        })
    })

    r.Run()
}

在Kubernetes的Deployment中，通过环境变量配置不同环境的URL：

# dev环境Deployment片段
env:
  - name: API_URL
    value: "https://dev.fancy.com"

生产环境则设置为https://fancy.com，无需修改镜像，仅通过环境变量切换。

2. 前端从后端配置接口获取URL #

修改JS文件，先请求后端的配置接口拿到当前环境的API地址，再进行业务请求：

let API_URL;

async function initConfig() {
    const res = await fetch("/api/config");
    const config = await res.json();
    API_URL = config.apiURL;
}

async function doSomething() {
    await initConfig(); // 确保先获取配置
    let res = await fetch(`${API_URL}/v1/pizza?${params}`);
    return await res.json();
}

在Go Gin中新增配置接口，读取环境变量返回配置：

r.GET("/api/config", func(c *gin.Context) {
    apiURL := os.Getenv("API_URL")
    if apiURL == "" {
        apiURL = "https://fancy.com"
    }
    c.JSON(200, gin.H{
        "apiURL": apiURL,
    })
})

同样通过Kubernetes环境变量控制不同环境的URL，JS文件无需修改，完全由后端提供配置。

3. 使用Kubernetes ConfigMap挂载替换JS文件 #

创建不同环境的ConfigMap，存储对应环境的JS文件内容：

# dev环境ConfigMap
apiVersion: v1
kind: ConfigMap
metadata:
  name: app-js-config
data:
  app.js: |
    const URL = "https://dev.fancy.com";

    async function doSomething() {
        // ...Do something here...
        let res = await fetch(`${URL}/v1/pizza?${params}`);
        return await res.json();
    }

在Deployment中，将ConfigMap挂载到容器内JS文件所在的路径，覆盖镜像中的原文件：

volumeMounts:
  - name: app-js-volume
    mountPath: /path/to/app.js # 替换为镜像中JS文件的实际路径
    subPath: app.js
volumes:
  - name: app-js-volume
    configMap:
      name: app-js-config

生产环境只需创建对应URL的ConfigMap即可，无需重新构建镜像，通过挂载实现文件替换。

内容的提问来源于stack exchange，提问作者JPFrancoia