[Linux] nginx와 React 빌드 및 연동하기

노드 설치하기

React.js를 작동시키리면 런타임인 node가 필수로 있어야됩니다 ! 아래 명령어를 통해 node를 먼저 다운받겠습니다 !

// apt 최신화 작업하기
$ sudo apt-get update
$ sudo apt-get upgrade

// node 설치하기
$ sudo apt install nodejs

// node 버전확인하기
$ node -v

node를 정상적으로 설치했을 경우 npm도 포함되어있다 npm을 별도로 설치하지 않으셔도 됩니다 !

 

React 빌드하기

Ubuntu 환경에서 React를 실행시키기 위해서는 빌드된 파일이 있어야합니다 ! 

배포를 하기 위해 먼저 local의 프로젝트를 root 폴더에서 아래 명령어를 통해 빌드해줍니다.

$ npm run build

진행하였을 경우 root폴더에 build 디렉토리가 생성되었을 것입니다.

filezila를 통해 build된 파일을 /usr/local/my-app 경로에 넣어줍니다 !

 

nginx 설치하기

저는 Ubuntu 환경에서 진행하고 있고 아래 명령어를 통해 어렵지 않게 설치할 수 있습니다 :)

$ sudo apt install　nginx

 

nginx 환경설정하기

nginx가 빌드된 React 파일을 읽어들일 수 있도록 환경설정을 해줘야합니다.

// nginx 디렉토리로 이동하기
$ cd /etc/nginx

 

nginx.conf가 실제 nginx의 설정 파일이고, 해당 파일에서 site-enabled나 conf.d 아래의 파일을 include하여 읽어들입니다.

우선 sites-available 디렉토리 안에서 my-app이라는 설정파일을 생성해주겠습니다.

이후 my-app 파일을 생성한 뒤 site-enabled로 심볼릭 링크를 만들어주면 nginx.conf가 작동할 때 심볼릭 링크를 읽을 수 있습니다.

* 아래의 설정 내용은 기본적인 설정 내용이며, SSL 설정 등 다양한 상황이 생겼을 경우 알맞게 변경해주어야합니다.

$ vi /etc/nginx/sites-available/my-app.conf

server {
	listen 80;
        location / {
        	root /usr/local/my-app/bulid;
                index index.html index.htm;
                try_file $url $url/ index.html;
        }
}

 

my-app.conf 파일을 생성한 뒤 site-enabled 디렉토리에 심볼릭을 만들어줘야합니다 !

$ sudo ln -s /etc/nginx/sites-available/my-app.conf /etc/nginx/sites-enabled/my-app.conf

 

nginx 테스트하기 및 재시작

아래의 명령어를 통해 테스트를 진행할 수 있습니다 !

// 테스트를 수행하고 결과만 요약하여 보여줍니다.
$ sudo nginx -t
// 테스트를 수행하고 incleude가 완ㄹ된 전체 설정파일 구성을 보여줍니다.(길어서 생략)
$ sudo nginx -T

 

모든 설정이 끝났을 경우 nginx를 재시작한 후 브라우저에서 확인하면 끝 !

// nginx 중지
$ systemctl stop nginx
// nginx 시작
$ systemctl start nginx
// nginx 재시작
$ systemtcl restart nginx