Next.js App 배포하기 - 2. Https 세팅

 

Https 세팅

보안을 위해 https 세팅을 해줘야 합니다.

저 같은 경우 도메인이 원래 있었기 때문에(Flutter Web의 도메인), 도메인 생성, ssl 적용 관련 절차는 생략하고  ELB 연결하는 절차만 기술하도록 하겠습니다.

 

1. 대상그룹

ELB를 생성하기 전에 Target Group이 필요합니다.

 

ec2 목록에서 대상그룹 탭으로 들어가 대상그룹 생성을 합니다.

필요하다면 상태검사 경로를 입력합니다. (해당 경로가 유효한지 주기적으로 확인합니다.)

대상 유형을 인스턴스를 선택하고 ec2 인스턴스를 연결합니다. 포트는 80 포트를 선택합니다.

 

 

2. ELB

이제 ELB를 생성하여 80포트로 들어오는 요청들을 443포트로 리다이렉트 시키고, 443 포트로 들어오는 요청을 방금 생성한 대상그룹으로 리다이렉트 시킵니다.

 

ALP를 선택하여 생성합니다.

가용영역은 저 같은 경우 모든 영역을 선택하였습니다.

보안그룹은 ec2생성 때 사용했던 보안그룹을 선택합니다.

 

 

리스너의 경우 일단은 443포트만 이전에 생성한 대상그룹에 연결합니다.

 

로드밸런서를 생성합니다.

 

 

생성이 완료되면 리스너 추가로 들어가 80포트를 추가하고 다음과 같으 443포트로 리다이렉트 시키도록 지정합니다.

 

이렇게 ELB 세팅도 완료되었습니다.

 

3. 도메인 연결

마지막으로 도메인을 연결합니다. 

(도메인이 없다면 도메인을 발급받고 SSL 설정을 해야합니다.)

 

Route 53의 호스팅 영역으로 들어가 발급받은 도메인의 레코드를 방금 생성한 ELB에 연결합니다.

 

이제 도메인을 통해 배포한 앱에 접근할 수 있고, https가 적용된 것을 확인할 수 있습니다!