이전 글에 이어서, 이번 블로그는 SSR이 필요한 동적 페이지는 S3가 아닌 LB를 통해 Target Group에 있는 EC2로 가도록 설정하는 법을 배워보자!

LB(Load Balancer)와 CloudFront연결

[AWS]

(1) CloudFront - ID 클릭 - origins - create origin

origin domain : 등록해둔 LB 선택

(2) Behaviors - create behavior

path pattern : SSR이 필요한 페이지  ex) /boards/*
origin and origin groups : 등록해둔 LB 선택
Allowed HTTP methods: GET,HEAD,OPTIONS,PUT...

동적 페이지는 EC2에서 yarn start를 통해 실행이 가능하다.
그러나, 동적 페이지에 접속해보면 브라우저가 계속 새로고침이 되는 오류가 보인다.
=> 정적 파일과 동적 파일의 코드가 달라서 생기는 문제이므로, VS Code에서 yarn build할 때 코드를 통일시켜줘야 한다.

정적페이지, 동적페이지 코드 통일시키기

[VS Code]

(1) next.config.js 파일에 추가해주기

generateBuildId: () => "원하는 이름"

(2) yarn build 다시 실행하기

(3) next 폴더 static에서 build된 파일 이름 확인하기

(4) yarn build:ssg 실행하기

[AWS]

(1) S3 기존 업로드 파일 삭제

(2) out 폴더 속 파일들 재업로드

(3) 파일 전체 선택 - Actions - Make public using ACL

(4) EC2 git pull한 후, yarn build - yarn start 실행