[AWS EC2] EC2에 React 앱 + Node.js 서버 배포 3 - Node.js + express

이전 글에서는 EC2에 Nginx를 설치하고 React 앱을 빌드하여 실행시켜 보았다.

 

이번 글에서는 React 앱과 연결되는 서버인 Node.js + express 프로젝트를 EC2에 배포하고 이에 접속하여 실행하는 방법을 알아보고자 한다. 또한, 백엔드 프로젝트에서 접근하는 DB를 AWS RDS로 구성하고 백엔드 프로젝트에서 RDS로 접속하는 방법도 알아보고자 한다.

 

먼저, Node.js + express + sequalize를 통해 만들어진 프로젝트가 git에 올라와 있다고 가정하고 이 프로젝트를 받아 실행해보겠다.

프로젝트 생성은 다음 글을 참고하였다. (https://www.bezkoder.com/react-node-express-postgresql/)

 

1. SSH로 이전에 생성한 EC2에 접속

 

2. git clone 명령을 통해 프로젝트를 다운받기

 

$ git clone REPOSITORY_URL

 

3. 해당 프로젝트로 이동하여 dependency 설치 및 node 명령으로 서버 실행

아래 명령 중 node server는 서버 실행 파일 이름이 server.js이기 때문에 사용한 것이다. 따라서 각자의 프로젝트 실행을 위해 node 실행파일명을 사용하면 된다.

 

$ cd 프로젝트_디렉토리
$ yarn install
$ node server

 

node 서버 실행을 터미널이 꺼지더라도 계속 실행하기 위해 pm2라는 것을 많이 사용하는데 여기서는 생략하였다. 만약 pm2를 사용하고자 한다면 아래 명령어로 설치 후 실행하면 된다.

 

$ npm install -g pm2
$ pm2 start server.js

 

4. React 앱에서 axios 통신으로 접근하는 서버의 URL 확인 (예제에서는 src/http-commom.js 파일)

 

import axios from "axios";

export default axios.create({
    baseURL: "/api",  // 이부분!! /api 로 들어오는 요청을 서버로 넘김
    headers: {
        "Content-Type": "application/json"
    }
})

 

5. Nginx 설정에 proxy_pass 추가

location /api/ 설정을 통해 nginx에 80 포트로 들어오는 요청 중 /api 로 들어오는 요청은 다시 9090 포트의 /api 로 전달한다는 의미다.

 

server {
        listen 80;

        location / {
                root /home/ec2-user/***/build;
                index index.html index.htm;
                try_files $uri $uri/ /index.html;
        }

        # node api reverse proxy
        location /api/ {
                proxy_pass http://localhost:9090/api/;
        }
}

 

9090 포트의 경우 백엔드 프로젝트의 시작 파일인 server.js 에서 열어둔 포트이다.

 

...

// set port, listen for requests
const PORT = process.env.PORT || 9090;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}.`);
});

 

6. 브라우저를 열고 EC2 IP로 접속하여 확인

 

 

지금까지 하나의 EC2에 Nginx + React (프론트엔드)를 실행하고 Node.js + express (백엔드)를 실행하여 서비스하는 방법을 살펴보았다.

 

 

백엔드 프로젝트의 경우 DB와 접속하는 경우가 대부분일 것이다. 따라서 EC2에 올라가 있는 백엔드 프로젝트에서 AWS RDS에 접속하는 방법을 알아보겠다.

 

1. RDS 용 보안 그룹 생성 (인바운드 규칙에서 이전에 생성한 EC2의 보안그룹을 선택)

 

 

2. RDS 생성 (DB는 postgreSQL을 선택했고 나머지 설정은 각자 상황에 맞게 진행하면 될 것 같다.)

 

 

3. 백엔드 프로젝트에서 DB설정

이 테스트의 백엔드 프로젝트에서는 Sequalize라는 ORM 기술을 사용하였다. 따라서 DB 설정은 app/config/config.json 파일에 하였다. 다른 방식을 사용한다고 하더라도 Host, User, Password만 잘 맞춰주면 적절한 통신이 가능할 것이다.

 

{
  "development": {
    "username": "사용자명",
    "password": "패스워드",
    "database": "데이터베이스명",
    "host": "RDS_엔드포인트",
    "dialect": "postgres",
    "pool": {
      "max": 5,
      "min": 0,
      "acquire": 30000,
      "idle": 10000
    }
  },
  "test": {
    ...
  },
  "production": {
    ...
  }
}

 

4. 확인

DB 설정을 완료한 뒤, 백엔드 프로젝트를 다시 실행하면 아래와 같이 DB가 만들어지는 쿼리를 확인할 수 있다. 또한, EC2 IP를 입력하여 실행한 웹 서비스에서 데이터를 조회, 저장, 삭제하는 기능이 정상적으로 동작할 것이다.

 

---

지금까지 구성한 내용을 살펴보면 다음과 같다.

 

 

지금까지 구성한 내용은 간단하게 EC2 위에 웹서버를 동작시키고자 하나의 EC2를 Public subnet에 올려 실행하였다. 다음 글에서는 Front-end 서비스와 Back-end 서비스를 다른 EC2로 분리하고 각각의 보안그룹을 작성한 뒤, 해당 EC2들을 Private subnet으로 옮기는 방법을 순서대로 살펴볼 에정이다...