Spring boot, React 배포 (with Nginx)

스프링부트로 만든 백엔드를 jar로 빌드할 때 react 까지 같이 빌드해버리는 방법을 써봤는데

라우팅때문에 그런지 이렇게 해도 저렇게 해도 잘 안됐다. 어떻게 배포는 되더라도 proxy 문제가 생긴다거나...

결국 백이랑 프론트를 따로 배포하기로 함

 

1. 백엔드 빌드

터미널 켜서 프로젝트 최상단 경로에서 gradlew build 하기

(인텔리제이에서 gradle 빌드했는데 계속 snapshot-plain.jar 만 생김. 내가 필요한건 그냥 스냅샷이다.)

그러면 build 폴더 안에 libs > projectName-0.0.1-snapshot.jar 파일이 생김

터미널 켜서

java -jar jar경로/projectName-0.0.1-snapshot.jar  실행되는지 확인하자

 

혹시 main 클래스 없다고 뭐라고 하면

build.gradle에 명시해주자

 

jar {
   manifest {
      attributes 'Main-Class': 'com.gejang.GejangApplication'
   }
}

 

2. 프론트엔드 빌드

터미널 켜서 해당 프론트 경로에서 npm run build 하면 

build 폴더가 생성되고 그 안에 빌드된 파일들이 생성된다.

 

3. Nginx 

Nginx를 설치한다. (현재 버전 1.24.0)

설치하고 nginx가 있는 폴더로 가면 conf 폴더가 있다.

nginx.conf 파일을 열어서 수정한다.

 

server {

  listen    8080

  server_name  localhost;

 

  location / {

    root  html;

    index index.html index.htm;

    try_files $uri $uri/ /index.html;

  }

 

  location /gejang {

    proxy_pass  http://127.0.0.1:8082;

  }

...

}

 

여기서 server 밑의 listen은 포트번호 알아서 설정해주고...

 

location / 

- root html

nginx 폴더에 html 폴더가 있다

여기에 2번 프론트엔드 배포한걸 넣어주거나

아니면 root 뒤에 html 대신 빌드 파일 경로를 넣어준다.

나는 그냥 html에 빌드된거 싹 넣어버림

 

- try_files

url 못찾으면 그냥 index.html 띄우라는 의미다.

리액트 라우팅때문에 웹 새로고침하면 404 에러가 뜨기때문에 설정해줌

localhost:8080/ 에서는 새로고침해도 되지만

라우팅으로 localhost:8080/hello 인 상태에서새로고침하면

얘는 localhost:8080/hello 경로를 찾기때문에 404 뜨는거임

 

 

location /gejang

- proxy_pass

백엔드 서버를 따로 띄웠기 때문에 프론트에서 요청하면 백엔드 서버(다른 포트)로 넘겨줘야 했다

url이 /gejang 으로 시작하는 요청에 대해 해당 ip:port로 연결해줌

여러 서버가 있다면 다 해주면 됨

 

그리고 nginx 구동하고

localhost:8080 으로 접근하면 됨

 

윈도우에서 nginx 실행/중지/재실행

터미널 켜고 nginx 경로로 이동해서

start nginx

nginx -s stop

nginx -s reload

 

 

그런데 설정이 잘 안먹을 때가 있다.

nginx 껐는데도 접근이 된다던지... reload 해도 잘 안되더라

아마 어딘가 캐시같은 찌꺼기가 남아 돌아다니는거같은데... 

급한대로 재부팅해서 해보자