[AWS] React 프로젝트 EC2 배포 / 개발 및 배포 시나리오 과정

이전에는 백엔드 Spring 프로젝트만 EC2 로 배포해보았는데 이제는 본격적으로 풀 스택 개발자가 되려면 프론트도 구현해야 하고 프론트 서버를 직접 배포하는 방법도 알아야 될 필요가 있기 때문에 프론트 React 서버를 배포하는 방법을 정리해보도록 하겠습니다.

 

!! 물론 프론트 서버를 배포하는 방법에는 이 방법 말고도 다양한 방법이 있습니다.

 

 

 

우선 AWS EC2 에 접속해서 인스턴스를 생성하기 위해 인스턴스 시작을 눌러줍니다.

 

 

인스턴스 이름, OS 이미지를 정해줍니다.

저는 ububtu 환경으로 지정해주었습니다.

 

 

인스턴스 유형은 우선 가장 작은 micro 유형을 선택해주었습니다.

ubuntu 서버에 접속하기 위해서는 키 페어가 필요한데 없다면 오른쪽의 새로운 키 페어 생성을 눌러줍니다.

보안 그룹도 새로 생성해줍니다.

 

 

키 페어 이름을 아무렇게 지정해준 뒤 유형은 RSA, 키 파일 형식은 .pem 으로 지정합니다.

해당 키 파일은 출력되기 때문에 따로 관리할 폴더를 만들어서 넣어줍니다.

저는 바탕화면에 임의의 폴더를 만들어서 넣어주었습니다.

이 키 파일은 이후 FileZila 를 통해 서버를 연결할 때 필요합니다.

 

 

이제 인스턴스 시작을 눌러 인스턴스를 생성해줍니다.

 

 

EC2 인스턴스가 생성 된것을 볼 수 있으며 로컬이 아닌 서버 배포를 위한 포트 포워딩을 지정하는 인바운드 규칙을 지정해주기 위해 보안 탭의 보안 그룹을 줄러줍니다.

 

 

인바운드 규칙을 눌러 위의 내용대로 규칙을 설정해줍니다.

여기서 중요한 것은 사용자 지정 TCP 의 3000번 포트는 React 로컬 포트 번호로 규칙을 설정한 것이고,

SSH 는 SFTP 서버를 통해 연결하기 위한 22번 포트 설정, 

이후 HTTPS 연결을 위해 443 포트 설정,

HTTP 연결을 위한 80 포트 지정 설정,

그리고 마지막 추가로 8000 번 포트를 임의로 설정해주었습니다.

여기서 8000번 포트를 기억해줍시다.

이 8000번 포트로 서버 배포를 할 것입니다.

 

 

이제 FileZila로 접속해서 방금 만든 EC2 인스턴스를 연결해줍니다.

- 프로토콜 : SFTP

- 호스트 : EC2 인스턴스의 퍼블릭 ip

- 포트 : 22

- 로그온 유형 : 키 파일

- 사용자 : ubuntu

- 키 파일 : 생성한 키 페어 파일을 저장한 경로에 들어가서 해당 키 파일을 불러오기

이후 연결해줍니다.

 

 

이제 git bash로 들어와서 ssh -i '{키 파일이 존재하는 경로/키 파일}' ubuntu@{EC2 퍼블릭 ip} 명령어를 입력하여 만든 EC2 우분투 서버로 접속합니다.

 

 

1. curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
2. sudo apt install nodejs
3. sudo apt-get update
4. sudo apt-get install nodejs

우분투 환경은 현재 아무 것도 설치되어있지 않기 떄문에 배포를 할 수 있는 환경을 만들어 주어야 합니다.

따라서 위의 명령어를 차례대로 입력하여 배포 환경을 만들어 줍니다.

 

 

이제 배포할 프로젝트의 git 레포지토리로 가서 주소를 복사하고 접속한 우분투 서버에 git clone {git 주소} 명령어를 입력하여 클론해줍니다.

 

이 때 private 프로젝트의 레포지토리를 클론 받을 때에는 username과 password를 요구하는데 이때 자신의 git name과 ssh토큰을 입력해줍니다.

 

- git name : git 프로필에 있는 닉네임

- ssh 토큰 : git 프로필 -> settings -> 왼쪽 항목 중에 Developer Settings -> Personal access tokens -> Tokens(classic) -> Generate new token -> 이름 및 만료 기간 설정, 권한 설정 (우선 repo 전체 권한) -> 발급된 토큰

!! 발급된 토큰은 다시 확인할 수 없어서 기억하지 못한다면 새로 다시 그때마다 만들어야합니다.

 

 

정상적으로 clone이 되었다면 생성된 프로젝트 내부로 들어갑니다.

 

 

npm install

React 프로젝트 실행 및 빌드를 위한 npm 을 설치해줍니다.

 

 

npm install express --save

서버를 배포하기 위한 express 라이브러리를 설치해줍니다.

 

 

vi server.js

이제 배포하기 위한 express 설정과 포트 설정, 서버 설정을 해주어야 합니다.

vi server.js 명령어를 실행하여 server.js 파일을 만들고 편집기로 열어줍니다.

 

 

const http = require("http");
const express = require("express");
const path = require("path");

const app = express();

const port = 8000; //인스턴스 생성시 만들었던 포트번호 기입

app.get("/ping", (req, res) => {
  res.send("pong");
});

app.use(express.static(path.join(__dirname, "build")));

app.get("/*", (req, res) => {
  res.set({
    "Cache-Control": "no-cache, no-store, must-revalidate",
    Pragma: "no-cache",
    Date: Date.now()
  });
  res.sendFile(path.join(__dirname, "build", "index.html"));
});

http.createServer(app).listen(port, () => {
  console.log(`app listening at ${port}`);
});

i 를 눌러 작성 모드로 변경하고 위의 설정 내용들을 넣어줍니다.

여기서 port 변수는 아까 EC2 인바운드 규칙을 설정할 떄 서버 배포를 위해 설정해주었던 8000번 포트를 말합니다.

작성이 완료되었으면 :wq! 명령어를 입력하여 강제로 저장하고 나옵니다.

위의 내용대로 서버를 배포하게 되면 build 시 이때까지 만들었던 프로젝트 내용들이 build 라는 경로에 저장이 되어 해당 내용을 기반으로 배포되게 됩니다.

 

 

npm run build

npm run build 명령어를 통해 이때까지 만든 프로젝트 내용들을 build 시켜줍니다.

 

 

node server.js

// 상시 배포 켜두는 명령어
node server.js &

node server.js 명령어를 입력하면 서버 배포가 완료됩니다.

 

 

 

이제 브라우저에 EC2 퍼블릭 ip / 배포한 포트 번호를 입력하면 정상적으로 접속이 됩니다.

 

 

여기까지 EC2 를 사용하여 React 프론트 서버를 배포하는 방법에 대해서 알아보았습니다.

이제 작업 시나리오를 보게 되면,

 

 

(1) 개발을 진행했거나 수정한 내용이 발생했을 경우, 프로젝트 commit 및 push

(2) git bash 를 통해 들어간 ubuntu 서버의 프로젝트 폴더 내부에서 git pull로 해당 내용을 불러와서 반영

(3) 반영이 완료되었으면 npm run build 로 변경한 내용으로 최신 build

(4) node server.js 명령어로 최신 build 내용으로 서버 배포

 

이런 식으로 작업이 진행될 것입니다.