Next.js SSG 빌드 및 AWS S3 배포

ssummer·2023년 9월 16일

Today I Learned with Inflearn

목록 보기

26/28

배포를 위해 도메인을 구매했다. 가비아에서 500원에 구매 🪙

🔗 https://www.gabia.com/

SSG 빌드

package.json에 SSG 빌드 명령어를 추가한다.

"scripts": {
    "dev": "next dev",
    "build:ssg": "next build && next export",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

next.config.js에 trailingSlash 옵션을 추가한다.

const nextConfig = {
  reactStrictMode: true,
  trailingSlash: true,
  ...
}

Trailing Slash
URL 주소 끝에 붙는 슬래시를 말한다. 주소 끝에 슬래시가 붙어있으면 디렉토리를 의미하고 없다면 주소의 끝을 의미한다. 예를 들어 /boards/index.js라는 파일이 있을 때 trailingSlash 옵션이 꺼져있다면 boards.html 파일로 빌드가 된다.

터미널에 yarn build:ssg 명령어를 입력하면 out 디렉토리가 생성된다.

SSG 배포(AWS)

🔗 https://aws.amazon.com/

S3에 업로드

AWS의 클라우드 서비스인 S3을 검색해 진입한다.

Create Bucket을 클릭해 버킷을 생성한다.

Bucket Name에는 구매한 도메인을 기입하고(http, www 등은 X)
Region은 서울을 선택한다.

ACLs enabled를 선택한다. ACL이 비활성화 되면 추후에 퍼블릭 전환이 불가하므로 범용 서비스에 적합하지 않다.

모든 퍼블릭 액세스 차단을 해제하고 경고창에 확인했다고 체크를 한다.

나머지 설정은 기본값으로 두고 Create Bucket을 하면 버킷이 생성된다.

버킷 목록에서 생성한 버킷을 선택해 들어가서 OUT 디렉토리 내의 모든 파일과 폴더를 업로드해준다. 업로드 성공 메세지를 확인하고 모든 파일에 대해 퍼블릭 설정을 해준다. Actions - Make public using ACL

퍼블릭으로 전환이 성공적으로 끝나면 다시 버킷 상세화면으로 돌아와 속성 탭을 클릭한다. 가장 아래쪽에 있는 Static Website Hosting 블럭의 edit 버튼을 클릭한다.

위와 같이 설정하고 저장한다.
전 화면으로 돌아와 Static website hosting 블럭의 아래에 나와있는 엔드포인트 주소를 클릭해 접속이 정상적으로 되는지 확인한다.

SSG 배포가 정상적으로 이루어진 것을 확인했고 DNS 서버를 연결할 차례다.

Route53 호스팅 영역 생성

Route53으로 이동해서 Create Hosted Zone을 클릭한다.

도메인을 입력하고 퍼블릭으로 설정한 후 호스팅 영역 생성을 완료한다.

생성된 호스팅 영역의 상세 내역에서 타입이 NS인 레코드를 확인한다.

도메인을 구입한 호스팅 업체 사이트에 접속해 도메인 관리 메뉴에서 네임서버 설정을 변경한다.

1차부터 4차까지 순서대로 입력하고 저장한다. 네임서버 설정은 시간이 다소 소요되며

dig 도메인명 NS

터미널에서 dig 명령어로 확인할 수 있다.

ANSWER SECTION에 설정한 네임서버 네개가 모두 출력되면 정상적으로 변경된 것이다.

네임서버 설정이 완료되면 새로운 레코드를 생성한다.

설정 화면이 다르다면 상단에 Switch to Wizard를 클릭한다.
Simple routing을 선택해 넘어간다.

Define simple record(단순 레코드 정의)를 클릭한다.

Value/Route traffic to를 위와 같이 설정하고 S3 endpoint 인풋을 클릭하면 앞전에 생성한 엔드포인트가 표시된다.

엔드포인트를 선택하고 단순 레코드 정의를 마친다.
정의한 레코드를 확인하고 레코드 생성을 한다.

구매한 도메인을 주소창에 입력하고 접속이 정상적으로 되는지 확인한다.

HTTPS 설정

HTTPS는 SSL/TLS 인증서가 있어야 사용할 수 있다. AWS에서는 기본적인 퍼블릭 인증서를 무료로 제공하고 있다.

Certificate Manager 메뉴에 들어가 Request a certificate를 클릭한다.

퍼블릭 인증서 요청을 선택하고 다음으로 넘어간다.

구매한 도메인을 입력하고 DNS validation을 선택 후 요청을 한다.

발급 요청은 완료되었지만 인증서의 상태가 '검증 대기 중'으로 나오는 것을 확인할 수 있다. 인증서의 무분별한 사용을 막기 위해 AWS에서는 실제로 그 도메인을 소유하고 있는지 검증 과정을 거친다. Route53에 검증용 CNAME 레코드를 추가해 도메인 소유 여부를 검증할 수 있다.