[TIL 0504] SSR 배포 실습 / 방화벽의 이해 / CloudFront 라우팅 연결

💡 SSR 배포 실습

✅ 인스턴스 배포 파일 생성

스태틱 라우팅으로 제작한 페이지는 직접 주소를 입력하여 접근할 수 있어서 S3에 업로드하여 조회할 수 있으나, 다이나믹 라우팅으로 제작한 페이지는 실제 주소가 존재하지 않아 직접 접근이 불가능하다.

그렇기 때문에 다이나믹 라우팅은 SSR 배포를 통해서 접근이 가능하도록 코드를 작성해야 한다.

실제로 유저에게 렌더되는 화면은 위와 같지만, 실제 데이터는 비어있는 상태이기 때문에 getServerSideProps를 이용하여 데이터를 받아온 후 props를 통하여 렌더될 데이터를 전달해 주어야 한다.

getServerSideProps가 존재한다면 getServerSideProps를 먼저 실행한다.
이후 Props를 통하여 데이터를 받은 다음 유저의 브라우저로 전송되게 된다.

✅ 인스턴스 배포

SSR 배포를 하기 위해 EC2 인스턴스를 생성하고 환경을 세팅한 다음, 프론트엔드 서버를 가동해 보도록 하자!

1. aws 콘솔 상단의 ‘서비스' 또는 검색창에서 EC2를 찾아 접속한 뒤, 인스턴스 시작 버튼을 클릭

2. 인스턴스 구분이 용이하도록 이름에 구입한 도메인을 입력

3. OS 선택 블록에서 프리 티어 사용 가능한 64비트 Amazon Linux인지 확인
   
   

   Amazon Linux 대신 Ubuntu를 사용하면 안되나?
   사용하셔도 무방!
   단, Amazon Linux 외에는 가상 쉘을 이용할 수 없기 때문에 토큰 발급 후 터미널로 로그인하여 인스턴스에 접속하는 번거로움이 있어, 최근에는 Amazon Linux를 이용하는 추세임!

   
   

4. 인스턴스 유형 블록에서 프리 티어 사용 가능한 t2.micro인지 확인한다. 이후 키 페어 선택창을 클릭

   인스턴스에는 다양한 종류가 있고, 아래의 네이밍 규칙을 따른다.

   [종류][세대](a).[등급]
   ex) c5d.9xlarge

   1) 종류
   -t : 가장 저렴하며 가장 많이 사용되는 인스턴스
   -c : CPU에 특화된 인스턴스
   -m : RAM(메모리)에 특화된 인스턴스
   -r : RAM(메모리)에 극히 특화된 인스턴스

   2) 세대
   숫자가 클수록 최신 사양!
   t 4세대와 c, m, r 6세대부터는 CPU가 달라 네이밍에 g가 붙는다 (ex : r6g.xlarge)

   3) 등급
   nano, micro, small, medium, large, xlarge, 등 서버 내 임대 규모에 따라 이름이 붙는다.
   metal 등급은 서버의 모든 자원을 끌어와 사용할 수 있는 특별 등급이다.

   
   

5. 키 페어 없이 계속 진행을 클릭합니다. 가상 쉘 접속 시에는 이 옵션이 가장 편리하다.

6. SSH 트래픽 허용에 체크하고, 위치 무관(0.0.0.0/0)을 선택한다.

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

8. 인스턴스 시작 성공 메세지가 표시되면, 모든 인스턴스 보기 버튼을 클릭해 목록으로 되돌아간다.

9. 인스턴스 id를 클릭

10. 우측 상단의 연결 버튼을 클릭

11. 연결 버튼을 클릭

12. 가상 컴퓨터는 방금 OS 설치가 완료되어, 아직 아무런 세팅이나 모듈이 설치되지 않은 초기 상태이다.
    아래의 명령어를 입력하여 먼저 nodejs 패키지부터 다운로드한다.

curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash

13. 아래의 명령어를 입력하여 nodejs를 설치

sudo yum install -y nodejs

14. yum이 nodejs를 설치하면 node --version 및 npm --version 입력 시 버전이 표시된다.

15. sudo npm install -g yarn 을 입력하여 yarn을 설치

16. yarn을 설치하면 yarn --version 입력 시 버전이 표시된다.

17. sudo yum install git 을 입력하여 설치

18. 패키지 다운로드 승인 요청이 표시되면 y를 입력한 다음 엔터를 눌러 승인

19. git을 설치하면 git --version 입력 시 버전이 표시된다.

20. 로컬에서 미리 github에 클라이언트를 업로드 한 다음, EC2에서 해당 Repo를 clone한다.

21. clone 시 깃허브 로그인을 요구합니다. 내 username (ID,email 아님에 유의!)을 입력하고 엔터를 누르면 아래와 같이 password를 요구하는데, 이 때 비밀번호가 아닌 github 토큰이 필요하다.

22. github 우측 상단의 내 프로필을 클릭

23. settings를 클릭

24. 설정 메뉴 하단의 Developer settings를 클릭

25. 좌측 메뉴에서 Personal access tokens를 클릭

26. Generate new token을 클릭

27. Note에는 관리 시 식별 가능한 별칭이나 메모를 입력

28. 토큰의 유효기간을 설정한다. 원한다면 No expiration을 선택하여 만료되지 않도록 할 수 있다.

29. 토큰 권한을 설정합니다. 원한다면 서버에서 모두 허용할 수 있습니다. Generate token 버튼을 클릭한다.

30. 토큰이 발급되면 복사 버튼을 누른다.

31. 복사한 토큰을 password에 붙여넣는다.

32. 아래와 같이 표시되면 clone에 성공한 것

33. CLI 명령어를 이용하여 원하는 디렉토리로 이동

34. package.json이 위치한 디렉토리에서 미리 지정해 둔 SSR 빌드 스크립트 명령어를 입력한다.

35. 인스턴스에 설치된 yarn이 SSR 빌드를 시작한다. 이 과정에는 시간이 다소 소요된다.

36. 아래와 같은 화면이 표시되면 빌드에 성공한 것

37. yarn start를 입력하여 프론트엔드 서버를 가동한다.

    
    

✅ 인스턴스 연결 허용

인스턴스에서 프론트엔드 서버 가동을 완료하였지만, 아직 외부 접근이 가능하도록 설정하지 않았ek.
보안 그룹 설정을 통해 외부 연결을 허용해 보자

1. EC2 인스턴스 목록에서 설정할 인스턴스 ID를 클릭
2. 보안 탭을 클릭
3. 보안 그룹 링크를 클릭
4. 인바운드 규칙 편집 버튼을 클릭
5. 규칙 추가 버튼을 클릭
6. 유형을 사용자 지정 TCP로 선택하고, 포트 범위에 3000을 입력
7. 소스에서 0.0.0.0/0을 선택한다. 선택박스가 자동으로 Anywhere로 변경된다.
8. 규칙 저장 버튼을 클릭
9. EC2 인스턴스 목록에서 인스턴스 ID를 클릭
10. 퍼블릭 IPv4 주소 및 퍼블릭 IPv4 DNS를 통해 모두 접속할 수 있다.

💡 방화벽의 이해

서버는 띄웠지만, 아직 접속할 수는 없다. 방화벽이 있기 때문!

✅ 방화벽 여는 작업

1. GCP 콘솔에서 VPC 네트워크 > 방화벽에 들어간다.
2. 방화벽 규칙 만들기를 클릭
3. 이름과 똑같이 대상 태그를 만들어준다.
4. 태그는 스티커와 비슷함.
   만들어둔 VM 인스턴스에 이 스티커(태그)를 붙여주면 방화벽 규칙이 적용된다.
5. 소스 IP 범위를 입력하면, 누구든지 접속 가능하다는 뜻이다.
6. 포트를 지정하면 3000번 포트에 누구든지 접속할 수 있다.
7. 만들기

💡 로드 밸런서 연결

SSR 배포 시 트래픽이 몰려 프론트엔드 서버에 과부하가 발생하는 상황을 방지하기 위해 자동으로 부하 분산 처리를 도와주는 로드밸런서를 연결하여 안정적인 클라이언트 배포를 하여야 한다.

✅ 로드 밸런서 연결 방법

1. EC2 메뉴 좌측 하단의 로드밸런서를 클릭
2. 로드 밸런서 생성 버튼을 클릭
3. Application Load Balancer의 Create 버튼을 클릭
4. 이름 칸에는 구분이 용이하도록 구입한 도메인-lb 를 입력
5. 로드밸런서 설정 시에는 EC2 인스턴스의 가용 영역을 확인해야 한다. 새 창으로 인스턴스 목록을 띄워 가용 영역을 확인한다.
6. 로드밸런서 설정 창으로 돌아와서, Network mapping 블럭을 찾는다. 이 때 미리 확인한 인스턴스의 가용 영역을 선택한다.
7. 이후 아무 영역이나 추가로 선택한다. (최소 2개의 영역이 선택되어 있어야 한다)
8. Listeners and routing 블럭에서 Create target group 링크를 클릭한다.
9. 인스턴스를 선택하고, 타겟 그룹 이름에 구분이 용이하도록 구입한 도메인-lb-target-group을 입력한다.
10. 포트를 3000으로 변경한다.
11. Next 버튼을 클릭
12. 타겟을 등록할 인스턴스를 선택한다.
13. Include as pending below 버튼을 클릭한다.
14. Create target group 버튼을 클릭
15. 아래와 같이 타겟 그룹 리스트에 새로운 그룹이 추가된 것을 확인할 수 있다.
16. 원래 창으로 돌아와서 새로고침 버튼을 클릭
17. 선택창을 클릭하여 생성한 타겟 그룹을 선택
18. Create load balancer 버튼을 클릭
19. View load balancer를 클릭하여 로드밸런서 목록을 확인
20. 생성 후 초기 세팅을 위한 시간이 필요히다. 상태가 프로비저닝 중 일 때에는 작동하지 않는다.
21. 상태가 활성으로 변경되면 로드밸런서 작동이 시작된다. 외부 접근을 허용하기 위해 보안 그룹 링크를 클릭한다.
22. 보안 그룹 목록에서 로드밸런서에 연결되어 있는 보안 그룹 ID를 찾아 클릭
23. 인바운드 규칙 편집 버튼을 클릭
24. 규칙 추가 버튼을 클릭
25. 유형을 HTTP로 설정
26. 소스를 0.0.0.0/0 으로 설정
27. 규칙 저장 버튼을 클릭
28. 보안 그룹 설정이 완료되면, 로드밸런서의 DNS 주소를 복사하여 접속할 수 있다.

→ 로드밸런서 연결을 해줌으로서 SSR 배포시 안정적인 클라이언트 배포를 위한 부하분산처리가 완료되었다 .

여기까지 S3에 파일을 올려 정적 파일 SSG 배포와, EC2를 활용하여 서버에 접근해 동적 파일 SSR 배포까지 각각 완료하였다.

이제는 요청이 들어올때마다 SSR과 SSG방식을 분기처리 해주어 각각 다른쪽으로 요청을 보내주어야 한다. (SSR + SSG Hybrid) 다음 시간에는 이를 위해 분기처리를 위한 CloudFront 라우팅을 연결하자!

💡 CloudFront 라우팅 연결

CloudFront와 로드밸런서를 연결하여, SSG + SSR 하이브리드 배포를 완성해보자!

1. 기존에 S3과 연결했던 CloudFront에 로드밸런서 연결을 추가해야 한다. CloudFront ID를 클릭
2. ‘원본'탭에서 원본 생성 버튼을 클릭
3. 원본 도메인 선택창을 클릭
4. 원본 도메인에 로드밸런서를 선택하여 지정
5. 프로토콜 > HTTP만 해당을 선택
6. 원본 생성 버튼을 클릭하면, 로드밸런서와 기본 연결이 완료된다.
7. 특정 도메인 접근 시 로드밸런서로 라우팅되도록 설정한다. ‘동작'탭에서 동작 생성 버튼을 클릭한다.
8. 경로 패턴에 /boards/* 를 입력하고, 원본 및 원본 그룹은 로드밸런서를 선택한다.
9. 뷰어 프로토콜 정책과 허용된 HTTP 방법을 아래와 같이 선택한다.
10. 동작 생성 버튼을 클릭
11. 동작 목록에서 아래와 같이 S3과 로드밸런서로 모두 동작이 연결되는 지 확인한다.

이제 SSG + SSR 하이브리드 배포가 완료되었다.

S3에 업로드된 빌드 파일을 CloudFront를 이용하여 캐싱하여 빠른 속도로 최초 화면을 표시한 다음, 나머지 페이지와 데이터들은 SSR 방식으로 전달한다. 그렇기 때문에 사용자는 빠르고 역동적인 경험이 가능하다.

또한, 잦은 변경이 필요하지 않은 파일(기본 레이아웃 및 디자인 등)들을 S3로 분리하여 EC2 인스턴스에 대한 부하를 줄일 수 있으며, 이를 통해 안정적인 서비스 제공 및 비용 절감 효과를 도모할 수 있다.