Programming/AWS

[AWS] 웹 프로젝트 배포하기 (1) - EC2 인스턴스 생성

하더코 2025. 3. 6. 12:54

 

 


웹 프로젝트 배포하기 (1) - EC2 인스턴스 생성


 

 

 

1. AWS 접속


 

 

 

무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어

이러한 프리 티어 혜택은 AWS 신규 고객에게만 제공되며 AWS 가입일로부터 12개월 동안 유효합니다. 12개월의 무료 사용 기간이 만료되거나 애플리케이션 사용량이 프리 티어 범위를 초과할 경우

aws.amazon.com

 

root 사용자 계정을 만들고

콘솔에 로그인 을 눌러서 로그인한다.

 

 

 

검색창에 EC2 를 입력한다.

마우스를 올리면 주요 기능에 인스턴스를 볼 수 있다.

인스턴스를 눌러 접속한다.

 

 

 

만약 다른 카테고리를 눌러 접속했다해도

왼쪽 사이드바에 인스턴스 탭이 있다.

 

 

 

해당 화면에서 작업을 시작할 것이다.

 

 

 

2. 인스턴스 생성


 

React(Vite) - SpringBoot JPA 로 제작된 프로젝트를 배포하는 기준으로 작성되었다.

React Create App 으로 개발되었어도 인스턴스 설정 시 포트번호만 다르게 설정하면 된다.

 

 

2-1. 인스턴스 시작하기

 

오른쪽 상단의 인스턴스 시작 버튼을 누른다.

인스턴스를 시작하겠다는 건 서버 전원을 켜겠다는 뜻과 같다.

 

이후부터는 인스턴스 시작 설정의 상단부터 순서대로 작성하겠다.

 

 

2-2. 이름 및 태그 작성

 

먼저 스턴스의 이름을 설정해준다.

본인은 단순하게 프로젝트 이름으로 작성해주었다.

 

 

2-3. 애플리케이션 및 OS 이미지

 

인스턴스 시작하는데 필요한 소프트웨어를 선택하는 곳이다.

Quick Start 에 Ubuntu 를 누른다.

 

Amazion Machine Image(AMI) 은 Ubuntu 를 누르면 자동으로 설정되는 것으로 진행한다.

 

 

업데이트 됨에 따라 내용이 바뀌기도 하던데..

그냥 프리 티어 사용 가능의 첫번째 옵션 누르면 된다. 최신 LTS 버전이니까 ^^b

 

 

2-4. 인스턴스 유형

 

인스턴스 유형은 기본 설정을 따른다.

 

 

2-5. 키 페어(로그인)

 

새 키페어 생성 버튼을 누른다

 

 

 

키 페어 이름을 설정하고

유형은 RSA

프라이빗 키 파일 형식은 .pem 을 이용한다.

 

.pem 은 Linux / macOS 에서 사용되고, .ppk 는 Window 에서 사용되는 키라고 하는데..

CI/CD 구축 없이 단순히 배포만 할 때는 프라이빗 키 파일 형식이 걸림돌이 되지 않았다.

 

그러나 Github Actions 를 이용하는 CI/CD 구축에 해당 프라이빗 키를 사용해야해서

인스턴스의 OS인 Linux 환경에 맞도록 .pem 으로 만들었다.

 

 

2.6 네트워크 설정

AWS EC2 인스턴스에 대한 네트워크 트래픽을 제어하는 설정을 추가하는 과정이다.

HTTP 80 포트를 열어 놓으면, HTTP 요청은 기본적으로 포트 80를 통해 서버로 전달되기 때문에

웹 사이트 방문자들이 HTTP 프로토콜을 통해 서버에 접근할 수 있게 되는 것이다.

 

 

네트워크 설정은 오른쪽 상단의 편집을 눌러 편집 모드로 들어가야 한다.

 

 

하단의 보안 그룹 규칙 추가 버튼을 누른다.

 

 

우리가 수정하는 부분은 다음과 같다.

포트 범위, 유형(80포트를 제외하고는 사용자 지정 TCP 이긴 하다), 소스 유형을 수정할 것이다.

 

 

2.6.1 80 포트 추가

 

먼저 기본적인 HTTP 통신을 위해 80 포트를 허용해주었다.

유형은 HTTP

소스 유형은 위치 무관으로 해준다.

 

유형을 HTTP 로 설정할 경우 포트 범위는 자동으로 80이 된다.

 

 

2.6.2 React(vite) 포트 추가

 

React (vite) 에서 사용하던 포트를 추가해주었다.

우리 프로젝트의 경우 사용자 포트 5174 와 관리자 포트 5173 이 따로 있어 두가지를 추가했다.

 

만약 React (CRA) 을 사용한다면 포트 3000 을 추가하면 될 것이다.

3000 이 아니더라도, 본인이 로컬에서 사용하던 그 포트를 사용하자.

 

서버 포트인 8070 은 추가하지 않았다.

백엔드 서버는 서버 내부에서만 사용되고, 외부에서 접근할 필요가 없다.

API 요청, 웹 애플리케이션의 비즈니스 로직 수행의 역할을 하므로

사용자 브라우저와 직접 연결되어야 하는 React 포트만 추가해주었다.

 

 

2.7 스토리지 구성

 

스토리지 구성에서 1x 8 GiB 로 되어있던 크기를 30 으로 바꿔주었다.

React node-modules 가 생성될 때 용량을 많이 차지하기 때문에 프리 티어 최대 범위로 맞춘 것이다.

 

그 외 도메인 정보 등은 필요하지 않아 넘어가도록 하겠다.

 

이렇게 인스턴스 설정이 완료 되었다.