Nginx를 이용해 리액프 프로젝트 배포하기

Node.js 설치

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

설치가 잘 되었는지 확인

nodejs -v 

NVM을 이용해 현재 프로젝트의 Node.js 버전과 맞는 버전 설치

sudo apt-get install build-essential libssl-dev
curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile

Node.js 버전 목록 확인

nvm ls-remote

원하는 버전 선택 및 설치

npm install 12.18.3

node -v
# v12.18.3

Github 설치

git 설치

sudo apt-get install git-core

GitHub 개인 정보 등록

sudo git config --global user.name "본인 계정"
sudo git config --global user.email "본인 메일 주소"
sudo git config --global user.color.ui "auto"

작업 폴더 생성

sudo mkdir /Project-AH
cd /Project-AH

git clone 작업 수행

sudo git clone https://github.com/hypering/AH-Algorithm-Helper-Project

sudo git remote add origin https://github.com/hypering/AH-Algorithm-Helper-Project

sudo git fetch origin

pull 받기

sudo git pull origin master

NginX 설치

NginX 설치

sudo apt-get install nginx

Nginx Default 파일 백업 및 삭제

sudo cp -r /etc/nginx/sites-available/ /etc/nginx/sites-available-origin
sudo cp -r /etc/nginx/sites-enabled/ /etc/nginx/sites-enabled-origin

sudo rm /etc/nginx/sites-available/default
sudo rm /etc/nginx/sites-enabled/default

Nginx 프로젝트 결과물을 배포할 설정 파일 생성

sudo touch /etc/nginx/sites-available/ah.conf

파일 설정

vi /etc/nginx/sites-available/ah.conf
server {
  listen 80;
  location / {
    root   /Project-AH/AH-Algorithm-Helper-Project/fe/build;
    index  index.html index.htm;
    try_files $uri /index.html;
  }
}
wq!

심볼릭 링크 생성

sudo ln -s /etc/nginx/sites-available/ah.conf /etc/nginx/sites-enabled/ah.conf

NginX 동작 재가동

sudo systemctl stop nginx
sudo systemctl start nginx
sudo systemctl status nginx

결과 화면

참고

• https://www.hanumoka.net/2019/12/29/react-20191229-react-nginx-deploy/