AWS EC2 배포하기 with React, Express

프로젝트를 만들고 배포 해야했다. heroku를 써볼까 생각했지만 유료화되어 실무에서 자주 사용하는 aws EC2 배포를 시도 해보기로 했다.

 

 

먼저 React와 Express로 간단한 프로젝트를 만든다

 

npm run build로 react를 빌드한 뒤 express에 정적으로 공유하고, express 서버를 EC2 서버 컴퓨터에 배포할 것이다.

먼저 빌드된 react를 express에서 접근가능하게 만들어준다

// js, css등을 express에서 접근가능하게 한다.
app.use(express.static(path.join(__dirname, "/../Client/build")));

 

깃헙에 push한다. (나중에 instance에서 깃헙으로부터 전체 프로젝트를 pull하여 실행할 것이다.)

 

express서버를 EC2에 배포

이제 express서버를 EC2에 배포하자

먼저 AWS에 로그인 한 뒤 EC2 대시보드에 들어가고 region은 서울로 설정해준다. 

그 후 밑의 인스턴스 시작버튼을 눌러준다

 

 

 

인스턴스 이름을 입력하고, OS는 ubuntu를 선택한다.

프리티어 사용가능하면 프리티어 사용가능한 타입을 선택한다.

 

 

키페어 

키페어는 인스턴스에 접속하기 위한 도구이다
키 페어가 없으면 인스턴스에 접속할 수 없다.

 

 

기존의 키페어가 있으면 사용하고, 없다면 새로운 키페어를 만들면 된다

 

 

키페어의 이름을 입력하고 키페어 유형은 RSA를 선택한다.

키 파일 형식은 .pem으로 선택한다. (putty와 함께 사용한다면 .ppk를 선택한다.)

 

 

 

키 생성 버튼을 누르고 키페어 파일이 우리의 컴퓨터에 저장되는데 나는 C판 document에 넣어줬다 (나중에 instance에 접속할 떄 키의 위치가 필요하니 기억해두면 좋다)

 

인스턴스 생성

그 다음으로 네트워크 설정이나 스토리지 구성은 기본으로 선택되어 있는 상태로 두고 인스턴스를 생성해준다.

 

인스턴스 접속

인스턴스가 만들어지면 인스턴스 목록에서 확인할 수 있다.

 

이제 인스턴스에 접속해보자 아래의 버튼을 누르면 

 

 

아래와 같이 친절하게 어떻게 연결하는지 알려준다.

나는 ssh로 접속하기로 했다.

 

 

이제 ssh로 인스턴스에 접속해보자 

위에서 인스턴스에 접속하려면 키페어가 필요하다고 했다.

 

먼저 위에서 기억애둔 키페어가 있는 디렉토리로 이동한다.

 

그 다음 위 설명서의 example ssh -i 로 시작하는 명령어를 입력하여 ec2 instance에 접속한다.

ssh -i "키페어.pem" ubuntu@_______.ap-northeast-2.compute.amazonaws.com

 

 

이런식으로 나오면 ubuntu instance에 접속 성공 한 것이다.

 

인스턴스에서 프로젝트 실행하기

우리 컴퓨터에서 프로젝트를 어떻게 실행하는가? npm, node 설치하고 필요한 모듈들을 npm i 한 뒤 git에서 프로젝트를 내려 받는다.

인스턴스도 하나의 컴퓨터다 다만 remote할 뿐. 똑같이 npm, node, git을 설치하고 프로젝트를 내려 받아준다.

sudo apt update
sudo apt install npm
sudo apt install nodejs
sudo apt install git
git clone 프로젝트.git

 

dir 와 cd 명령어를 통해 프로젝트가 잘 받아졌는지 확인 할 수 있다.

 

자 이제 프로젝트를 실행하고 나의 페이지에 접속해보자

 

문제

하지만 프로젝트는 실행을 했는데 브라우저에서 DNS:port로 접속해도 웹 페이지에 접속 할 수 없었다.

 

pm2를 확인해보면 정상적으로 구동 됐는데 왜 브라우저에서는 접근할 수 없을까?

 

해결

브라우저에서 인스턴스에 접속할 수 있는 Inbound rule를 추가하는 것을 까먹었다.

 

Can't access site on EC2 instance via public ip

 

외부(브라우저)에서 인스턴스에 접속하려면 인스턴스가 허용한 문을 추가해줘야한다

http로 접근하는데 나의 프로젝트 포트는 9090이여서 Custom TCP 타입을 선택한 뒤 포트는 9090 소스는 0.0.0.0/0 을 입력해 추가해줬다.

 

 

 

이제 정상적으로 접근가능하다!