[vuejs] AWS S3에 vue 배포

프런트엔드 vuejs는 빌드 후 AWS S3에 배포 할 수 있습니다.

vuejs 빌드는 npm run build 명령어로 할 수 있고, 프로젝트 폴더에 dist 폴더가 생깁니다.

 

1. AWS S3 버킷 생성

AWS에서 S3로 이동 후 버킷을 만듭니다.  (퍼블릭 엑세스 차단은 모두 해제 합니다. 외부에서 접근 하려면 차단을 풀어야 합니다.)

AWS S3 버킷만들기

2. AWS S3 권한설정 (버킷 정책)

권한에서 버킷 정책으로 이동한 다음 아래 코드를 작성해 줍니다. (이 때 test0407은 본인의 버킷이름으로 변경해야 합니다.) 

AWS Route 53을 사용해서 자신이 보유하고 있는 도메인을 사용할 경우 버킷이름을 도메인 주소로 설정해 줘야 합니다. 

AWS S3 권한설정

{
    "Version": "2012-10-17",
    "Id": "Policy1546621853468",
    "Statement": [
        {
            "Sid": "Stmt1546621828605",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::버킷 이름(도메인 주소)/*"
        }
    ]
}

3. AWS S3 파일 업로드

빌드 후 만들어진 dist 폴더 내에 있는 파일을 업로드 합니다.

AWS S3 파일 업로드

4.  AWS S3 웹 호스팅

인덱스 문서와 오류 문서는 index.html 로 설정해주고 저장을 누릅니다.

그럴 경우 엔드포인트 주소로 접근 할 수 있습니다.

AWS S3 웹 호스팅