Vue.js AWS S3에 배포 후 도메인 연결하는 방법

1. 개요

간단한 토이프로젝트를 준비하고 있었는데 거의 막바지에 왔고 이제 슬슬 배포에 관한 준비를 하고 있다. 현재 프론트엔드는 Vue.js로 구현되어있고, 이는 AWS의 S3를 통해 간단하게 배포를 진행할 수 있다. 차례대로 한번 따라가보자.

2. Vue.js 빌드 및 S3에 배포

먼저 아래의 명령어로 빌드한다.

yarn build

대충 위와 같은 그림이 나오면 정상적으로 빌드가 된 것이다. 빌드가 완료되면 최상위 폴더에 dist라는 폴더가 하나 생성된다. 우리는 이 폴더의 파일들을 모두 S3에 올려주면 된다. AWS의 S3콘솔로 이동하여 버킷 만들기 버튼을 누른다.

여기서 주의할점이 있는데, 버킷 이름을 우리가 구매한 도메인 이름으로 해야한다는 것이다. 그렇지 않으면 추후 Route53에서 버킷으로 연결이 안될수가 있다. (테스트는 안해봤지만 도메인 이름이 아니더라도 .kr, .com처럼 유효한 URL이면 Route53과 연결이 가능할 것 같다. 하지만 그냥 구매한 도메인 이름으로 하자) 그리고 생성을 눌러 버킷을 생성한다. 

생성된 버킷을 한번 클릭하면 오른쪽에 추가적인 창이 하나 나오는데, 여기서 속성을 누른다. 그리고 정적 웹 호스팅을 선택한다.

첫번째 옵션인 이 버킷을 사용하여 웹 사이트를 호스팅합니다. 를 선택하고 인덱스 문서에 index.html을 적고 저장을 누른다.

다음으로 권한 탭으로 이동해서 모든 퍼블릭 액세스 차단을 해제한다. 저장하고, 버킷 정책으로 이동하여 아래의 내용으로 채워넣는다.

{
    "Version": "2012-10-17",
    "Id": "Policy1546621853468",
    "Statement": [
        {
            "Sid": "Stmt1546621828605",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::자신의버킷명/*"
        }
    ]
}

저장한 이후 정적 웹 호스팅을 사용한다고 설정했을 때 나와있는 엔드포인트로 들어가보면 정상적으로 접속이 되는 모습을 확인할 수 있을 것이다. 여기서 추가적으로 작업이 하나 더 필요한데, www로 들어오는 주소 또한 대응을 해줘야한다. 아까 codelog.kr로 버킷을 생성했으니 이번에는 www.codelog.kr처럼 앞에 www. 를 붙여서 버킷을 생성한다. 이렇게 생성한 버킷 또한 마찬가지로 위에 설명한 퍼블릭 액세스 관련 설정을 진행한다.

한가지 다른점이 있는데, 이번에는 요청을 리디렉션할 것이다. 그래야 파일을 중복해서 올리지 않아도 되기 때문이다. 대상 버킷 또는 도메인에 첫번째로 생성한 버킷의 이름을 적어주고 저장 버튼을 누른다. 여기까지 하면 S3설정은 모두 끝났다.

3. Route53으로 연동

Route53 콘솔로 이동하여 호스팅 영역 생성 버튼을 누르고,

도메인 이름에 우리의 도메인 명을 적어주고 생성한다. 그리고 생성된 항목을 클릭하면 유형이 NS인 부분의 값에 총 4개의 네임 서버 주소가 들어가있다. 이를 가비아로 들어가서 자신이 구매한 도메인의 네임서버 설정에 적용해준다. 그다음 다시 Route53으로 돌아와서 레코드 세트 생성을 누른다.

별칭에 예 를 선택하면 여러개의 항목이 나오는데 여기서 우리가 생성한 S3버킷을 연동시킬 수 있다. 아까 S3버킷 생성 시 그냥 도메인과 www를 붙인 도메인 버킷 총 2개를 생성했으므로 레코드 세트 또한 2개를 생성해준다. 위처럼 설정하면 모든 설정이 끝나고 우리가 생성한 도메인을 통해 S3에 접속할 수 있다.