정적 호스팅
우리가 만든 뷰앱은 알고보면 모두 html, css, javascript 들로 이루어진 정적 파일 뿐 입니다. 이 점을 활용하여 Amazon S3의 정적호스팅을 활용하면 Vue 애플리케이션을 호스팅 할 수 있습니다.
순서는 다음과 같습니다.
- Vue cli로 vue 앱 생성
- S3 버킷 생성
- Npm run build 후 dist 폴더 버킷에 업로드
- 정적 호스팅 기능 활성화
- 퍼블릭 접근 허용 및 버킷 정책 개선으로 오류 해결
- 확인
순서는 위와 같으나 먼저 S3 버킷을 생성하시고 vue 앱을 업로드 하셔도 무방합니다. 핵심은 s3 정적 호스팅 기능 활용과 vue 앱 생성 및 업로드입니다.
vue 앱 생성
vue cli 설치 를 참고하여 vue cli를 설치해주시기 바랍니다. vue cli는 vue 프로젝트 생성을 도와주는 vue의 도구입니다
1
vue init webpack s3-test
s3-test 라는 프로젝트 이름으로 뷰 프로젝트를 생성하겠습니다. 나머지는 모두 기본 Enter를 눌렀습니다.
1
2
cd s3-test
npm run dev
다음과 같이 localhost:8081로 서버가 구동되고 브라우저로 뷰애플리케이션이 실행된 모습을 볼 수 있습니다. 이제 로컬에서 구동된 애플리케이션을 누구나 접근할 수 있게 s3 정적 호스팅 기능을 활용해보겠습니다.
S3 버킷 생성
AWS 계정은 이미 가지고 있다고 가정하고 진행하겠습니다.
콘솔에 접속하여 unique한 버킷이름으로 생성해줍니다. 저는 s3-test-1308로 생성했습니다. 나머지 설정은 생략하고 바로 버킷 생성 버튼을 누르시면 됩니다.
애플리케이션 빌드
프로덕션 환경으로 배포를 위해 앱을 빌드해야 합니다. npm run build 명령을 수행하면 html, css, javascript로 파일을 변환하여 dist 폴더 아래에 만들어줍니다
1
npm run build
dist 폴더에 있는 index.html 파일과 static 폴더를 버킷에 업로드
dist 폴더의 index.html 과 static 폴더를 각각 업로드 해주세요 그 후, 아래에 있는 **업로드** 버튼을 꼭 눌러주세요
객체의 상태과 다음과 같아야 합니다.
정적 호스팅 기능 활성화
속성 탭을 클릭한 후, 하단의 정적 웹 사이트 호스팅의 편집을 클릭해주세요
아래와 같이 활성화, index.html, error.html 을 체크 및 입력해주세요. 그 후, 하단의 변경사항 저장을 눌러줍니다.
그럼 아래와 같이, 도메인 주소가 하나 할당되고 접속해보면 다음과 같이 403 forbidden 오류가 납니다.
퍼블릭 접근 허용 및 버킷 정책 개선으로 오류 해결
우리가 원하는 것은 뷰 환영 인사말이 나오는 것인데 서버측에서 403 forbidden 응답을 보내왔습니다. 이를 해결하기 위해 s3 권한을 손보겠습니다.
우선 퍼블릭 접근 허용을 해줍니다.
모든 퍼블릭 액세스 차단을 체크 해제후 변경 사항 저장을 클릭합니다. 퍼블릭 액세스를 허용하셔야 버킷 정책을 편집 할 수 있습니다. 버킷 정책 편집을 통해 아래 json 정책을 붙여넣기 해주세요
1
2
3
4
5
6
7
8
9
10
11
12
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::s3-test-1308/*"
}
]
}
1
"Resource": "arn:aws:s3:::s3-test-1308/*"
이 문구는 리소스 s3-test-1308 하위의 모든 객체를 지정합니다. 여러분의 s3 이름에 맞게 변경해주세요. 정책 변경 사항을 저장해줍니다.
확인
다시 http://s3-test-1308.s3-website.ap-northeast-2.amazonaws.com/ 로 접속해보면 정상적으로 화면이 출력됩니다.
정리
오늘은 간단히 s3 버킷에 vue 애플리케이션을 호스팅 해봤습니다. 여러분이 만든 vue 앱을 npm run build 하여 dist 폴더의 파일들을 버킷에 업로드 해보시면 좋을 것 같습니다.