AWS S3 버킷으로 Vue 프로젝트 배포

1. S3 버킷 만들기

버킷 이름을 입력하고 계속해서 다음을 누른 뒤, 버킷 생성

 

2. 권한 -> 퍼블릭 액세스 차단

모든 퍼블릭 액세스 차단 체크를 풀어준 뒤, 저장

 

3. 권한 -> 버킷 정책

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::S3버킷이름/*"
        }
    ]
}

위와 같이 입력하고 저장 

 

 

4. Vue 프로젝트 build

npm run build

 

다음과 같이 입력하면 프로젝트 build가 되고, 프로젝트 폴더에 'dist' 폴더가 생성됨

 

build로 생성된 dist 폴더

5. S3 버킷에 파일 업로드

개요 -> 업로드에서 dist 폴더에 있는 파일과 폴더를 전부 업로드 해준다. 그 후 계속 다음 클릭해서 업로드

 

6. 정적 웹 사이트 호스팅

정적 웹 사이트 호스팅을 위와 같이 활성화 시키고, 인덱스 문서에 'index.html'을 입력한 뒤 저장

 

7. 엔드 포인트 주소로 접근

엔드 포인트 주소로 접근하면 다음과 같이 배포된 프로젝트를 확인 할 수 있다