[AWS] AWS Amplify와 Route53으로 프론트 배포하기

왔다 정보리·2025년 7월 16일

백엔드에서 살아남기

목록 보기

10/15

AWS Amplify / Route53

Amplify

정적 웹 사이트(React, Vue) 등을 CI/CD 방식으로 배포할 수 있는 서비스이다.
GitHub와 연동해서 브랜치 기반으로 자동 배포가 가능하며, 프리티어 기준으로 월 1,000분의 무료 빌드 시간이 제공된다.

Route53

AWS의 DNS(Domain Name System) 서비스이다.
도메인 등록 및 레코드 관리가 가능하고, 외부 도메인을 위임받아 사용하는 것도 가능하다. 이번 배포에서는 가비아에서 구매한 도메인을 통해 배포를 진행하였다. 호스팅 영역 당 월 $0.5가 과금된다.

DNS 레코드 타입

A 레코드 : IPv4 주소를 직접 연결한다. 웹 서버의 고정 IP가 있을 때 사용한다.
CNAME 레코드 : 다른 도메인 이름으로 연결한다. CDN 연결, 서브도메인 관리 등에 사용한다.
NS 레코드 : 네임 서버를 지정한다. 도메인의 권한을 위임할 때 사용한다.
TXT 레코드 : 도메인 인증용으로 사용한다. SSL 인증서 발급, 보안 설정 등에 사용한다.

AWS Amplify와 Route53으로 프론트 배포하는 과정

1. Route53 호스팅 영역 생성

먼저 가비아에서 구매한 도메인을 Route53에 등록해야 한다.

1-1. 호스팅 영역을 생성한다

호스팅 영역 생성

가비아에서 구매한 도메인을 입력한다. 유형은 퍼블릭 호스팅 영역을 선택한다.

1-2. 생성한 호스팅 영역의 NS 레코드를 확인한다

호스팅 영역 레코드 확인

호스팅 영역을 생성하면 4개의 NS 레코드가 생성된다. 이 NS 레코드를 가비아에 입력해야 한다.

2. 가비아 네임 서버 설정

가비아 네임 서버 설정

가비아 홈페이지의 도메인 관리 페이지에 들어가면 네임 서버를 설정할 수 있다.
Route53에서 생성된 4개의 NS를 1~4차에 각각 입력한다. AWS에서 제공하는 NS 레코드에 있는 .을 제거하고 입력해야 한다.
이렇게 하면 가비아에서 구매한 도메인의 네임 서버 권한이 Route53에 위임된다. 해당 도메인의 모든 DNS 레코드는 Route53에서 관리하게 된다. NS 레코드 변경 후 적용까지 최대 48시간이 소요된다고 써있지만, 실제로는 몇 분 안에 완료되었다.

3. Amplify 앱 생성

3-1. GitHub 레포지토리를 연결한다

GitHub 레포지토리 연결

소스코드 제공 업체로 GitHub를 선택하고 다음을 누르면 깃허브에 권한을 허용하도록 하는 페이지가 나온다. 여기서 원하는 레포지토리를 골라서 Amplify가 접근할 수 있도록 권한을 허용해준다.

3-2. 배포할 브랜치를 선택한다

배포 브랜치 선택

선택한 브랜치에 푸시가 될 때마다 자동으로 배포가 진행된다.
이번에는 개발 웹 페이지를 배포할 것이기 때문에 develop 브랜치를 선택하였다. 나중에 운영 웹 페이지를 배포하고 싶다면 main 브랜치를 선택하면 된다. 그 외 원하는 브랜치를 선택해서 배포할 수 있다.

3-3. 빌드 설정을 확인한다

version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'npm ci --cache .npm --prefer-offline'
        build:
            commands:
                - 'npm run build'
    artifacts:
        baseDirectory: dist
        files:
            - '**/*'
    cache:
        paths:
            - '.npm/**/*'

기본 설정값은 다음과 같다. 필요하면 buildspec.yml을 커스텀하여 사용할 수 있다.

3-4. 배포를 진행한다

배포 완료

초기 배포가 완료되면 임시로 Amplify URL이 생성된다. 해당 URL로 접속하면 배포된 웹 페이지를 확인할 수 있다. 추후에 도메인을 연결하면 임시 URL은 사라진다.

4. 배포 웹 페이지에 도메인 연결

도메인 연결

Amplify 콘솔의 호스팅 -> 도메인 관리에 들어가면 Route53에 등록한 도메인을 불러올 수 있다. 도메인을 연결하면 자동으로 AWS Certificate Manager를 통해 무료 SSL 인증서가 발급된다. 자동으로 HTTPS 설정이 되고, Route53에 필요한 레코드를 생성해준다.

브랜치 연결

참고로 나는 개발 웹 페이지를 배포하는 것이기 때문에 main 브랜치는 사용하지 않고, 서브 도메인에 develop 브랜치를 연결해주었다.

5. 환경 변수 설정

5-1. 환경 변수를 추가한다

환경 변수 설정

Amplify 콘솔의 호스팅 -> 환경 변수에서 사용하고자 하는 환경 변수를 추가할 수 있다. 브랜치별로 다른 환경 변수를 설정할 수 있다.

5-2. 빌드 설정을 수정한다

version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'npm ci --cache .npm --prefer-offline'
        build:
            commands:
                - BASE_URL=${BASE_URL}
                - 'npm run build'
    artifacts:
        baseDirectory: dist
        files:
            - '**/*'
    cache:
        paths:
            - '.npm/**/*'

추가한 환경 변수를 빌드 시에 불러올 수 있도록 buildspec.yml 파일을 수정해줘야 한다.
Amplify 콘솔의 호스팅 -> 빌드 설정에 들어가면 수정할 수 있다.

6. 웹 페이지 배포 완료!

프론트 배포가 처음이라 처음에는 겁을 많이 먹었다. 하지만 Amplify 설정 페이지 자체가 단계별로 따라올 수 있도록 친절하게 되어 있고, 자동으로 해주는 부분이 많아서 생각보다 수월하게 프론트 배포를 할 수 있었다. 프리티어를 사용하면 매달 1,000분의 무료 빌드 시간이 제공되니 활용해보면 좋을 것 같다.