클라이언트 배포는 신기하고 재밌어 그리고 긴장돼 ...

🛠️ 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 # 브랜치 명

 

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 # 작업한 디렉토리 명

 

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 확인 명령어

 

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

 

5. 버킷 이름을 기재한다. 

버킷 이름은 S3 > 버킷 > 속성에서 > Amazon 리소스 이름 (ARN)의 ::: 뒷부분을 입력한다.

        run: |
          aws s3 sync \ # 버킷의 속성
            --region ap-northeast-2 \ # 리전 
            build s3://버킷 이름 \ # 버킷 이름을 기재
            --delete
        working-directory: ./my-agora-states-client-react # 작업한 디렉토리 명

 

 

🤩 완성한 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 # 작업한 디렉토리 명

 

 

🥳 빌드와 배포

1. 작성한 yml 파일을 커밋, 그리고 푸시한다.

2. 깃헙의 해당 repository > Actions에서 확인한다.

아래와 같이 노랑불 > 초록색 체크표시로 바뀌면 성공! (결과를 기다릴 때 은근 긴장된다... 기도 메타 🙏🏻) 만약 빨간색 X 표시가 뜬다면 해당 에러를 해결한 후, 다시 푸시해야 한다.

3. 엔드포인트를 통해 접속한다.

AWS > S3  > 버킷  > 속성 > 속성 페이지 맨 하단의 '버킷 웹 사이트 엔드 포인트'를 클릭하면 

4. 아래와 같이 내가 만든 웹 사이트가 뜬다!