Next.js React应用如何基于Docker启动入参动态加载运行时配置

你之前使用的静态import拼接变量的写法，本质要求编译时就能确定完整路径，ES模块规范不支持这种动态拼接的静态导入。可通过以下两种适配场景的方案实现需求：

方案一：Webpack动态上下文导入（适合构建时确定配置路径） #

适用于Docker构建镜像时就传入配置关键词的场景，不需要运行时额外处理请求。

1. 先调整配置目录位置：将原本放在public下的Builds目录移到项目源码目录（比如src/build-configs/），保持原有Term分层结构：

   src/
     build-configs/
       Term1/
         config.js
         file1.json
         file2.json
       Term2/
         config.js
         file1.json
         file2.json
   

   移到源码目录的原因是public下的文件是静态托管资源，不会被Webpack当做ES模块处理，无法直接import。
2. 替换原本的静态import为带魔法注释的动态import：

   // 异步加载对应配置
   const loadTargetConfig = async () => {
     const configModule = await import(
       /* webpackInclude: /config\.js$/ */
       /* webpackMode: "lazy" */
       `../src/build-configs/${process.env.NEXT_PUBLIC_BUILD_LOC}/config.js`
     )
     // 如需加载同目录下的json文件，使用相同的动态路径规则即可
     const file1Module = await import(
       /* webpackInclude: /file1\.json$/ */
       /* webpackMode: "lazy" */
       `../src/build-configs/${process.env.NEXT_PUBLIC_BUILD_LOC}/file1.json`
     )
     return {
       config: configModule.default,
       file1: file1Module.default
     }
   }
   

   • 魔法注释webpackInclude会限制Webpack只扫描匹配后缀的文件，避免打包不必要的内容
   • webpackMode: "lazy"会按需加载对应目录的配置，只有执行到这行逻辑时才会拉取对应模块
   • 因为已经指定了固定的路径前缀，Webpack会自动枚举目录下所有符合规则的模块，生成路径映射，解决动态变量的问题

方案二：运行时静态资源拉取（适合Docker运行时才指定配置路径） #

适用于不需要重新构建镜像、仅靠运行时传入环境变量就能切换配置的场景。

1. 配置目录保持在public/Builds/下，维持原有Term分层结构，推荐将原本的config.js修改为纯JSON格式的config.json，避免安全风险。
2. 运行时通过fetch拉取对应路径的配置文件：

   const loadTargetConfig = async () => {
     const buildPath = `/Builds/${process.env.NEXT_PUBLIC_BUILD_LOC}`
     // 拉取基础配置
     const configRes = await fetch(`${buildPath}/config.json`)
     const config = await configRes.json()
     // 拉取其他依赖的配置文件
     const [file1Res, file2Res] = await Promise.all([
       fetch(`${buildPath}/file1.json`),
       fetch(`${buildPath}/file2.json`)
     ])
     const [file1, file2] = await Promise.all([file1Res.json(), file2Res.json()])
     return { config, file1, file2 }
   }
   

注意事项：

• 动态路径仅支持部分变量的场景，必须提前固定好根路径，不能完全使用无规则的任意拼接路径
• 要校验用户传入的环境变量值是否在已预设的Term目录范围内，避免加载到不存在的路径报错
• 如果是静态导出的Next.js应用，客户端无法直接读取运行时的环境变量，需要在Docker启动时注入全局环境变量（比如生成挂载到window上的全局配置脚本），再通过全局变量拉取对应配置

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