Windows환경에서 nginx로 React 배포 및 프록시 사용

Windows환경에서 nginx로 React 배포 및 프록시 사용 

개발환경

백엔드 : 윈도우, 전자정부프레임워크 3.1 스프링 , 톰캣 8.5

프론트 : 윈도우, 리액트, nginx

 

프론트로 리액트를 띄우고

거기에 필요한 데이터들은 백엔드에 요청해서 가져오는 방식

 

프록시를 사용하면

백엔드나 프론트에서 CORS방지를 위한 작업을 할 필요가 없다

예를들면

컨트롤러마다 @CrossOrigin(origins = "http://localhost:3000") 어노테이션을 붙인다거나

Filter를 설정한다거나 Configuration을 생성해준다거나 할필요없고

프론트에서 데이터 요청시 header에 CORS 관련 내용을 안넣어도 된다.

 

젤 중요한건 Controller에서 URI를 작성할때 데이터 관련 호출은 '/api/' 로  시작해야한다

꼭 api로해야하는건아니고 바꿔도 되지만

나는 api로 하기로 했다

보통 RestController랑 Controller 로 나눠서쓰면 편하긴한데

울회사 프로젝트는 다 Controller로 통합되어있어서 URI로 구분해주기로했

 

0. 리액트 build

리액트 개발이 끝났다면 build를 해야한다

터미널에서 아래 명령어를 치면

build파일이 생성된다

npm run build

npm run build 할때 package.json에서 따로 homepage를 정의안하면 default 값으로 "/" 로 설정되기때문에

package.json에 따로 homepage값을 설정안해줬음

예를들면 이런거

아무튼

생성된 build 파일의 경로를 복사해준다

 

1. nginx설치

아래 링크에서 Stable version을 설치

https://nginx.org/en/download.html

nginx: download

 

2. nginx.conf 설정

conf폴더안에 nginx.conf 메모장으로 열기

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       포트번호; 
        server_name  호스트명;
        location / {
            root   build폴더주소;
            index  index.html index.htm;
			try_files $uri $uri/ /index.html;
			error_page 405 = $uri;
        }
		location ~ /api {
			proxy_pass 백엔드서버주소;
		}
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }
}

 

아래는 예시

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       3000;
        server_name  localhost;
        location / {
            root   C:\myproject\React\build;
            index  index.html index.htm;
			try_files $uri $uri/ /index.html;
			error_page 405 = $uri;
        }
		location ~ /api {
			proxy_pass http://localhost:8080;
		}
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }
}

 

 

세부내용을 다시 설명하자면

 

첫번째 location / 는 

리액트앱을 띄우기위한 정보라고 보면되는데

리액트는 SPA형식으로 index.html만 사용하는데

nginx의 경우 URL에 맞는 html파일을 찾아려고 하는 문제때문에 페이지를 이동하면 404에러가 뜸

그래서 try_files를 통해 해당 uri의 이름의 파일($uri)이나 폴더($uri/)가 없으면 전부 index.html 로 설정해준다

 location / {
            root   C:\myproject\React\build;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
            error_page 405 = $uri;
        }

 

~ /api 이게 좀 중요한데

ajax나 axios로 호출하는 url에 '/api'가 포함되어 있으면 리액트서버 호출하는게 아니라

proxy_pass 에 설정한 주소로 우회해서 호출하겠다는 것

여기에 백엔드 주소를 넣으면 데이터는 벡엔드에서 호출하고

화면단은 리엑트로 띄울수 있다

중요한건 데이터 호출 URI는 설정해둔 '/api'로 시작하게끔 작성해야한다는 점이다.

location ~ /api {
            proxy_pass http://localhost:8080;
}

 

이렇게하면 

백엔드와 프론트를 분리할수잇게된다!