Spring Boot打包React Web组件：如何读取环境变量？

针对你这种Web组件需要动态获取后端接口地址的场景，以下几种方案可以实现运行时传递环境变量，无需重新打包前端：

方案一：Spring Boot 动态生成前端配置文件 #

通过Spring Boot的资源处理器，在启动时读取K8s注入的环境变量，动态生成一个前端可访问的配置JS文件，无需实际写入磁盘：

1. 在Spring Boot中添加配置类，实现动态提供/config.js资源：

@Configuration
public class StaticConfigHandler implements WebMvcConfigurer {
    @Value("${backend.api.url}")
    private String backendApiUrl;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/config.js")
                .setCacheControl(CacheControl.noCache().mustRevalidate()) // 禁用缓存，确保环境变更生效
                .resourceChain(false)
                .addResolver(new ResourceResolver() {
                    @Override
                    public Resource resolveResource(HttpServletRequest request, String path, List<? extends Resource> locations, ResourceResolverChain chain) {
                        // 生成包含环境变量的JS内容
                        String configContent = String.format("window.appConfig = { backendUrl: '%s' };", backendApiUrl);
                        return new ByteArrayResource(configContent.getBytes(StandardCharsets.UTF_8));
                    }

                    @Override
                    public String resolveUrlPath(String resourcePath, List<? extends Resource> locations, ResourceResolverChain chain) {
                        return null;
                    }
                });
    }
}

2. 在React的public/index.html中引入这个配置文件：

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

3. React代码中直接访问全局变量：

const backendUrl = window.appConfig.backendUrl;
// 后续接口请求使用这个url

方案二：通过HTML模板注入环境变量 #

如果你的项目使用Thymeleaf等模板引擎，可以直接在HTML中注入环境变量：

1. 将public/index.html移到src/main/resources/templates目录，修改为Thymeleaf模板：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 原有head内容 -->
</head>
<body>
    <div id="root"></div>
    <script th:inline="javascript">
        // 直接注入环境变量到全局对象
        window.appConfig = {
            backendUrl: [[${@environment.getProperty('backend.api.url')}]]
        };
    </script>
    <!-- 原有React脚本引入 -->
</body>
</html>

2. 添加一个Controller返回这个模板：

@Controller
public class HomeController {
    @GetMapping("/")
    public String index() {
        return "index";
    }
}

3. React中同样通过window.appConfig.backendUrl获取地址。

方案三：构建时注入（不推荐） #

如果允许每次环境变更都重新打包，可以通过Maven Frontend Plugin将Spring Boot的环境变量传递给React构建：

在pom.xml的Frontend Plugin配置中添加环境变量：

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.12.1</version>
    <executions>
        <execution>
            <id>npm build</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>run build</arguments>
                <environmentVariables>
                    <REACT_APP_BACKEND_URL>${backend.api.url}</REACT_APP_BACKEND_URL>
                </environmentVariables>
            </configuration>
        </execution>
    </executions>
</plugin>

React中通过process.env.REACT_APP_BACKEND_URL访问，但这种方式无法支持K8s运行时动态修改环境变量，所以不适合你的场景。

内容的提问来源于stack exchange，提问作者sw-tracker