Amplify 호스팅, 프런트엔드 배포를 자동화하기

분기마다 환경을 따로 두는 구조입니다

프런트엔드 배포 자동화의 기본 구조는 분기와 환경을 일대일로 묶는 것입니다. 운영 분기는 운영 주소로, 개발 분기는 개발 주소로 배포됩니다. 이 구조의 장점은 환경 변수와 데이터 연결을 분기별로 나눌 수 있다는 점입니다. 설정 순서는 1단계 분기 목록 확정, 2단계 분기별 환경 변수 등록, 3단계 빌드 설정 파일 작성, 4단계 분기별 도메인 또는 하위 도메인 연결입니다. 2단계를 건너뛰면 개발 분기가 운영 데이터를 쓰게 되어, 시험 중 만든 데이터가 운영에 섞입니다. 그래서 변수 분리를 첫 배포 전에 끝냅니다.

빌드 설정은 파일로 저장소에 둡니다

빌드 명령을 화면에서 입력해 두면 그 설정이 저장소에 남지 않습니다. 사람이 바뀌면 왜 그렇게 설정했는지 알 수 없고, 새 환경을 만들 때 똑같이 재현하기도 어렵습니다. 그래서 빌드 단계를 설정 파일로 저장소에 두는 방식을 권합니다. 파일에는 설치 명령, 빌드 명령, 출력 폴더, 캐시 대상 폴더를 적습니다. 캐시 대상을 지정하면 의존성 설치 시간이 줄어 빌드가 빨라집니다. 또 설정 파일을 쓰면 변경 이력이 남아 배포가 깨졌을 때 어느 변경 때문인지 바로 찾을 수 있습니다. 이 점이 운영 중 가장 큰 차이를 만듭니다.

빌드 요금과 전송 요금을 합산합니다

학습용 가정으로 계산합니다. 가정값은 분기 3개에서 월 90회 빌드가 돌고 평균 빌드 시간이 4분이며 빌드 단가가 분당 1.4원이라고 두겠습니다. 또 월 전송량이 300기가바이트이고 전송 단가가 기가바이트당 198원이라고 두겠습니다. 빌드 요금은 90 곱하기 4 곱하기 1.4원으로 504원입니다. 전송 요금은 59,400원이므로 합계는 59,904원입니다. 이것이 최종 금액입니다. 여기서 보이는 사실은 빌드 요금 비중이 작고 전송 요금이 지배한다는 점입니다. 따라서 절감 작업은 빌드 횟수 줄이기가 아니라 전송량 줄이기에서 효과가 납니다.

전송량을 줄이는 쪽이 금액을 바꿉니다

결론을 뒤집는 조건은 전송량 구성입니다. 위 계산에서 전송이 금액의 대부분이므로, 이미지와 스크립트 용량을 줄이면 바로 금액이 내려갑니다. 확인 순서는 페이지당 전송 바이트를 측정하고, 가장 큰 자원 상위 10개를 뽑고, 각 자원의 압축과 크기 조정 여부를 보는 것입니다. 두 번째 조건은 캐시 설정입니다. 보관 시간이 짧으면 같은 사용자가 같은 파일을 반복해서 받아 전송량이 늘어납니다. 그래서 이름 기반 갱신과 긴 보관 시간을 함께 적용합니다. 세 번째는 미리보기 환경의 전송입니다. 검토용 주소의 전송도 요금에 들어가므로 불필요한 환경은 정리합니다.

웹호스팅 실행 전 점검표

• 분기별 환경 변수를 분리해 등록했다
• 빌드 설정을 파일로 저장소에 두었다
• 캐시 대상 폴더를 지정해 빌드 시간을 줄였다
• 페이지당 전송 바이트와 상위 자원을 측정했다