GitHub Actions 란?
GitHub Actions는 GitHub에서 제공하는 CI/CD툴입니다. 다시 말해서 Workflow를 자동화할 수 있게 도와줍니다.
GitHub Actions에 관해서는 다른 글에서 자세하게 다루도록 하고, 이 글에서는 제가 AWS S3에 배포 자동화를 하는 과정과 그 과정에서 발생한 문제를 해결하는 것에 관한 글을 쓰려고합니다.
1. AWS IAM
AWS IAM -> 액세스 관리 -> 사용자 -> 사용자 추가
우선 AWS IAM 설정을 해줘야합니다.
사용자 이름을 추가하고, AWS 액세스 유형 선택에서 액세스 키 - 프로그래밍 방식 액세스를 선택합니다.
권한 설정에서 기존 정책 직접 연결을 선택하고, AmazonS3FullAccess를 선택합니다.
뒤로 넘기다가 완료가 되면 .csv 다운로드를 선택해서 액세스 키를 다운로드 합니다.
비밀 키는 다시 다운로드 할 수 없고 분실한 경우 새로 발급 받아야한다!
2. GitHub Secrets
GitHub repository -> Settings -> Secrets -> New repository secret
AWS IAM에서 발급한 액세스 키 ID와 비밀 액세스 키를 등록합니다.
3. GitHub Actions
GitHub repository -> Actions -> set up a workflow yourself
name: Deploy to Productionon:push:branches:- mainjobs:deploy:runs-on: ubuntu-18.04steps:- name: Checkout source codeuses: actions/checkout@master- name: Cache node modulesuses: actions/cache@v1with:path: node_moduleskey: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}restore-keys: |${{ runner.OS }}-build-${{ runner.OS }}-- name: Install Dependenciesrun: npm install- name: Buildrun: npm run build- name: Deployenv: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 \build s3://S3-Bucket-Name
제일 밑에 S3-Bucket-Name에는 본인의 Bucket 이름을 적으면 된다!
4. 배포 테스트
이제 main 브랜치에 푸시를 하면 자동으로 배포가 됩니다.
라고 생각했지만 저는 안됐습니다.
원인 분석을 위해 실패가 발생한 항목에 들어가서 로그를 확인해봤습니다.
process.env.CI
가 true 설정되어 있어서 경고들이 오류로 간주된다는 내용이었습니다. 이 부분을 해결하기 위해 위에서 작성한 main-deploy.yml
을 수정했습니다.
# 수정 전- name: Buildrun: npm run build# 수정 후- name: Buildrun: npm run buildenv:CI: ''
이제 GitHub Action이 정상적으로 작동합니다.
환경변수 설정
위에서 언급한 과정으로 GitHub Actions를 이용할 수 있지만 환경 변수를 적용하려면 어떻게 해야할까요?
빌드 파일에서 사용할 환경 변수를 GitHub Secrets에 등록해줍니다. 저는 ReactJS에서 서버에 요청하는 BASE_URL이 개발 환경과 배포 환경에서 각각 달랐기 때문에 이걸로 예를 들어보려고 합니다.
main-deploy.yaml
을 다시 한번 수정해줍니다.
# 수정 전- name: Buildrun: npm run buildenv:CI: ''# 수정 후- name: Buildrun: npm run buildenv:CI: ''REACT_APP_SERVER_BASE_URL: ${{ secrets.REACT_APP_SERVER_BASE_URL }}