读取与Spring Boot捆绑的React中的环境变量

可以通过以下步骤实现：

在React项目中创建一个名为.env的文件，该文件用于存储环境变量。在该文件中，可以定义各种环境变量及其对应的值。例如：

REACT_APP_API_URL=http://api.example.com
REACT_APP_API_KEY=1234567890

在React组件中使用环境变量。可以通过process.env对象来访问环境变量的值。例如，要访问上述示例中的REACT_APP_API_URL环境变量，可以使用process.env.REACT_APP_API_URL。

import React from 'react';

const MyComponent = () => {
  const apiUrl = process.env.REACT_APP_API_URL;

  // 使用apiUrl进行其他操作

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
};

export default MyComponent;

在Spring Boot中配置代理以将环境变量传递给React应用。在application.properties文件中添加以下配置：

spring.resources.static-locations=classpath:/static/
spring.mvc.view.prefix=/static/
spring.mvc.view.suffix=.html

在Spring Boot的控制器中，将环境变量传递给React应用。可以使用@Value注解来获取环境变量的值，并将其作为模型属性传递给视图。

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MyController {

  @Value("${REACT_APP_API_URL}")
  private String apiUrl;

  @GetMapping("/")
  public String index(Model model) {
    model.addAttribute("apiUrl", apiUrl);
    return "index";
  }
}

在React应用的入口文件中，使用${apiUrl}来访问传递的环境变量。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script>
    window.apiUrl = "${apiUrl}";
  </script>
  <script src="/static/js/main.js"></script>
</body>
</html>

通过以上步骤，可以在Spring Boot捆绑的React应用中读取并使用环境变量。这种方式可以方便地在不同环境中配置不同的值，例如开发环境、测试环境和生产环境。同时，这种方式也可以保护敏感信息，如API密钥等，避免将其直接暴露在代码中。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云云数据库MySQL版、腾讯云云原生容器服务（TKE）等。您可以在腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。