[React] 리엑트 Spring Legacy 프로젝트로 배포 하기

안녕하세요? Java강의하는 낙자쌤입니다. 

 

작업이 완료된 React 프로젝트를 Spring 서버에 배포하는 절차를 알아보도록 하겠습니다.

배포된 이후에는 소스코드 수정이 불가능 하므로 정상적으로 동작이 되는지 점검해야 합니다. 

 

VSCode를 실행합니다. 

프로젝트경로 : C:\02WorkspaceSNH\K12React\08spring-rest-api

 

터미널을 실행합니다. 

 

C:\프로젝트폴더\08spring-rest-api> npm start

리엑트 프로젝트를 실행합니다. 

 

정상적으로 실행된걸 확인했다면 서버를 중지합니다. 

터미널에서 Ctrl + c 를 누른 후 y를 입력하면 됩니다.

 

배포를 하기 위해 다음 명령을 입력합니다. 

C:\프로젝트폴더\08spring-rest-api> npm run build

배포를 위한 빌드가 완료되면 프로젝트 하위에 build 폴더가 생성됩니다. 

 

해당 폴더를 이클립스의 스프링 프로젝트로 이동하면 됩니다. 

복사를 위해 윈도우 탐색기를 엽니다. 

build 폴더명을 react_build로 수정합니다.(반드시 필요한 과정은 아니지만 구분을 위해 변경하는것이 좋습니다.)

수정된 폴더를 이클립스의 resources 로 복사합니다. 

주의]React프로젝트는 html파일로 구성되므로 반드시 resources 폴더 하위로 복사해야 합니다. 

 

이클립스에서 react_build폴더 하위의 index.html을 열어주세요. 

 

하지만 줄바꿈이나 코드 정렬이 전혀 적용되어 있지 않아 가독성이 떨어집니다. 

다음 단축키를 통해 줄바꿈과 코드정렬을 적용합니다. 

• 자동줄바꿈 : Alt + Shift + y
• 코드정렬 : Ctrl + Shift + f

 

코드 정렬을 완료하면 위와같이 js나 css파일에 대한 경로가 보입니다. 

모두 절대경로로 적용되어 있으므로 Spring 프로젝트를 실행했을때 아무것도 보이지 않을겁니다. 

이 상태에서 저장한 후 일단 실행해보겠습니다. 

 

경로가 제대로 지정되지 않았으므로 아무것도 출력되지 않습니다. 

위의 빨간색 부분의 경로를 복사한 후 index.html 을 수정합니다.

수정한 내용은 아래와 같습니다. 

 

이를 저장한 후 새로고침 하면 다음과 같이 정상적으로 출력되는것을 볼 수 있습니다. 

 

이제 우리도 완료된 React프로젝트를 서버로 배포할 수 있게 되었습니다.