[React] Nginx 배포

목적: React 빌드 결과물을 nginx에 올린다

nginx conf

server {
	listen 8000;
    listen [::]:8000;
    
    location ~ ^/abc {
    	root /opt/web/ROOT/build;
        index index.html
        
        try files $uri $uri/ /index.html;
    }
    
    # reverse proxy
    location /test {
    	if ($request_method = OPTIONS) {
        	add_header Access-Control-Allow-Origin '*';
        	add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
        	return 204;
    	}
        
    	proxy_pass http://[target proxy ip]:[target proxy port]
    }
}

• server 블록: 하나의 웹 사이트를 선언하는데 사용됨
• listen: 포트에 대한 설정
• location: url이 /abc 가 포함된 경로 설정
  (prefix로 설정하거나 정규식으로 매칭할 수 있음)
• root: 실행할 파일들의 루트 위치 (빌드 폴더가 있는 위치)
• index: 인덱스 파일 지정
• try_files: 어떤 파일을 찾을 때 명시되는 순서로 가장 먼저 발견되는 파일 사용한다
• proxy_pass: 일부 물리적 서버에서 들어온 요청을 proxy로 설정한 서버로 포워딩 해줌
  위의 예시로 들면 8000 포트의 test 경로로 들어오게 되면 [target proxy ip]:[target proxy port]로 매핑이 된다

리액트 같은 경우 spa로 동작하기 때문에 라우터를 타지 않고 직접 접근할 경우 라우터는 구현이 되어있더라도 404로 뜨는 경우가 있다
기본적으로 nginx 설정에는 try_files $uri $uri/=404 이런 식으로 설정되어 있어서 그런 것 같다
이를 방지하기 위해 리액트 라우터로 설정한 path를 try_files 설정을 통해 index.html을 바라보게 해야한다

만약 도커 엔진엑스에다 띄우려고 한다면 conf 파일을 볼륨처리 해야한다

nginx:
	container_name: nginx
    image: nginx:1.19
    volumes:
    	- [로컬 nginx conf 파일 위치]:/etc/nginx/conf.d/default.conf