혼자 해보는 리액트 배포: Local Server (1)

0. 방법

컨테이너 혹은 서버를 새로 생성한 것 아님! 젠킨스도 사용 안함!! 

 

naver server에 있는 리눅스에 nginx 설치

리눅스에 react 프로젝트 build 폴더 위치

nginx가 build 폴더 찾아가도 설정

 

즉, 서버 로컬을 통해 배포함. 

 

 

1. nginx 설치

 

 

 

2. nginx 메인 환경 설정 파일 확인

메인 환경 설정 파일

• /etc/nginx/nginx.conf

 

 

메인 환경 설정 파일에 nginx가 읽어올 수 있는 환경 설정 파일에 대한 정보 확인 

아래 경로로 설정되어 있음.

include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;

 

 

3. 환경 설정

1. 리액트 프로젝트의 build 폴더를 원하는 위치에 붙여넣기

로컬 PC에서 npm run build 를 통해서 build 폴더 생성

생성된 build 폴더를 리눅스 PC에 붙여넣기

 

2. build 폴더를 환경설정 파일에 경로 설정 

temp.conf 파일 열기

 

build 폴더 경로 지정

 

 

그 이후 접속해보면 잘 나옴!

 

 

* 실패 이유

1. nginx 설치 & build 폴더

처음에 시도할 때는 젠킨스에 build만 한 상태였다. (nginx 설치 안함)

nginx 설치를 안 해서 아예 접속하지 못하였다.

 

또한, build 폴더를 로컬에서는 만들었지만 리눅스에는 넣어두지 않았다.

따라서 리눅스에서 nginx가 build 폴더에 접근하지 못하니, 실행이 안된 것이다.

 

2. /root/build

root 폴더는 관리자 권한이 있어야 접근할 수 있는 폴더

nginx는 사용자 권한을 가지고 있어, root 폴더에는 애초에 접근할 수 없다.

따라서 build 폴더를 다른 곳에 위치하여야 한다.

여기서 나는 home 폴더에 위치하였다.  

 

 

* Tool

xshell 사용

https://www.netsarang.com/ko/xshell-download/

Xshell 다운로드 - NetSarang Website