Spring Boot와 React를 분리해서 연동해보자 1) React 구성

왜 쓰게 되었는가?

가장 많이 사랑을 받은 게시글인 Spring Boot와 React를 연동하여 개발환경을 만들어보자 를 통해서 Spring Boot를 React와 동시에 구성하는 방식에 대해서 알아보았습니다.

Spring Boot와 React를 연동하여 개발환경을 만들어보자

물론 이 방식 자체는 나쁘지 않지만, 이런 경우 백엔드 서버가 완전히 다운된 경우 아예 화면 자체도 나오지 않을 수도 있고, 개인적으로 FE 구성을 변경하기 위해서 굳이 BE도 재빌드를 하는 상황이 생기는데, 그런 절차들은 리액트 개발도 귀찮고, 스프링부트 개발도 귀찮은 상황을 만들 수 있습니다.

React에서 단순하게 버튼 하나 추가하는 화면을 구성하는데 서버를 끄고 → gradle로 빌드 누르고 → 기다렸다가 → 다시 Spring boot 키고 번거로운 과정을 줄이기 위해서는 분리하는 것도 좋은 방법이라고 생각합니다.

물론, 위의 방식이 틀렸다고 말하는 것은 아니지만 개인적으로 여러 프로젝트들을 진행시켜보면서, 굳이...? 라는 생각이 많이 들어서 추가적으로 하는 것이기 때문에 이런 방식에 대해서 선택은 읽고 있는 여러분 스스로 결정하는 것이라고 생각합니다.

시작하기에 앞서..

React를 활용하는 입장에서 React는 SPA라는 사실을 명확하게 인지하고 넘어가면 좋습니다. React는 한 페이지에 여러가지 페이지를 보여주는 방식입니다. 여러 페이지를 스스로 구성해야하는 것이 아니고, 한페이지만 구성되어있으면, JS가 알아서 그런 화면을 변환하며 변환시킨다는 점을 주목해야합니다. 즉, React를 서버를 매번 키지 않아도 react-scripts start 나 npm run start 이런 명령문을 통해서 꼭 서버를 켜야지만 React화면을 볼 수 있다는 뜻이 아닙니다.

React는 Build 기능을 활용하면 정적파일로 하나의 페이지를 묶어서 관리할 수 있습니다.

대략 이런식이다.. 물론 내가 무슨 프로그램을 만드냐에 따라서 내부 파일은 좀 변경 될 수 있다. 

그러면 이 파일들을 브라우저에서 url에 입력해서 주소와 일치할때 index.html와 포함되있는 JS파일들을 URL 주소로만 전송해줄 수 있으면 화면을 사용자에게 보여줄 수 있게 됩니다. 그러면 이런 페이지를 보여주기 위한 방법이 필요합니다.

이러한 기능을 해주는 프로그램이 웹서버로 HTML, CSS, JS과 같은 정적인 파일들을 특정 주소로 띄워주는 프로그램으로써 NGINX, Apache를 활용해합니다.

이거 둘중하나 선택하면 되는 문제긴하다. 물론, 최근에는 NGINX를 좀더 많이 사용한다.

최근 많은 사람들이 사용하는 NGINX(엔진엑스)를 통해 React를 구성해보겠습니다.

 

React를 통해 개발 환경 구성하기

우분투 리눅스를 기준으로 설치하는 방식에 대해서 설명드리도록 하겠습니다.

1. NGINX를 다운로드 받는다.

sudo apt-get update
sudo apt-get install nginx

2. REACT 패키지를 설치합니다.

npx create-react-app fe

이전 튜토리얼처럼 가장 기본적인 화면을 실행시켜봅니다.

SpringBoot를 아직 구성하지 않아서 이전 코드를 바탕으로 실행시키지는 않을겁니다. 이전 코드 적용은 다음편에서 적용하는 걸로 하고, 일단 기본 스타일로 Build를 하고 Backend 코드를 구성한뒤에 변경하는 방식으로 만들어보겠습니다.

3. Build한다.

Build를 하기위해서는

 

yarn build 
// OR
npm build

위의 명령어를 활용하면 fe폴더에 Build 폴더가 생깁니다.이파일을 활용하여, NGINX에 재대로 이용할 수 있게 됩니다.

Build를 하게되면, 다음처럼 폴더가 생기게 됩니다.

4. Build된 파일을 NGINX에 연동한다.

NGINX에 Build 되있는 파일을 재대로 연동시키위해서는 다음과 같은 과정을 거쳐야한다.

 

1. NGINX에 설정되있는 기본 설정을 먼저 제거합니다.

rm /etc/nginx/sites-available/default
rm /etc/nginx/sites-enabled/default

2. React 앱에 맞는 설정을 세팅합니다.

vi /etc/nginx/sites-available/fe.conf

를 통해서 설정을 아래와 같이 설정합니다.

server {
  listen 80;
  server_name localhost;
  location / {
    root   /home/build; //build파일 폴더 위치 삽입할 것
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

root /home/build;은 자신의 react build를 통해 만들어진 build 폴더의 주소를 넣어주면 됩니다.

 

5. NGINX를 실행시킵니다.

service nginx start

그러면 웹브라우저에 react-scripts start 없이도 화면이 노출되게 됩니다!

 

마무리하며...

SpringBoot와 구성은 다음 포스팅에서 구현해보도록 하겠습니다.