Deploy React app with Nginx on Ubuntu
Deploy React app with Nginx on Ubuntu🥕
Written By Jun Park, VCANUS
Ubuntu 환경에 Nginx를 활용하여 React App 배포하기
📌 Build React App
1. Build
$ npm run build # build 폴더 생성
$ cd build # 결과물 확인
$ pwd
/home/vcanus/react-app/build
📌 Ngnix에 React App 배포
1. Nginx 설치
- 설치
$ sudo apt-get install nginx
- 설치 확인
$ nginx -v
nginx version: nginx/1.18.0 (Ubuntu)
2. React App 배포(build 경로 등록)
- 기존 conf 파일 백업
$ sudo cp -r /etc/nginx/sites-available/ /etc/nginx/sites-available-default
$ sudo cp -r /etc/nginx/sites-enabled/ /etc/nginx/sites-enabled-default
$ sudo rm /etc/nginx/sites-available/default
$ sudo rm /etc/nginx/sites-enabled/default
- conf 파일 생성
$ sudo vi /etc/nginx/sites-available/app.conf
- conf에 작성
- listen: 포트 설정
- root: React App build 폴더 경로
- index: redirect 대상
- try_files: 모든 주소에 대한 요청을 react 내부 router에서 처리하기 위해 index.html로 모든 요청을 redirect
server {
listen 8089;
location / {
root /home/vcanus/react-app/build;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
- 심볼릭 링크 생성
$ sudo ln -s /etc/nginx/sites-available/app.conf /etc/nginx/sites-enabled/app.conf
3. Nginx 실행
sudo systemctl stop nginx
sudo systemctl start nginx
sudo systemctl status nginx
❗️ Ubuntu에 Node.js, NPM 설치
1. NVM 설치
- NVM: Version manager for Node.js
- 다른 버전의 node.js를 사용할 때 편리
- 설치: NVM 최신 버전 확인 후 설치
# 작성일 기준 0.37.2
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh
- 확인
$ nvm --version
- 확인 오류 시(nvm: command not found)
$ source ~/.zshrc # zsh
$ source ~/.bashrc # bash
$ . ~/.profile # ksh
2. NVM로 Node.js 설치
- NVM에 등록된 모든 Node.js 버전 확인
$ nvm ls-remote
- 마지막 LTS 버전 확인 및 설치
$ nvm version-remote --lts
v14.16.0
$ nvm install 14.16.0
# 알아서 마지막 LTS 버전 설치
$ nvm install --lts
- 설치 확인
$ node -v
v14.16.0
$ npm -v
6.14.11
Leave a comment