Node.js와 React.js 배포하기

[ubuntu에서 BE, FE 같이 배포하기]

ubuntu 환경에서 Nginx, pm2로 서비스를 배포했습니다. 서버와 클라이언트를 따로 사용하는 경우 pm2로 서버를 실행하고, Nginx로 클라이언트를 실행시키는 방식입니다.

1. git 설치

sudo apt-get install git

2. nvm 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

3. nvm 활성화

. ~/.nvm/nvm.sh

4. node 설치

nvm install node

5. 설치 확인

node -e "console.log('Running Node.js ' + process.version)"

6. git clone

git clone [repository 주소] -b [브랜치명] --single-branch

7. Nginx 설치

sudo apt-get install nginx

8. Nginx 설정

• Nginx로 React를 배포하는 방법를 참고했습니다.

• 권한 때문에 sudo -i 명령어로 root로 로그인 후 진행

• 설정파일 백업

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

• 기존 파일 삭제

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

• myapp.conf 생성

  cd /etc/nginx/sites-available/
  touch /etc/nginx/sites-available/myapp.conf
  

• 설정하기

  server {
    listen 80;
    location / {
      root   /home/group37/IssueTracker-37/client/build;
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;
    }
  }
  

  • listen 80은 포트 80에 대한 설정을 의미합니다. location /는 URL이 ‘/’가 포함된 경로에 대한 설정을 의미합니다. root는 실행할 파일들의 루트 위치를 의미합니다. 위에서 빌드한 파일 경로를 입력하면 됩니다. index는 인덱스의 파일들을 지정하는 곳이고, 이 파일들 중 꼭 하나는 root 경로 안에 존재해야 합니다. try_files는 어떤 파일을 찾을 때 명시된 순서로 찾으며, 가장 먼저 발견되는 파일을 사용한다는 의미입니다.

• /etc/nginx/sites-available/에 설정 파일을 만들었으면, 아래 명령어로 이 파일의 심볼릭 링크를 /etc/nginx/sites-enabled/에도 만들어주세요. 이름처럼 웹서버가 동작될 때 sites-enabled에 있는 설정파일을 참조합니다.

  ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/myapp.conf
  

• nginx 실행

  systemctl stop nginx
  systemctl start nginx
  

9. PM2 로 서버 실행

설치

npm install pm2 -g

실행

• git clone한 디렉토리로 이동하여 실행

pm2 start ./dist/src/app.js

// 실행 리스트
pm2 list

// 정지
pm2 stop [process name]