왜 하는가

현재 Vue.js 프로젝트를 AWS S3에 배포하고있습니다. 기존 배포 단계는 다음과 같습니다.

• PowerShell에서 프로젝트 빌드
• 크롬 브라우저에서 AWS S3 웹 콘솔 접속
• 업로드 파일 선택 후 파일 업로드

PowerShell에서 빌드를 한 뒤에 배포를 위해 크롬을 다시 열고.. 로그인을 하고.. 업로드 할 파일들을 선택하고.. 정말 인고의 시간입니다.

이 과정을을 PowerShell 스크립트를 한번 실행하는것으로 단축할 수 있습니다.

시작하기

Vue.js 프로젝트를 예로 들었지만 s3에 배포하는 프론트엔드 프로젝트라면 동일하게 적용할 수 있습니다.

1. AWS CLI 설정

AWS CLI 설치

https://aws.amazon.com/ko/cli/ 에서 OS에 맞는 AWS CLI를 설치합니다.

AWS IAM USER 생성

S3에 접근가능한 사용자를 생성합니다.

AWS CLI 설정

쉘에 aws configure를 입력하여 초기 설정을 합니다. IAM에서 생성한 USER의 access key와 secret key를 입력합니다.

2. PowerShell 스크립트 만들기

# 내 프로젝트 경로를 입력해주세요.
cd C:\gitRepo\myProject

# npm을 사용하신다면 yarn 대신 npm으로 빌드해주세요.
yarn run build

# 로컬 경로를 내 프로젝트 경로로 변경해주시고, S3 버킷 이름을 변경해주세요.
# 로컬경로의 파일을 S3 버킷에 업로드 하고 프론트엔드 배포를 위해 모든 사용자가 읽을 수 있게 권한을 변경하는 스크립트입니다.
aws s3 cp C:\gitRepo\myProject\dist\ s3://my.project --recursive --grant read=uri=http://acs.amazonaws.com/groups/global/AllUsers

끝!

이제 업로드 하는 시간을 변수명 고민하는 시간에 쓸 수 있어요.