이 편에서 만드는 파일

이 편은 코드를 바꾸지 않습니다. notice-board를 GitHub 저장소로 올리고, Amplify 콘솔에서 앱을 만들어 배포하는 작업만 합니다.

개념 정리

GitHub 연결부터 배포까지

create-next-app은 프로젝트를 만들 때 이미 로컬 git 저장소를 초기화해둡니다. 이 편에서는 그 저장소에 원격 저장소(GitHub)를 연결해 올리고, Amplify가 그 저장소를 구독하도록 설정합니다. 이후로는 main 브랜치에 커밋을 push할 때마다 Amplify가 변경을 감지해 자동으로 다시 빌드·배포합니다.

Amplify가 빌드 설정을 감지하는 방식

Amplify는 저장소의 package.json을 보고 Next.js 앱임을 자동으로 인식합니다. 빌드 설정(amplify.yml에 해당하는 내용)을 저장하는 방법은 두 가지입니다.

이 편은 첫 번째 방법(콘솔 자동 감지)으로 진행합니다. 빌드 캐시 경로를 직접 지정하려고 amplify.yml을 저장소에 추가하는 작업은 14편에서 다룹니다.

응답 헤더 미리보기

05편부터 이 헤더들의 값을 직접 조정하고 비교합니다. 이번 편에서는 헤더가 존재한다는 사실과 대략적인 의미만 확인합니다.

무료 티어로 이번 편이 충분한 이유

이번 편에서 발생하는 사용량은 빌드 1회, 배포된 앱에 대한 확인 요청 몇 건뿐입니다. 위 경고 문구의 무료 한도(빌드 1,000분, SSR 요청 500,000건)에 비하면 극히 적은 양이라, 정상적으로 진행하면 과금 걱정 없이 실습할 수 있습니다.

실습

git add .
git commit -m "notice-board 초기 프로젝트와 시드 데이터"
git remote add origin 본인의_GitHub_저장소_URL
git branch -M main
git push -u origin main

curl -I https://본인의_amplify_도메인

curl.exe -I https://본인의_amplify_도메인

확인

• Amplify 앱 대시보드에 Provision, Build, Deploy, Verify 네 단계가 모두 성공으로 표시됩니다.
• 배포된 URL로 접속하면 로컬과 동일하게 “notice-board” 제목과 공지사항 7건 목록이 보입니다.
• 응답 헤더 목록에 x-cache, age, cache-control이 포함되어 있습니다(정확한 값 해석은 05편에서 다룹니다. 지금은 세 헤더가 존재한다는 사실만 확인합니다).
• Amplify 콘솔 좌측 사용량(Usage) 화면에서 이번 배포로 소모한 빌드 시간이 무료 한도(월 1,000분)에 비해 매우 적다는 것을 확인합니다.

직접 해보기

1. Amplify 콘솔 앱 대시보드에서 방금 배포의 빌드 로그를 열어 Provision, Build, Deploy, Verify 각 단계가 몇 초(또는 몇 분) 걸렸는지 적어보세요.
2. 같은 URL로 curl -I(또는 curl.exe -I)를 두세 번 연달아 실행해 age 값이 어떻게 바뀌는지 기록해두세요. 05편에서 이 값을 다시 비교합니다.

자주 하는 실수

확인 문제

참고 자료

• AWS Amplify Docs — Deploying SSR applications with Amplify Hosting 
• AWS Amplify Docs — Configuring the build settings for an Amplify application 
• AWS Amplify Pricing