게임대장경 #5 Github Actions를 이용한 자동배포 설정하기

 

AWS s3를 이용해서 첫 배포에 성공했다. 

그러면.. 앞으로 버전을 업데이트할 때마다 이 거지같은 과정을 반복할 것인가????

 

 

자.동. 배.포. 를 할 수 있는데 내가 뭣땜에 뭘 위해서?!!!!

 

 

[ AWS IAM을 통해 액세스 키 발급 ]

 

AWS > IAM 검색 > 사용자 > 사용자생성 >

사용자 이름: "gamebible-front-s3-admin"

(나중에 알아보기 쉽도록 최대한 구체적으로 지어주기, 글로벌이 아니기 때문에 고유하지 않아도 됨)

> AWS Management Console에 대한 사용자 액세스 권한 제공 해제 > 다음

> 직접 정책 연결 > 권한 정책 중 s3FullAccess 클릭 > 다음 > 사용자 생성

원하는 사용자 클릭 > 

보안 자격 증명 > 액세스 키 만들기 > Command Line Interface(CLI) > 다음

> 설명 태그 값: "forGithubAction" (이 액세스 키 왜 발급했더라? 떠올리기 위한 것임) 

> 액세스 키 만들기

🚨이 화면이 나왔다면 함부로 나가버리지 말 것!

액세스 키와 비밀 엑세스 키를 바로 복붙할 수 있는 아래 환경이 준비되지 않았다면, 일단 .csv파일을 다운받아 놓는다.

 

 

[ Github Actions를 통한 자동배포 설정 ]

코드 에디터를 열어서

.github 디렉 > workflows 디렉 > deploy.yml 파일 생성

 

deploy.yml 파일 안에 

name: Swagger Deploy
on:
    push:
        branches:
            - master
jobs:
    build:
        runs-on: ubuntu-20.04

        steps:
            - name: Checkout source code.
              uses: actions/checkout@v3
            - name: Install dependencies
              run: npm install
              working-directory: ./
            - name: Build
              run: npm run build
              working-directory: ./
            - name: SHOW AWS CLI VERSION
              env:
                  AWS_ACCESS_KEY_ID: ${{ secrets.S3_ADMIN_ACCESS_KEY }}
                  AWS_SECRET_ACCESS_KEY: ${{ secrets.S3_ADMIN_SECRET_KEY }}
                  AWS_EC2_METADATA_DISABLED: true
              run: |
                  aws --version
            - name: Upload build to S3 bucket
              env:
                  AWS_ACCESS_KEY_ID: ${{ secrets.S3_ADMIN_ACCESS_KEY }}
                  AWS_SECRET_ACCESS_KEY: ${{ secrets.S3_ADMIN_SECRET_KEY }}
                  AWS_EC2_METADATA_DISABLED: true
              run: |
                aws s3 sync ./build/ s3://(s3 배포 버킷명) --acl public-read
              working-directory: ./

(( s3 배포 버킷명 )) 부분만 잘 채워주고 github에 잘 올려준다~!

 

위 내용에 포함되어 있는 ADMIN_ACCESS_KEY와 ADMIN_SECRET_KEY는 환경변수로,

이제 진짜 깃허브에 들어가서 입력만 해주면 된다. 

 

github > settings > Secrets and variables > Actions

> Repository secrets > New repository secret를 통해 두 환경변수를 입력해줄 것!

 

( 🚨 만약 Settings에 들어갔는데 위 화면같이 뜨지 않는다면, 그건 해당 레포에 대한 Admin 권한이 없기 때문.)

 

이렇게 하고 나면 develop에서 master로 PR을 하기만 해도 Action을 통해 deploy가 작동하게 된다~!

ㅎㅎㅎㅎ

 

 

deploy test만 몇 번을 한겨......😇😇😇😇😇😇

 

[ 총 6번의 deploy test 기록 ]

1 - 2. 옛날에 소문자로 잘못 올렸던 파일명이 나중에 대문자로 바꿨는데도 불구하고 소문자로 인식해서😇

git 은 폴더/파일명의 대소문자를 개무시한다. 그럼 우째?

git config core.ignorecase false

 

🚨 깃 저장소에 변경된 폴더 내 캐싱된 파일이 남아있다는 오류가 뜬다면

(소문자로 된 기존 파일은 그대로 남아있고, 대문자로 된 새로운 똑같은 파일이 하나 더 생기는 현상 발생)

git rm -r --cached .

위 코드를 통해 캐시를 지워주고 add, commit 해서 해결 완!

 

 

3. CI 서버에서 경고를 오류로 취급하도록 설정되어 있어서😇

treating warnings as errors because process.env.ci = true.

Treating warnings as errors because process.env.CI = true. | React

위 글을 참고해 package.json 파일 내 "build"에 CI=false를 추가해주는 것으로 해결 완!

 

4 - 5. deploy.yml 파일 안에 넣는 하이픈을 잘못된(?) 걸 써서😇

이건 그냥 gpt한테 물어봐서 뱉어준 거(생긴 건 똑같이 생겼는데 뭔가 다른가보다) 복붙했더니 해결 완!

 

 

ㅎㅎㅎ..

여튼 삼고초려.. 아니 육고초려(^^;) 끝에 깃허브 액션을 통한 자동 배포에 성공했다.!!!!!!!!!!!

 

므앙!!!!!!!!

 

---

 

 

다 끝나고 보니 deploy test 중에 발생한 문제들은 다 대단히 큼지막한 것들이 아니었다..

근데 내가 이걸 혼자 했으면 하루,,아니 이틀 사흘은 울면서 잡고 있지 않았을까 싶다.

이 과정을 먼저 해내고 함께 해준 팀원에게 너무 고맙고, 나는 이렇게 엿보고 들은 키워드들을 바탕으로 탑다운 방식의 공부를 해나가야겠다고 생각했다. deploy가 배포인지도 몰랐고, github를 통해 이렇게 많은 기능을 해낼 수 있는지도 몰랐다. 

 

세상은 아는 만큼 보인다고,

'어쩔 수 없는 거겠지~' 하고 그냥 넘어간 것들 (ex. 깃허브 대문자 인식 못함)이 이미 다 만들어져 있는 게 넘 소름돋고 재밌다..ㅋㅋㅋ

나는 사실 깃허브가 '대문자를 인식 못하는구나'라는 생각까지 미치지도 못했었다. 그냥 흐잉....😞(시무룩) 이러고 부끄럽지만 매번 파일명 다시 대문자로 고치는 바보같은 작업을 하고 앉아있었는데...ㅎㅎ허허,, 

 

앞으로는 >> 

1. 문제의식이 느껴지는 게 있으면 무조건 꼭 검색해보고, 

2. Github Action을 통해 Linter 설정도 가능함 알기 (언젠가 써볼/쓰임을 당할 일이 있겠지?!)

 

 

프론트엔드 개발자로서 당장 내 할일이 아니라는 안일한 생각에 미루기만 하지 말고

키워드를 기억하고 언제나 나 스스로 당당한 리드 개발자가 될 수 있도록 노력하고 또 노력해야겠다고 생각했다💭💪