[React] AWS EC2 Ubuntu서버에 리액트 프로젝트 설치하기

1. AWS EC2 우분투 서버 인스턴스 생성

AWS에 접속하셔서 EC2 인스턴스를 새로 생성합니다.
인스턴스 생성 방법과 관련해서는 아래 링크에 자세히 나와있으니
https://teammoca.tistory.com/8

AWS EC2 인스턴스 우분투(Ubuntu 22.04) 서버 무료(프리티어)로 개설하기

이번 포스팅에서는 간단한 이미지로만 보이고 넘어가도록 하겠습니다.
 
아래 이미지 단계의 설명은 이와 같습니다.
   ① 인스턴스명 입력
   ② ubuntu 서버 선택
   ③ 프리티어(무료)버전 t2.micro
   ④ 키페어 생성 (.pem키)
   ⑤ 볼륨 무료 최대30GB 이므로 30GB설정
   ⑥ 인스턴스 시작

 

2. WinSCP(Putty)를 이용하여 Ubuntu 서버에 접속

접속 방법은 아래 포스팅에 자세히 나와있습니다.
https://teammoca.tistory.com/9

WinSCP(putty)를 이용하여 Ubuntu서버에 접속하기 (AWS EC2 인스턴스 Ubuntu)

 
 
아래 이미지 단계의 설명은 이와 같습니다.
   ① WinSCP프로그램 실행 후 새 사이트 클릭
   ② 1번에서 만들었던 인스턴스의 퍼블릭 IPv4주소 ip 입력
   ③ 사용자 이름 : ubuntu
   ④ 비밀번호 입력 대신 만들어두었던 키페어 등록
   ⑤ ④번에서 클릭 후  SSH-인증-개인키 파일 (AWS에서 만들어두었던 .pem키를 .ppk로 변환한 다음 등록
   ⑥ 확인 버튼 후 접속

접속이 정상적으로 되었다면 winSCP창이 아래와 같이 정상적으로 나타나며
우측 상단에 putty 접속 아이콘을 클릭해 putty에 접속도 가능합니다.

 

Putty를 통해 Ubuntu 서버 접속된 모습

 

3. OpenJDK17 설치

jdk는 개발환경 jdk와 동일해야합니다.

// 1. apt-get 업데이트
sudo apt-get update
// 2. apt-get을 통해 openjdk17 설치
sudo apt-get install openjdk-17-jdk
// 3. 설치완료가 되었다면 버전 확인
java -version

openjdk 17 설치된 모습

4. nodeJS 설치

curl을 통해 nodejs의 설치하고자 하는 버전의 url을 가져와서 nodejs를 설치합니다.

// 1. apt-get을 통해 curl 설치
sudo apt-get install curl
// 2. curl을 통해 설치하고자 하는 nodejs 버전 가져오기
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
// 3. nodejs설치
sudo apt-get install -y nodejs

node.js 설치중인 모습

설치가 완료되었다면 버전 확인을 하실 수 있습니다.

node -v

5. npm을 통해 creat-react-app 설치

npm 명령어를 이용해 create-react-app 설치합니다.

npm install -g create-react-app

6. (skip가능) react프로젝트를 설치할 폴더 생성 (기존 개발환경과 맞추기 위함)

저희는 moca3이라는 디렉토리 안에 "front"라는 리엑트 프로젝트를 생성하기 위해 moca3이라는 디렉토리를 생성하였습니다.

mkdir moca3

7. react 프로젝트 생성 (create-react-app 프로젝트명)

moca3이라는 디렉토리 안에서 명령어 create-react-app front 를 입력해 front라는 리엑트 프로젝트를 생성합니다.

// create-react-app [프로젝트명]
create-react-app front

설치가 완료되었다면 moca3/front 내부를 확인해 react 프로젝트가 정상적으로 설치되었는지 확인합니다.
 

8. 리엑트 프로젝트 실행(npm start)

설치가 완료되었다면 리엑트가 들어있는 프로젝트(front)안에서 shell에 npm start를 입력해 react를 실행시켜 봅니다.
리액트는 기본값으로 port 3000번에 설정되어있습니다.

npm start

npm start 입력 후 정상적으로 리엑트 프로젝트 실행된 상태

9. 브라우저를 통해 리엑트 프로젝트 접속

인스턴스에 있는 퍼블릭 IPv4 DNS url을 복사한 다음  포트3000번을 붙여 접속합니다.
url:3000

 
그런데 막상 접속해보면 사이트에 연결할 수 없음 이라고 뜹니다.
이유는 우리가 AWS에 만들어두었던 인스턴스의 방화벽쪽에 3000포트를 열어주지 않았으므로
방화벽에 막혀 접근할 수 없습니다.
그러므로 다시 AWS 인스턴스로 돌아가 3000번 포트를 열어주는 작업이 필요합니다.

 

9. AWS 인스턴스 보안그룹 인바운드 규칙 변경

보안그룹을 하나 생성하거나 기존에 사용하고 있는 보안그룹에 추가하셔도 됩니다.
인스턴스 보안그룹에서 사용자 지정 TCP유형의 포트 3000을 추가합니다.

 
생성한 보안그룹을 인스턴스에 보안그룹으로 등록하기위한 작업이 필요합니다.
인스턴스를 클릭해 우측 상단의 [작업]버튼을 클릭합니다.
그리고 생성해두었던 보안그룹을 등록합니다.

10. 리엑트 프로젝트 접속

인바운드에서 포트 3000번을 열어놓은 보안그룹이 인스턴스에 잘 연결되었다면
다시 접속했을 때 정상적으로 리엑트 프로젝트가 생성된 걸 확인하실 수 있습니다.

9. 브라우저를 통해 리엑트 프로젝트 접속