[Nginx] NodeJS, React 서버 배포하기

안녕하세요! 오늘은 nginx를 활용해서 Ubuntu 20.04에 NodeJS와 React를 배포해보겠습니다! NodeJS는 pm2로 돌리고 React는 Nginx 설정에서 build 파일을 연결해서 배포하겠습니다.

 

---

0. EC2 인스턴스 준비하기

• 인스턴스 생성

https://hasumang.tistory.com/58

AWS EC2 개념 및 배포하기

 

• 인바운드 규칙 편집 : 기본적인 포트 열어주셔야해요!

https://hasumang.tistory.com/69

 

---

1. root 사용자로 로그인하기

 리눅스는 사용자가 자신이 무엇을 하는지, 어떤 명령 입력이 어떤 결과를 유발할지 알고 있을 것이라는 전제하에 개발되었습니다. 따라서 리눅스 운영체제에는 개발할 때 편리하도록 모든 권한을 부여한 root 사용자가 있습니다.

 리눅스 설정할 때 권한 문제가 발생하지 않도록 root 계정에서 설정하겠습니다.

 

1. root에 접근하기 위한 비밀번호 설정

sudo passwd root

2. root에 로그인

: sudo passwd root에서 설정한 비밀번호 입력

sudo su

---

2. Nginx 설치

1. 업데이트 진행

sudo apt update -y
sudo apt-get upgrade -y

2. nginx 설치

: 설치 후 nginx 파일은 /etc/nginx에 있습니다. 

sudo apt install nginx -y

---

3. Git 설치

프로젝트를 리눅스에 가져오기 위해 git을 설치합니다.

sudo apt install git

---

4. 배포용 사용자 생성

 배포할 때 사용하기 위해 웹 권한을 부여한 사용자를 생성합니다. 

 

1. 사용자 생성

: [사용자이름] 에는 본인이 원하는 사용자 이름을 넣습니다. 

ex) sudo adduser saesoop

sudo adduser [사용자이름]

2. 생성된 사용자에게 www-data 권한 부여

① 사용자 계정 정보 수정

sudo usermod -a -G www-data [사용자이름]

② 사용자 권한 변경

: nano 편집기에서 다음과 같이 변경

sudo nano /etc/passwd

 

변경 -> [사용자이름]:x:33:33:,,,:/var/www/html:/bin/bash 

변경 -> root:x:0:0:root:/var/www/html:/bin/bash

 

---

5. Node, Npm 설치

sudo apt install npm

npm -v, node -v를 통해서 최신 버전이 맞는지 확인하고 최신버전이 아니라면 업데이트를 해야 합니다. 

---

6. 프로젝트 리눅스에 가져오기

1. 위치 변경

cd /var/www

2. git clone

git clone [url]

GitHub 레포지토리에서 다음과 같이 네모 두개 있는 버튼을 눌러서 url을 복사한 다음 git clone 명령어 뒤에 넣어서 실행시킵니다.

프론트랑 백의 레포지토리가 다르기 때문에 두 개(front-react, back-nodejs)를 따로 가져옵니다. 

 

 

 

 

[백엔드] 3. .env 추가

[백엔드] 4. 패키지 설치

npm i

[백엔드] 5. pm2 설치 & 실행

sudo npm install pm2 -g
pm2 start app.js

[프론트엔드] 6. 빌드

npm run build

---

7. Nginx 설정 변경

1. nginx 설정

⬇️명령어

vi /etc/nginx/sites-enabled/default

⬇️변경 내용

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root 빌드 파일 위치 

        index index.html index.php;

        server_name 43.202.64.233;

        location / {
                try_files $uri $uri/ =404;
        }

        location /api {
                proxy_pass http://127.0.0.1:3000;

                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

        location /swagger {
                proxy_pass http://127.0.0.1:3000/api-docs;
        }


}

빌드 파일 위치 ex) /var/www/front/build

---

인스턴스에 명시된 퍼블릭 IP로 접근하면 잘 되는 것을 확인할 수 있다! 백엔드는 postman에서 API 요청해보기!

감사합니다!

 

참고 : https://rading.kr/programming/server/1527/