
getServerSideProps를 이용해 작성한 코드를 깃허브에 푸시해둔다.

인스턴스를 배포하는 EC2 메뉴에 들어가서 Launch Instance 버튼을 클릭한다.

인스턴스를 구분하기 쉽게 도메인 이름으로 인스턴스 명을 작성한다.

OS는 프리 티어로 사용 가능한 Amazon Linux 2 AMI를 선택한다.

t2.micro를 확인하고


위와 같이 설정한 후

Lauch instance를 클릭한다.
인스턴스 목록에서 생성한 인스턴스를 클릭해 상세화면으로 들어간다.

상단에 연결 버튼을 클릭,

다음 화면에서도 연결 버튼을 클릭한다.

터미널 창이 뜨며 정상적으로 연결된 것을 확인할 수 있다.
현재 아무것도 설치되지 않은 초기 상태이므로 node.js를 설치해준다.
sudo yum install https://rpm.nodesource.com/pub_18.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y
sudo yum install nodejs -y --setopt=nodesource-nodejs.module_hotfixes=1
설치가 완료되면 yarn도 설치해준다.
sudo npm install -g yarn
sudo yum install git
git도 설치해준다.
미리 업로드해둔 깃 레포를 clone해온다.
터미널에서 package.json이 위치한 디렉토리로 이동해서 SSR 빌드 명령어를 입력한다.
yarn install
yarn build
빌드 성공 후 서버를 가동시킨다.
yarn start
인스턴스 목록에서 해당 인스턴스 ID를 클릭해 상세 화면으로 넘어간다.

하단의 보안탭에서 보안 그룹을 선택한다.

인바운드 규칙 편집 버튼을 클릭하고

위와 같이 규칙을 추가하고 저장한다.

퍼플릭 IPv4 주소와 퍼블릭 IPv4 DNS를 통해 모두 접속할 수 있게 됐다.

EC2 메뉴 하단의 로드 밸런서 설정으로 들어간다.

Create load balancer 버튼을 클릭한다.

Application Load Balancer를 생성한다.

로드 밸런서 명은 구분이 쉽도록 도메인명 뒤에 -lb를 붙여 기입한다.

인스턴스 목록을 새창으로 띄워 가용 영역을 확인한다.

가용 영역을 선택하고 추가로 아무 영역을 선택한다(최소 2개의 영역 선택되어야함).

Listeners and routing 블럭에서 Create target group 링크를 클릭한다.

인스턴스를 클릭하고 타겟 그룹 이름은 도메인-lb-target-group으로 입력한다.

포트는 80에서 3000으로 변경하고 다음 버튼을 클릭한다.

타겟을 등록할 인스턴스를 선택하고 Include as pending below 버튼을 클릭한다.

Review targets 목록을 확인하고 Create target group 버튼을 클릭한다.

타겟 그룹 리스트에서 새로운 그룹이 추가된 것을 확인한다.
원래 창으로 돌아와서 Listeners and routing 영역에서 새로고침 버튼을 클릭한다.

선택창을 클릭해 생성한 타겟 그룹을 선택한다.
Create load balancer 버튼을 클릭해 로드 밸런서를 생성한다.

로드 밸런서 목록에서 생성된 로드 밸런서를 확인한다. 상태가 Provisioning 중에는 동작하지 않는다.

활성화가 되는 것을 확인하고 아래 탭에서 보안 탭을 클릭한다.

보안그룹 ID를 클릭한다.

Edit Inbound rules 버튼을 클릭한다.

위와 같이 HTTP 규칙을 추가한 후 저장한다.

보안 그룹 설정이 완료되면 로드밸런서의 DNS 주소로 접속할 수 있다.
마지막으로 CloudFront와 S3, ELB를 연결해 SSG + SSR 하이브리드 배포를 완성할 수 있다.

기존에 S3과 연결했던 CloudFront에 ELB를 연결하기 위해 CloudFront 메뉴에서 생성했던 배포를 클릭한다.

Origins(원본) 탭에서 Create origin(원본 생성) 버튼을 클릭한다.

Origin domain에서 생성했던 로드 밸런서를 선택하고 프로토콜은 HTTP only를 선택한다.

생성 후 목록에서 Behaviors(동작) 탭을 클릭하고 Create behavior 버튼을 클릭한다.

로드밸런서로 분기시킬 경로를 입력하고 origin and origin groups에는 로드밸런서를 선택한다. 위와 같이 선택하고 동작 생성 완료한다.
이로써 SSR + SSG 하이브리드 배포가 완료되었다.