NginX 배포 경로 설정 및 URL 직접 입력시 페이지 찾을 수 없는 문제

 

◎ NginX 배포

react 로 작업 한 내용을 배포하려고 하는데 NginX 로 배포하는 방법을 많이 사용하는것 같아서 NginX 를 사용하여 배포하려고 설치하였습니다.

 

NginX 설치 방법은 구글에서 검색하면 많이 보실수 있으므로 생략하고 지나가겠습니다.

 

NginX 로 배포하기 위해서는 빌드 파일이 필요합니다.

 

vscode 로 작업한 내용을 빌드하기 위해 터미널에서 아래와 같이 입력합니다.

react run build

잠시 시간이 걸린 후에 build 폴더가 생성 됩니다.

생성된 빌드 폴더를 NginX 에서 배포하는 폴더로 옮기던지 경로를 수정해줘야합니다.

 

NginX 폴더 -> conf 폴더에 nginx.conf 파일에서 수정합니다.

경로를 바꾸고싶다면 44 번째 줄의 root 옆에를 수정.

경로는 그대로 두고 내가 생성한 빌드 파일을 올리고싶다면 nginx 의 html 폴더에 빌드 파일들을 복사 붙여넣기.

 

이렇게 설정하고 브라우저에서 localhost 로 실행하면 잘 실행 되어 나옵니다.

 

◎ 입력한 페이지 찾을 수 없다고 나오는 문제 해결

하지만 브라우저에서 index.html 파일 외에 다른 경로를 요청하면 페이지를 찾을수 없다고 나옵니다.

react 에서  router 를 이용해서 나타날 수 있게 했기 때문에 분명히 존재하는 페이지인데 찾을수 없다고 나오네요.

위와 같은 문제를 해결하기 위해서는 46번째 줄의 내용을 입력해주어야 합니다.

try_files $uri $uri/ /index.html;

이렇게 location 안에 넣고 저장하면 경로를 찾아낼 수 있을겁니다.

 

만약 바로 적용이 안되면 NginX 를 재시작 해주시면 됩니다.

 

재시작은 두 가지방식으로 합니다.

1. 작업 관리자에서 종료 시킨후 NginX.exe 파일 실행

2. cmd 에서 nginx -s reload 를 입력하시면 됩니다.

 

정지 커맨드는 nginx -s stop(강제 종료) 또는 nginx -s quit(안전 종료) 입니다.