회사에서 공통적으로 사용할 컴포넌트를 만들고 디자이너 분께 검수를 받기위해 배포를 할 일이 생겼다.
로컬로 실행하고 아이피로 접근해 확인이 가능하지만, 매번 로컬을 실행시켜야하는 번거로움이 있기에 클라우드에 배포하기로했다.
처음에는 비교적 간단하게 자동배포를 할 수 있는 Netlify, Vercel에 하려 했지만 이게왠걸.... private repo는 유료라고한다...
그래서 회사프로젝트를 S3 Bucket에 배포를 하고있어서 S3에 배포하기로 했다.
1. 버킷 생성
1. 버킷 만들기 클릭한다.
2. '버킷이름'만 입력하고 그대로 하단에 '버킷 만들기' 를 클릭한다.
3. 만든 버킷이 목록에 보일 것이다. 버킷 클릭.
4. 권한 탭에서 퍼블릭 액세스 차단(버킷 설정)에 편집을 누른다.
5. 모든 퍼블릭 액세스 차단을 체크해제하고 변경 사항 저장 클릭.
6. 속성 탭 정적 웹사이트 호스팅 편집 버튼 클릭
7. 아래와 같이 설정 후 변경 사항 저장
8. 권한탭 -> 버킷정책에 다음과 같이 작성한다.
{
"Version": "2012-10-17",
"Id": "Policy1609228714229",
"Statement": [
{
"Sid": "Stmt1609228699054",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::프로젝트이름/*"
}
]
}여기까지하면 버킷 생성 및 설정은 끝났다. 이제 i am으로 cli 권한을 생성해주자.
1. i am에서 사용자 추가를 눌러준다.
2. 직접 정책 연결 탭을 누르고 AmazonS3FullAccess 선택 후 다음을 클릭하여 사용자 생성한다.
나는 이부분에서 헷갈렸다. 다른 블로그 포스팅에서는 사용자를 생성하면서 access key를 같이 생성하는데 사용자를 생성하고 access key를 생성하는것으로 바뀐 모양이다.
3. 사용자를 클릭하여 보안 자격 증명 탭 클릭 -> 액세스 키 란에서 액세스 키 만들기를 클릭하여 액세스 키를 만들어준다. (.csv파일은 잘 보관해 둬야한다. 잃어버리면 재발급 받아야함.)
4. 받은 액세스 키를 github repo -> settings -> secrets and variable -> actions에서 추가해준다.
5. 이제 마지막으로 우리 프로젝트 루트경로에 .github/workflows 폴더 안에 yml 설정 파일을 만들면 된다.
# main-deploy.yml
name: Deploy to Production
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout source code
uses: actions/checkout@master
- name: Cache node modules
uses: actions/cache@v1
with:
path: node_modules
key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.OS }}-build-
${{ runner.OS }}-
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
- name: Deploy
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
run: |
aws s3 cp \
--recursive \
--region ap-northeast-2 \
dist s3://S3버킷명
이렇게하면 main 브랜치에 push나 pr이 일어날때 git action이 돌면서 자동으로 배포를 해줄 것이다.