리액트 스프링부트 연동[2] (ec2 실서버에서 nginx로 리액트 배포 및 스프링 부트 연동)

[이전포스팅]

https://developer111.tistory.com/77?category=873164 

리액트 스프링부트 연동[1](라우터 설정 및 서버정보 리턴 받기)

 

안녕하세요.

 

이번 글은 실서버에서 nginx를 통해 리액트 프로젝트를 배포하고 was에 있는 서버 프로젝트인 spring 프로젝트를 연동하는 것에 대해 알아보겠습니다.

 

ec2 인스턴스의 셋팅이 모두 되어있고, 리액트 프로젝트, 스프링부트 프로젝트가 모두 ec2에 설치되어있다고 가정하고

 

리액트와 스프링부트 프로젝트를 운영서버에서 연동 해보겠습니다.

 

목차

1. ec2에 nginx 설치
2. nginx 설정(리버스 프록시 포함)
3. nginx 실행
4. (*부가) ec2 재시작시 nginx 자동실행 스크립트 작성

 

 

1. ec2에 nginx 설치

 

웹서버는 nginx를 선택하였기 때문에 ec2에 nginx를 설치하겠습니다.

 

sudo amazon-linux-extras install nginx1.12

제 ec2 os 버전은 amazon linux2이기 때문에 위 명령어를 사용했습니다.

 

설치 완료 후 nginx를 실행하고

sudo systemctl start nginx

 

아래 명령어를 사용하면 nginx가 정상적으로 설치되고 실행되는지 확인할 수 있습니다.

ps -ef | grep nginx

 

위와 같이 master와 worker로 process가 실행 중이면 정상입니다.

 

 

 

2. nginx 설정(리버스 포록시 포함)

 

스프링 부트와 바로 연동될 수 있게 리버스 프록시 설정을 포함하여 nginx를 설정하겠습니다.

 

nginx.conf파일을 vi편집기로 열고

sudo vi /etc/nginx/nginx.conf

 

아래와 같이 include /etc/nginx/sites-enabled/*.conf;를 추가합니다.

http {
	#블라블라
	include /etc/nginx/conf.d/*.conf;			#기존에 있는 내용
	include /etc/nginx/sites-enabled/*.conf;	# 추가한 내용
	#블라블라
}

 

우리는 /etc/nginx/sites-enabled/ 경로에 nginx에서 돌아갈 리액트 프로젝트의 설정을 하겠습니다.

 

설정파일이 들어갈 폴더를 아래 명령어로 생성하고

sudo mkdir /etc/nginx/sites-available
sudo mkdir /etc/nginx/sites-enabled

 

아래와 같이 sites-available 밑에 리액트 프로젝트 이름으로 설정 파일을 만들겠습니다.

sudo vi /etc/nginx/sites-available/[리액트 프로젝트 이름].conf

 

그리고 나서 아래 내용으로 설정 파일을 작성했습니다.

server {
listen 3000;
        location / {
                root [리액트 프로젝트 루트 폴더 절대경로]/build;
                index index.html index.htm;
                try_files $uri $uri/ /index.html;
        }

        location ^~ /wasApi {
                proxy_pass http://localhost:8080;
        }
}

 

위 내용에 대해 설명드리면 listen 3000은 3000포트로 요청 되는 접속을 nginx가 처리하겠다는 것입니다.

 

제 ec2 설정에서 http -> https -> 3000, https -> 3000으로 이미지 설정되어있기 때문에

 

저는 listen 3000으로 설정하였습니다. 

 

elb에 포트 리다이렉트 설정 안 하신 분이나 다른 포트 쓰시는 분은 자신의 프로젝트 포트나 설정에 맞게

 

listen 포트 설정하시면 됩니다.

 

try_files는 uri처리를 어떤 파일에서 할지 정하는 것입니다. 

 

리액트의 경우 spa로 모든 페이지를 index.html이 처리하니 index.html로 설정했습니다.

 

참고로 try_files 제대로 설정하지 않고 루트 경로가 아닌 곳에서 새로고침하니 빈 화면이 계속 떳습니다.

 

비슷한 에러 뜨시는 분들 많은 것 같은데 새로고침시 빈화면 뜨는 경우 try_files 설정을 만지면 될 것 같습니다.

 

그리고 두번째 loaction 설정에서 ^~ /wasApi 부분은 /wasApi로 시작하는 uri 요청이 들어오면 

 

같은 서버내에 존재하는 was 프로젝트인 스프링부트 프로젝트 서버로 요청을 넘기겠다는 것입니다. 

 

스프링부트의 포트가 8080이기에 proxy_pass를 http://localhost:8080 으로 설정했습니다.

(리버스 프록시 설정)

 

/wasApi는 자신의 was로 요청되는 api경로를 지정하시면 됩니다.

 

참고로 저는 로컬에서 nginx 없이 개발 할 때, 위와 같은 설정 없이 웹서버와 was 연결이 잘 되어

 

공통된 api 경로를 설정하지 않았지만 스프링 부트의 application.properties 파일에 아래와 같이

 

context-path를 /wasApi로 설정하여 공통 되게 처리하였습니다.

server.servlet.context-path=/wasApi

(물론 리액트 프로젝트에서 was 호출할 때에서 /wasApi가 반드시 들어가야합니다.)

 

 

3. nginx 실행

 

자 이제, 설정파일을 모두 만들었다면 /sties-enabled 폴더 밑에 심볼링 링크(윈도의 바로가기와 같은 기능)를 걸어

 

방금 만든 설정파일을 위치시키겠습니다.

sudo ln -s /etc/nginx/sites-available/[프로젝트 이름].conf /etc/nginx/sites-enabled/[프로젝트 이름].conf

 

그런 다음 nginx를 재시작하면 정상적으로 web이 배포됨을 확인할 수 있습니다.

sudo systemctl stop nginx
sudo systemctl start nginx

 

 

4. (*부가) ec2 재시작시 nginx 자동실행 스크립트 작성

 

아래 명령어로 vi 편집기 열어주고

sudo vi /etc/rc.d/rc.local

 

맨 마지막줄에 아래 nginx 재시작 명령어 넣어주면 ec2 인스턴스 재시작시 nginx 자동 실행 됩니다.

sudo systemctl stop nginx
sudo systemctl start nginx

실행 권한 허용

sudo chmod +x /etc/rc.d/rc.local

서비스 상태 확인

sudo systemctl status rc-local.service

 

spring boot 재시작 명령어도 넣어준다면 web서버와 was 모두 ec2 인스턴스 재시작시 자동 실행 시킬 수 있습니다. 

 

 

 

 

참고. 리버스 프록시란??

 

리버스 프록시는 같은 서버내에(같은 내부망) 존재하는 요청을 포워딩 하는 개념인 것 같습니다.

 

사용자가 요청을 하거나 프로젝트 내에서 요청 경로를 지정하면 위에서 설정한 nginx 리버스 프록시 설정처럼

 

경로에 따라 같은 서버 내에 존재하는 web서버가 처리할 지, was가 처리할 지 중간 매개체인 nginx가

 

포워딩 할 수 있는 개념을 리버스 프록시의 개념으로 이해하면 될 것 같습니다.