240901 19주차 일요일 - React 03

React 프로젝트를 배포할 때는 npm run build 명령어를 사용하여 정적 파일들을 생성한 후, 해당 파일들을 Spring 프로젝트의 정적 리소스 경로로 복사합니다. 이 과정에 대한 자세한 설명을 아래에 단계별로 안내하겠습니다.

1. React 프로젝트 빌드

React 애플리케이션을 빌드하면, 자바스크립트, CSS, HTML 등의 파일들이 최적화된 상태로 build 폴더에 생성됩니다. 이 폴더의 내용은 정적 파일로, 배포할 때 사용됩니다.

빌드 명령 실행

1. 터미널을 열고 React 프로젝트의 루트 디렉토리로 이동합니다.
2. 다음 명령어를 실행하여 애플리케이션을 빌드합니다:
   npm run build
3. 명령어가 실행되면 build라는 폴더가 생성되고, 이 폴더에는 최적화된 정적 파일들이 포함됩니다.
   • index.html: React 앱의 진입점 HTML 파일
   • static/js/: 번들링된 자바스크립트 파일
   • static/css/: 번들링된 CSS 파일
   • 기타 이미지 및 자산 파일

2. 생성된 정적 파일을 Spring 프로젝트에 복사

이제 생성된 build 폴더의 파일들을 Spring 프로젝트의 정적 리소스 경로로 복사해야 합니다.

Spring 프로젝트 구조

Spring Boot에서는 src/main/resources/static 폴더가 정적 리소스를 서비스하기 위한 기본 경로로 사용됩니다. 이 폴더에 있는 파일들은 웹 애플리케이션이 실행될 때 / 경로 아래에 정적 파일로 제공됩니다.

복사 과정

1. React 프로젝트의 build 폴더에서 모든 파일을 복사합니다.
2. Spring 프로젝트의 src/main/resources/static 폴더로 복사한 파일들을 붙여넣습니다.
   • static 폴더가 존재하지 않는다면, 직접 생성할 수 있습니다.
3. 이제 Spring Boot 애플리케이션을 실행하면, React 앱이 Spring Boot 서버를 통해 정적 리소스로 제공됩니다.

3. Spring Boot와 React 통합 배포

이제 Spring Boot 애플리케이션을 빌드하고 배포하면, React 애플리케이션은 Spring Boot의 내장된 Tomcat 서버를 통해 제공됩니다. localhost:8080에서 React 애플리케이션에 접근할 수 있습니다.

4. 추가 팁

• 자동화: 빌드 및 복사 과정을 자동화하려면 스크립트를 작성하거나, maven이나 gradle 빌드 도구에서 관련 플러그인을 사용해 통합할 수 있습니다.
• API와 연동: Spring의 REST API와 React를 통합할 경우, 동일한 서버에서 API와 프론트엔드를 함께 제공할 수 있어 편리합니다.

이 과정을 통해 Spring Boot와 React 애플리케이션을 통합하여 배포할 수 있습니다.
자세한 내용은 gptonline.ai/ko/에서 확인할 수 있습니다.