스프링부트의 application.yml로 리액트 window.env 설정 방법

리액트 프론트엔드(React FE)와 스프링부트 백엔드(Spring Boot BE)를 연동할 때, 스프링부트의 환경설정을 리액트에서 동적으로 사용하려면 다음과 같은 방법을 사용할 수 있습니다.

핵심은 스프링부트가 리액트 빌드 결과물을 서빙하면서 환경 변수를 주입하는 것입니다.

1. 환경 변수 전달 흐름


text
application.yml → Spring Boot Controller → React (window.env)

2. 설정 단계

1. 스프링부트 컨트롤러 생성
환경 변수를 JSON 형태로 반환하는 API 엔드포인트 생성:


java
@RestController
public class EnvController {
    
    @Value("${react.app.api-url}") 
    private String apiUrl;
    
    @Value("${react.app.debug-mode}")
    private boolean debugMode;

    @GetMapping("/env-config.js")
    public String getEnvConfig() {
        return String.format(
            "window.env = { API_URL: '%s', DEBUG_MODE: %b };",
            apiUrl, debugMode
        );
    }
}

2. application.yml 설정
리액트에서 필요한 변수 정의:


text
react:
  app:
    api-url: https://api.example.com
    debug-mode: true

3. 리액트 HTML 파일 수정
public/index.html에 스크립트 태그 추가:


xml
<!DOCTYPE html>
<html>
  <head>
    <script src="/env-config.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

4. 리액트 코드에서 접근
window.env 객체 사용:


javascript
// API 호출 예시
fetch(window.env.API_URL + '/data');

3. 고급 설정 (프로필별 환경 분리)

1. 프로필별 YAML 파일 생성

application-dev.yml, application-prod.yml 등으로 분할

2. Maven/Gradle 빌드 설정
프로필 활성화 옵션 추가:


bash
# Maven 예시
mvn spring-boot:run -Dspring-boot.run.profiles=dev

3. 동적 환경 로드
컨트롤러에서 Environment 객체 주입:


java
@Autowired
private Environment env;

@GetMapping("/env-config.js")
public String getEnvConfig() {
    return String.format(
        "window.env = { API_URL: '%s' };",
        env.getProperty("react.app.api-url")
    );
}

4. 보안 및 최적화

캐싱 방지:


java
@GetMapping(value = "/env-config.js", produces = "application/javascript")
public ResponseEntity<String> getEnvConfig() {
    return ResponseEntity.ok()
        .header("Cache-Control", "no-store")
        .body(jsContent);
}

민감정보 처리:
application.yml 대신 외부 설정(vault, AWS Parameter Store) 사용 권장

5. 대안: 빌드 시 환경 주입

1. Maven 플러그인 활용
frontend-maven-plugin으로 빌드 시 환경 변수 전달:


xml
<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <executions>
        <execution>
            <id>npm build</id>
            <configuration>
                <arguments>run build -- --mode ${env.profile}</arguments>
            </configuration>
        </execution>
    </executions>
</plugin>

2. React .env 파일 생성
스프링부트 리소스 폴더에 배치:


text
// src/main/resources/static/.env
REACT_APP_API_URL=@react.app.api-url@

6. 주의사항

CORS 이슈: 동일 도메인에서 서빙되도록 구성
XSS 방지: JSON.stringify() 사용 시 HTML 엔티티 이스케이프 처리
타입 변환: boolean/숫자 타입은 리액트에서 파싱 필요

이 방법을 통해 스프링부트의 중앙화된 환경설정을 리액트 앱에 효과적으로 전파할 수 있습니다.

알케미스트

이 블로그 검색