2024.09.09 기준 작성된 포스팅입니다.
먼저 s3 cloudfront 배포방법이 알고싶다면 하단 포스팅을 참고할 수 있다.
개념과 함께 아는 것이아니라 순서대로 cicd를 적용하고 싶은 사람은 목차 중에 순서대로 github cicd 준비하기
를 바로 참고하길 바란다.
먼저 아래는 작성한 전체 workflow.yml 파일이다.
name: DEV CI
on:
push:
branches: ["dev"]
pull_request:
branches: ["dev"]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [20.x]
steps:
- uses: actions/checkout@v4
- name: Create dotenv file
run: |
touch .env
echo "VITE_BASE_URL=${{secrets.VITE_BASE_URL}}" >> .env
# ... env 파일에 생성할 객체 echo 명령어로 추가하기
cat .env
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: yarn # yarn으로 설정
- name: Yarn install
run: yarn
- name: Yarn build
run: yarn build
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v4
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ secrets.AWS_DEFAULT_REGION }}
- name: Deploy to S3
uses: jakejarvis/s3-sync-action@master
with:
args: --delete
env:
AWS_S3_BUCKET: ${{ secrets.DEV_AWS_S3_BUCKET_NAME }}
SOURCE_DIR: "dist"
- name: Invalidate CloudFront Cache
run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DEV_AWS_DISTRIBUTION_ID }} --paths "/*"
workflows 작성이 어색한 사람들은 해당 섹션을 가볍게 읽어보면 이해하는데 조금 도움이 될 것이다.
깃 브랜치별로 push가 일어났을 때 다른 동작을 수행하게 하려면 on:
명령어를 통해 동작이 일어날 브랜치를 지정할 수 있다. 해당 스크립트로 main 브랜치와 dev브랜치를 구분하여 배포나 테스트 작업에 구분을 둘 수 있다.
추가적인 스크립트로 매번 수동으로 하던 빌드 -> 업로드 -> 배포 -> 캐싱 무효화 등등과 같은 작업들을 한번에 끝낼 수 있다.
aws access key와 secret access key와 같이 노출되면 안되는 정보들은 미리 github secrets에 등록해둠으로써 보안을 강화할 수 있다. 이때 저장해둔 값들은 workflow에 미리 등록해둔 key를 이용해 불러와 사용할 수 있다. 이때 주로 저장되어 사용하는 값이 aws 권한 인증에 필요한 aws access key와 secret access key이다. 해당 작업은 상단에 작성된 전체 스크립트에 Configure AWS Credentials
부분에 해당한다.
name
스크립트로 구간별 동작을 지정할 수 있다. 이 때, 파일 빌드 작업일 경우 jobs
스크립트 안에 실행될 환경을 설정할 수 있다. 위 스크립트는 우분투 최신버전으로 동작하도록 작성되었다. 후에 순차적으로 strategy.matrix로 node버전을 설정,uses-with
스크립트로 배포파일 지정 등 동작을 지정해둘 수 있다. 마지막으로 env
환경 변수에 aws bucket 이름을 지정해줌으로써 파일 업로드가 완료된다. 스크립트에 dist는 해당 스크립트의 프로젝트가 vite-react기준이라 build파일이 dist폴더내에 저장되었기 때문에, dist로 작성되었다.
cloudfront의 장점은 캐싱이 된다는 장점이 있지만, 새로 업데이트를 할 경우 수동으로 캐싱을 무효화해줘야한다. 이ㄸㅐ 할 작업을 workflow에 함께 작성할 수 있다. 아래 명령어를 참고하면 된다. AWS_DISTRIBUTION_ID에는 cloudfront id값을 git secret에 AWS_DISTRIBUTION_ID 변수명으로 작성해주면된다.
- name: Invalidate CloudFront Cache
run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_DISTRIBUTION_ID }} --paths "/*"
이제 본론으로 들어가 순서대로 cicd를 적용해보자ㅏ.
순서를 간략하게 요약하면 아래와 같다.
aws에서 우측 상단에 아이디 탭을 누르고 보안 자격 증명
메뉴를 클릭한다.
용도에 맞게 사용 사례를 선택한다.
생성된 엑세스 키는 보안을 위해 따로 저장하지 않는 편이 좋으며, 생성시에 바로 깃허브 레포 secret에 등록하는 편이 좋다.
발급받는 엑세스키워 시크릿 엑세스 키를 두고 아래 경로로 접속하여 새로 변수를 등록한다.
접속 순서 : cicd 적용할 레포 > 설정 > secrets and variables > action > new repository secret
아래와 같이 원하는 변수명으로 변경/등록 할 수 있다.
작성된 내용을 github내에서도 두번은 볼 수 없으니 혹시나 잊을까 걱정된다면 다로 메모해둬도 좋지만, 보안을 걱정한다면 주기적으로 엑세스키를 업데이트 하는 것도 방법이다!
cicd 등록시 저장할 변수 목록 ( s3 cloudfront로 배포했을 경우 )
name: MAIN CI
on:
push:
branches: ["main"]
pull_request:
branches: ["main"]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [20.x]
steps:
- uses: actions/checkout@v4
- name: Create dotenv file
run: |
touch .env
echo "VITE_BASE_URL=${{secrets.VITE_BASE_URL}}" >> .env
# ... env 파일에 생성할 객체 echo 명령어로 추가하기
cat .env
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: yarn # yarn으로 설정
- name: Yarn install
run: yarn
- name: Yarn build
run: yarn build
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v4
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ secrets.AWS_DEFAULT_REGION }}
- name: Deploy to S3
uses: jakejarvis/s3-sync-action@master
with:
args: --delete
env:
AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET_NAME }}
SOURCE_DIR: "dist"
- name: Invalidate CloudFront Cache
run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_DISTRIBUTION_ID }} --paths "/*"
위 코드가 동작하는 방식을 간략하게 작서하면 다음과 같다.
action 카테고리에 들어가면 잘 동작하는지 확인할 수 있다. 프로젝트 크기에따라 오래걸릴 수도 있으니 잠깐 다른 작업을 하고 있으면 된다.
디테일을 보려면 Show all jobs 버튼을 프로그램이 동작하는 것을 확인할 수 있다.
모두 완료된 후 배포 url로 접속하여 업로드가 잘 되었는지 또는 workflows 마지막 단계인 캐싱 무효화가 잘되었는지 등을 통해 잘 동작이 되었는지 확인할 수 있다.