Ubuntu 18.04.5 LTS 서버에 React(리액트)를 Nginx에 배포하기

리액트는 로컬에서 실행이되면 이제 웹서버에 배포를 해보자. 여기서는 Nginx라는 웹서버에 배포를 해보기로 한다.

 

먼저 Nginx를 설치한다.

참조 : docs.nginx.com/nginx/admin-guide/installing-nginx/installing-nginx-open-source/?_ga=2.25959549.1579693219.1614562598-1938105987.1614562598#prebuilt_ubuntu

NGINX Docs | Installing NGINX Open Source

 

$ sudo apt-get update
$ sudo apt-get install nginx
$ sudo nginx -v
$ sudo nginx

설치하고 "http://서버아이피주소"로 들어가면 다음과 같은 화면이 나오면 정상적으로 설치가 된거다.

 

 

nginx가 설치된 디렉토리는

/etc/nginx 이고

설정 파일은

nginx.conf

 

파일이다. 설정을 보면 다음과 같이 되어있고

 

##
        # Virtual Host Configs
        ##

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

현재는 초기 상태라

/etc/nginx/conf.d/

에는 아무 파일이 없다.

 

그리고 html 파일이 저장되는 디렉토리는 

/etc/nginx/sites-enabled/

안에 파일

default

파일이 다음과 같이 심볼릭 링크가 걸려있다.

default -> /etc/nginx/sites-available/default

 

/etc/nginx/sites-available/default

를 보면 

root /var/www/html;

 /var/www/html이 html을 저장하는 디렉토리인걸 알수 있다. 여기에 리액트프로그램을 빌드해서 업로드하면 된다.

여기서는 root 디렉토리를

 

root /home/ubuntu/www

 

로 변경을 해주겠다.

 

수정하고 나서는 nginx를 다시 시작해주어야한다.

sudo service nginx restart

 

먼저 리액트 프로그램을 빌드를 해보자

package.json 파일을 열면 "script" 항목에서 build를 보면 "react-scripts build" 라고 되어있다. 

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

터미널을 켜고 프로젝트 디렉토리에서 npm run build를 입력하면 build 폴더가 생성이 된고 빌드파일들이 생긴다. build폴더 안의 내용을 서버로 업로드 하면 된다.

 

이전에 작성한 hello world프로그램을 빌드해서 업로드 해보자. 업로드가 되면 다음과 같은 화면을 볼 수 있다.

 

지금은 수동으로 ftp를 이용해서 서버에 업로드를 하였지만, 요즘에는 배포툴을 이용해서 git 레파지토리에 접근해서 바로 배포를 할수 있는 방법을 사용한다.  

 

다음에는 배포툴인 젠킨스를 이용해서 배포를 하는 방법을 한번 알아보겠다.