사이드 프로젝트 19편 | AWS EC2 인스턴스로 웹 서버 배포하기 -1 (react, putty)

 

react-app(web server)을 배포하기 위하여 vercel이나 netlify와 같은 무료 호스팅 툴을 이용하여 웹 사이트를 배포할 수도 있지만, 트래픽 제한이 있기 때문에 언젠가 AWS 클라우드를 빌려 배포해야되는 순간이 올 것이다. 

 

현재 무료 호스팅 툴인 vercel을 이용하여 미니쿡을 배포해둔 상태이다. 이 웹 서버를 AWS EC2 인스턴스로 배포해보도록 하겠다.

 

전체적인 순서는 다음과 같다.

웹 사이트 배포

1. AWS 가입
2. 인스턴스 생성
3. 인스턴스 접속
4. 깃 클론 후 빌드 (Git & Node)
5. 포트 없애기 (nginx & fowarding)

 

💡 1. AWS 가입

AWS는 가입 1년간 프리티어를 제공한다. 프리티어라고 모두 공짜가 아니라, 일정 유형의 인스턴스에 일정 시간 동안 무료로 제공한다. 

(인스턴스 : 가상 컴퓨터 환경 / AWS에서 컴퓨터를 빌려서, 그 곳에서 서버를 24시간 띄어놓는다고 보면 된다.)

Amazon Web Service 사이트 👉:  https://aws.amazon.com/ko/ 

가입을 했으면 콘솔에 로그인 버튼을 누르고 로그인을 진행한다.

가입 성공

 

💡 2. 인스턴스 생성

1. EC2 접속

AWS에는 수 많은 서비스들이 있다. 콘솔 헤더에 EC2를 검색하고 클릭한다.

 

좌측에 있는 인스턴스를 클릭한다.

 

2. 인스턴스 생성

중간에 있는 인스턴스 시작을 클릭한다

 

다음으로 인스턴스에 사용할 운영체제를 골라야 하는데 대체로 서버에는 리눅스나 우분투를 많이 사용하는 것 같다. 우분투를 선택한다.

 

3. 인스턴스 유형 설정

인스턴스가 중요하다. 사양과 요금과 직접적으로 관계가 있기 때문이다.

자신이 얼마나 큰 서비스를 운영할 것인지 고려하여 선택하면 된다.

얼만큼 해야할 지 모르곘다면, t2.micro(프리티어)를 이용하거나, 낮은 인스턴스를 사용하고 auto scale 하는 방법이 좋을 것이다.

(auto scale : 트래픽이 일정양을 초과하면 자동적으로 추가적인 인스턴스를 이용하는 방법) 

 

4. 키페어 생성

인스턴스에 접근할 수 있게 하는 키 발급하는 것이다.

AWS 컴퓨터 환경에 프라이빗하게 접근할 수 있게 하는 도구이다.

단 이 키 페어는 딱 한번만 발급받을 수 있으니까 백업을 잘 해두자

 

 

5. 네트워크 설정

보안 그룹은 쉽게 말하면 어떤 포트로 열고 어떤 포트로만 들어오게 할 지 보안을 담당하는 곳이다. 보안 그룹 생성을 선택하고 편집을 눌러보자.

 

 

이름은 어떤걸 선택해도 상관 없다. 

 

가장 상위에 있는 SSH 포트는 냅두고 아래와 같이 설정해준다.

http는 기본적으로 80포트를 사용하고 https는 443을 사용한다. 추가적으로 8080포트도 열어주자.

 

6. 스토리지 구성

스토리지는 30기가까지 무료(프리티어)로 사용가능하니 30기가로 꽉 채워주도록 하자.

 

7. 인스턴스 시작 버튼 클릭

 

 

💡 Route53

AWS의 Route53서비스는 도메인을 등록하고 거기에 내 서버 ip를 쉽게 등록할 수 있게 해주는 서비스이다.

Route53에서 도메인 구매하는 방법에 대한 설명

일단 도메인 구매 과정은 생략하도록 한다.

 

💡 3. 인스턴스에 접속 (putty)

윈도우 환경에서 인스턴스에 접속하려면 몇가지 작업이 필요하다

 

1. 탄력적 IP(EIP) 설정하기

인스턴스를 중지하고 다시 실행하면 퍼블릭 IP가 다시 할당되어 변경되게 된다. 때문에 매번 퍼블릭 IP를 변경해줘야 하는 불편함이 생겨 AWS Elastic IP(EIP)를 사용한다.

 

인스턴스 대시보드 좌측 네트워크 및 보안에서 탄력적 IP 를 클릭한다.

 

기본 설정 값으로 IP를 할당받아준다.

 

정상적으로 발급 받으면 아래와 같이 할당된 IPv4 주소를 확인할 수 있다.

이후 오른쪽 마우스를 클릭한 후 탄력적 IP 주소 연결을 클릭한다.

 

아까 생성한 인스턴스와 탄력적 IP 주소를 연결해준다.

 

2. SSH 접속 프로그램 'PUTTY'

 

SSH란?

• SSH(Secure Shell) 는 원격지 호스트 컴퓨터에 접속하기 위해 사용되는 인터넷 프로토콜이다.
• 셸로 원격 접속을 하는 것이므로 기본적으로 CLI 상에서 작업을 하게 된다. 기본 포트는 22번이다.
• (SSH는 암호화 기법을 사용하기 때문에, 통신이 노출된다고 하더라도 이해할 수 없는 암호화된 문자로 보인다.

아래 링크에서 Putty를 다운로드 해보자

https://www.puttygen.com/download-putty

puttygen.exe, putty.exe 설치

 

먼저 puttygen을 실행시키자

 

다 설치 되었으면 실행해서 Load 버튼을 눌러보자

그리고 아까 인스턴스를 만들 때 설정했던 pem 파일을 선택하고 Save private key를 눌러서 저장하자.

그러면 해당 경로에 .ppk 파일이 생성되어있을 것이다.

 

이제 putty를 실행하자

EC2의 public IPv4 address를 Host name에 넣는다

Connection > SSH > Auth > Credentials에 들어가서 Private key file for authentication 에서 browser을 눌러 아까 생성된 .ppk를 추가해주자.

 

 

Connection > SSH > Auth 에서 Allow agent forwarding 선택

 

Connection > Data 에서 username 에다가 AWS 설치할 떄 계정이름을 넣는다. 보통 ubuntn 

 

아래와 같이 작성하고 Open 클릭한다

 

인스턴스 접속 성공.

 

 

 

💡 4. 깃 클론 후 빌드하기 (Git & Node)

이제 깃 폴더를 생성하고 거기에 내 프로젝트를 클론해서 실행할 것이다.

mkdir ~/git
cd ~/git
git clone 내프로젝트 주소

깔끔하게 클론이 완료되었다. 노드를 설치해야 npm 을 사용할 수 있고 프로젝트에 설치된 패키지들을 다운 받을 수 있는데 이 인스턴스에는 노드가 없다

 

직접 설치해주도록 하자.

$ sudo apt-get update
$ sudo apt-get install -y build-essential
$ sudo apt-get install curl
$ curl -fsSL https://deb.nodesource.com/setup_21.x | sudo -E bash - &&\
$ sudo apt-get install -y nodejs

 

커맨드를 한 줄 씩 실행시켜주도록 하자.

만약 다른 버전을 설치하고 싶다면 setup_{version}.x 의 version 부분만 변경해주면 된다

node -v
npm -v

위와 같이 작성했을 때 잘 나오면 설치가 성공적으로 완료된 것이다.

설치 완료된 모습

이제 폴더로 이동해서 빌드하도록 하자

$ cd [폴더명]
$ npm install

// build
$ npm run build

 

 

그런데 여기서 문제가 발생한다.

메모리 부족

 

인스턴스 메모리가 부족해서 빌드 진행이 멈췄다.

 

2편에서 계속

 

 

 

 

 

reference

https://happysisyphe.tistory.com/47

https://velog.io/@cjy0029/AWS-EC2-%ED%94%84%EB%A1%A0%ED%8A%B8-%EB%B0%B0%ED%8F%AC-%EC%9D%B4%EB%A0%87%EA%B2%8C%EB%A7%8C-%ED%95%B4%EB%B3%B4%EC%9E%90