AWS EC2 인스턴스로 웹 서버 배포하기 (React)

과금될까바 늘 미뤄두었던 AWS EC2 배포를 드디어 해보고 잊지 않기 위해 블로그에 남기게 되었다.

 

목적

나의 경우, 간단한 React 프로젝트를 웹 서버로 배포하기 위해 AWS 가상 서버 서비스를 사용하는 것으로 온전히 프론트 배포에만 집중되어 있다. 향후, 백엔드 배포도 기회가 된다면 해보면서 다양한 경험을 쌓을 수 있으면 좋겠다.

 

AWS 는 가입 1년 간 프리티어를 제공합니다. 프리티어라고 모두 무료가 아닙니다. 일정 유형의 인스턴스에서 일정 시간 동안 무료로 제공한다고 하니... 모두모두 과금되지 않도록 주의합시다! (😢무서워요)

 

---

AWS 가입을 전제하고 기록하겠습니다.

 

1. EC2 구매

1. 검색 창에 EC2라고 검색하고 노란색 '인스턴스 시작' 버튼을 클릭한다.

 

2. 이름은 자유롭게 입력하고 하단에 본인의 필요에 맞는 OS를 선택한다. 필자의 경우에는 Ubuntu 22.04. LTS 를 선택했다.

 

3. t2.micro 유형을 선택한다. (해당 인스턴스가 1년간(?) 무료인 것으로 알고 있다. 정책은 변화하니 정확한 것은 공홈에서 확인하자..!)

 

4. '새 키 페어 생성' 버튼을 클릭해 key 를 생성한다.

 

5. 나머지 설정들을 체크한 후, '인스턴스 시작'을 클릭하여 인스턴스를 생성한다!

 

---

2. 인스턴스 연결

1. 생성된 인스턴스를 연결하기 위해 '인스턴스' 를 확인합니다. 만들어진 인스턴스를 선택하고 '연결' 버튼을 클릭합니다.

 

2. 터미널을 열고 키 페어 파일이 위치한 디렉토리로 이동합니다. 아래 명령어를 입력해 키 파일 권한을 변경합니다.

chmod 400 "slowTodo.pem"

 

그리고 자신의 퍼블릭 DNS를 사용해 인스턴스에 연결합니다.

ssh -i "slowTodo.pem" ubuntu@자신의 퍼블릭 DNS

 

명령어 입력 후, 아래의 질문이 있을 수도 있다. 그런 경우 'yes' 라고 입력한다.

성공적으로  AWS 컴퓨터 환경으로 연결되었다. 

 

---

3. Git 연동 및 배포하기

1. 이제 react 앱을 배포하기 위해 npm을 설치해야 한다. 아래 명령어를 통해 설치한다.

sudo apt-get install npm

 

git 도 설치해준다.

sudo apt-get install npm

# git 레퍼지토리를 클론해준다.
git clone git의 SSH 주소

 

npm 으로 애플리케이션을 빌드한다.

npm install
npm run build

 

이렇게 빌드가 되어 배포될 준비가 되었다는 글이 뜬다. 

 

2. serve 명령어를 설치하고 위의 명령어를 쳐준다.

sudo npm i -g serve
serve -s build

 

그리고 본인의 퍼블릭 ip주소:3000 로 들어가주면? 잘들어가질 것이다!

 

3. 안들어가진다면.. 3000 포트를 열어놨는지 확인하자. aws ec2 인스턴스에서 인바운드 규칙 편집을 클릭한다.

 

4. HTTP 유형의 인바운드 규칙이 아래와 같이 설정되어 있는지 확인하자. 80 포트에 대해 열어야 한다.

 

5. 다시 접속해보기! 잘되었다!

http://내 public 아이피:3000

 

---

4. 포트 포워딩

현재는 리액트의 포트번호인 3000번대로 접속되는 것을 볼 수 있다. 

http 기본포트인 80 포트로 (즉, 포트번호 입력 없이) 브라우저 접속하기 위해선 80 포트로 오는 요청을 3000 요청으로 전달하는 포트 포워딩을 사용해야 합니다.

 

1. 80번 포트로 오는 요청을 3000 포트로 리다이렉트하겠다는 명령어를 입력합니다.

sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000

 

2. 서비스를 재시작해봅니다.

 

3.  아래 url 로 접속되는지 확인!

http://내 public 아이피

 

---

 

5.  SSH 연결을 끊어도 서버 동작하게 하기 : nohup 

여기까지 잘 서버를 배포했지만, 연결했던 SSH 쉘을 닫아버리면 배포 서버로 접속이 안된다! ㅠ 

접속을 끊어버려도 서버가 계속 동작하게 하려면 'nohup' 명령어를 이용하면 된다.

 

nohup

사용자의 세션이 아닌 운영체제가 제공하는 백그라운드 공간에서 프로세스를 띄운다. 때문에 사용자의 세션이 종료되어도 실행시킨 프로세스가 종료되지 않는다.

 

1. 명령어를 입력한다.

nohup serve -s build & # nohup 백그라운드에서 실행할 명령어 &

 

2. SSH 콘솔창을 끄고 브라우저에 접속해본다. 

http://내 public 아이피

 

 

참조 명령어

* 실행중인 프로세스 확인하는 명령어

ps -ef | grep serve # 모든 프로세스의 출력값을 grep을 이용하여 serve 포함된 라인들을 출력

 

* 실행중인 특정 프로세스 강제 종료하기

kill -9 [pid값]

 

 

---

배운 점

EC2 인스턴스를 구매하고 가상 서버 환경을 설정하는 과정들이 생소한 것들이라 쫌 어려운 부분들이 많았다. 클라우트 컴퓨팅 서비스를 처음 이용해보면서 두려움이 많았지만 많이 극복할 수 있었던 것 같다. 

개발자에게 배포는 중요한 역량이라고 생각한다. 내가 만든 서비스를 나만 보게 되면 큰 의미를 갖기 어렵다고 생각하기 때문이다. 배포를 해보고 다양한 사람들에게 공유해보는 경험이 중요하다고 생각해 배포를 늘 꼭 해보고 싶었다. 아직 초보 단계이지만, 원리를 익혀가며 학습한다면 성장의 폭은 커질 것이라고 생각한다!