Todo
만들어 둔 웹을 Github Actions와 Amazon S3를 활용해 빌드 및 배포하여, 사용자들이 사용할 수 있게 하기
이번 클라이언트 배포의 3단계
1. Source: Github 브랜치에 코드가 commit
2. Build: Github Actions YAML 파일의 명령어를 토대로 Webpack으로 build
3. Deploy: Github Actions YAML 파일의 명령어를 토대로 S3로 build 결과 upload
YAML 파일에 코드 적기
1. 해당 repository의 브랜치 이름을 적어준다.
현재 브랜치 명을 확인하려면 git branch라는 명령어를 입력 후 확인, q를 눌러 종료하면 된다.
name: client
on:
push:
branches:
- reference # 브랜치 명
YAML
복사
2. working-directory에는 작업한 디렉토리 명을 적어준다.
도메인 명 아님 주의!
jobs:
build:
runs-on: ubuntu-20.04
steps:
- name: Checkout source code.
uses: actions/checkout@v2
- name: Install dependencies
run: npm install # install 시 명령어
working-directory: ./my-agora-states-client-react # 작업한 디렉토리 명
YAML
복사
3. install, build 시 명령어들을 적어준다.
e.g. npm install, npm run build 등
- name: Build
run: npm run build # build 시 명령어
working-directory: ./my-agora-states-client-react # 작업한 디렉토리 명
- name: SHOW AWS CLI VERSION
run: aws --version # aws version 확인 명령어
YAML
복사
4. yml 파일에 시크릿 키 '이름'을 입력한다.
주의할 점은 절대 시크릿 키 자체를 입력하지 말아야 한다는 것이다. 자세한 방법은 아래와 같다.
1.
Github의 해당 레포지토리 > Settings > 좌측의 Secrets and variables > Actions > [New repository secret]을 눌러 AWS에서 발급받은 키를 등록한다.
2.
깃헙에 AWS_ACCESS_KEY라고 등록했다면 > yml 파일에도 AWS_ACCESS_KEY 라고 입력해야 한다.
- name: Sync Bucket
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }} # AWS access 키
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_KEY }} # AWS secret 키
AWS_EC2_METADATA_DISABLED: true
YAML
복사
5. 버킷 이름을 기재한다.
버킷 이름은 S3 > 버킷 > 속성에서 > Amazon 리소스 이름 (ARN)의 ::: 뒷부분을 입력한다.
run: |
aws s3 sync \ # 버킷의 속성
--region ap-northeast-2 \ # 리전
build s3://버킷 이름 \ # 버킷 이름을 기재
--delete
working-directory: ./my-agora-states-client-react # 작업한 디렉토리 명
YAML
복사
완성한 client.yml 코드
name: client
on:
# PUSH ------------------------------------------------
push:
branches:
- reference # 브랜치 명
jobs:
# BUILD ------------------------------------------------
build:
runs-on: ubuntu-20.04
steps:
- name: Checkout source code.
uses: actions/checkout@v2
# INSTALL ------------------------------------------------
- name: Install dependencies
run: npm install # install 시 명령어
working-directory: ./my-agora-states-client-react # 작업한 디렉토리 명
# BUILD ------------------------------------------------
- name: Build
run: npm run build # build 시 명령어
working-directory: ./my-agora-states-client-react # 작업한 디렉토리 명
# AWS VERSION ------------------------------------------------
- name: SHOW AWS CLI VERSION
run: aws --version # aws version 확인 명령어
# AWS BUCKET and KEY ------------------------------------------------
- name: Sync Bucket
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }} # AWS access 키
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_KEY }} # AWS secret 키
AWS_EC2_METADATA_DISABLED: true
run: |
aws s3 sync \
--region ap-northeast-2 \# 리전
build s3://버킷 이름 \# 버킷 이름을 기재
--delete
working-directory: ./my-agora-states-client-react # 작업한 디렉토리 명
YAML
복사
빌드와 배포
1. 작성한 yml 파일을 커밋, 그리고 푸시한다.
2. 깃헙의 해당 repository > Actions에서 확인한다.
아래와 같이 노랑불 > 초록색 체크표시로 바뀌면 성공! (결과를 기다릴 때 은근 긴장된다... 기도 메타 ) 만약 빨간색 X 표시가 뜬다면 해당 에러를 해결한 후, 다시 푸시해야 한다.
) 만약 빨간색 X 표시가 뜬다면 해당 에러를 해결한 후, 다시 푸시해야 한다.
3. 엔드포인트를 통해 접속한다.
AWS > S3 > 버킷 > 속성 > 속성 페이지 맨 하단의 '버킷 웹 사이트 엔드 포인트'를 클릭하면
