일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- UI
- Til
- Next.js
- 프로그래머스
- 프로토타입
- UX
- 30daysdowoonchallenge
- superstarjypnation
- useState
- vercel
- 회고
- 스택
- html
- REST_API
- javascript
- 운영체제
- 자바스크립트
- React
- 자료구조
- 생활코딩
- 큐
- CSS
- 코드스테이츠
- 백준
- mysemester
- 해시테이블
- 카카오
- redux
- level1
- web
- Today
- Total
데굴데굴
<Deploy> 배포 과정 자동화하기 (with Github actions) 본문
코드를 수정할 때마다 새롭게 빌드하고 배포하는 과정은 생각보다 번거로운 일이다.
자동화 작업을 통해 이 과정을 기계가 알아서 해주도록 만들 수 있다.
CI
Continuous Integration
지속적 통합
Code - Build - Test
CD
Continuous Deployment / Continuous Delivery
지속적 배포
Release - Deploy - Operate
CI/CD 파이프라인을 구축하여 빌드부터 배포까지의 과정을 자동화한다.
- 빌드 (소프트웨어 컴파일)
- 테스트 (호환성 및 오류 검사)
- 릴리스 (버전 제어 저장소의 애플리케이션 업데이트)
- 배포 (개발에서 프로덕션 환경으로의 변환)
- 규정 준수 및 유효성 검사
Github Actions
CI/CD 플랫폼
공개 레포지토리는 무료로 사용 가능, 비공개 레포지토리는 작업 용량과 시간이 제한되어 있음
로컬 레포지토리에 생성된 .github/workflows
에 들어가 yml 파일을 작성해주면 조건에 따라 actions 봇이 실행된다.
맥의 finder에서 숨김 폴더 및 파일을 보기 위해서는 커맨드 + 쉬프트 + .
를 누르면 된다
yml 파일에 쓰이는 문법들은 공식 문서에 잘 작성되어 있다.
yml 파일에서 먼저 실행될 action의 이름을 정한다.
그 후 이 yml 파일에 작성된 명령이 언제 실행되도록 할 것인지 조건을 작성해준다.
여기서는 reference라는 브랜치에 push했을 때 파일이 실행되도록 조건을 지정해주었다.
name: client
on:
push:
branches:
- reference
여기서는 빌드부터 aws s3 버킷에 빌드 파일을 업로드하는 배포까지 자동화하는 것이 목적이었다.
우선 action이 우분투에서 실행되도록 빌드 환경을 설정해준다.
jobs:
build:
runs-on: ubuntu-20.04
빌드 과정 자동화 명령 작성
steps:
- name: Checkout source code.
uses: actions/checkout@v2
- name: Install dependencies
run: npm install
working-directory: ./my-agora-states-client
- name: Build
run: npm run build
working-directory: ./my-agora-states-client
하이픈 하나가 한 스텝을 의미한다.
npm run build 명령어를 쓰기 위해 먼저 npm install을 해준 후 빌드를 진행한다.
이렇게 하면 이제 내가 로컬에서 작업 완료 후 일일이 빌드를 해줄 필요가 없어진다.
배포 과정 자동화 명령 작성 (aws 이용)
- name: SHOW AWS CLI VERSION
run: aws --version
- name: Sync Bucket
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_EC2_METADATA_DISABLED: true
run: |
aws s3 sync \
--region ap-northeast-2 \
build s3://<버킷 이름> \
--delete
working-directory: ./my-agora-states-client
aws cli의 버전을 확인하고 버킷 동기화를 진행한다. (조금 더 엄격하게 하기 위함)
aws 접근에 필요한 액세스 키의 아이디와 비밀번호를 secrets로 불러온다.
액세스 키와 같은 것들은 정보 유출의 위험이 있기에 절대로!! 파일에 직접 작성하면 안된다.
github 레포지토리의 설정에서 Secrets에 key, value를 추가하는 방식으로 접근해야 한다.
aws cli에는 로컬 파일을 객체에 동기화해주는 명령이 존재한다.
aws s3 sync <버킷에 올릴 파일 경로> s3://<버킷 이름>
여기서는 npm run build
후 생성된 build 폴더의 내용을 버킷에 동기화하기 위해 경로를 build
로 작성했다.
또 sync에는 옵션이 아주 다양하게 있는데 그에 관해서는 아래 링크를 참조하면 된다.
Secrets 설정하기
레포지토리 설정에 들어가 Secrets - Actions에서 repository secret에 키를 추가하면 된다.
그러면 앞서 작성했던 yml 파일의 ${{ secrets.AWS_ACCESS_KEY_ID }}
처럼 secrets로 접근하여 키값을 받아와 명령을 수행한다.
이렇게 작업이 끝나면 이제 push가 실행될 때마다 actions 탭에서 작업이 실행된다.
배포 링크: http://fe-37-aemaaeng-s3.s3-website.ap-northeast-2.amazonaws.com/
(코드스테이츠 계정으로 한 거라 지금은 작동하지 않습니다)
확실히 aws 페이지에 접속해서 버킷에 직접 파일 올리고 확인했던 것보다 편해졌다.
'Programming' 카테고리의 다른 글
[Next.js] Next.js 13 vercel 배포 시 이미지 로딩 실패 문제 (ENOENT: no such file or directory) (0) | 2023.10.06 |
---|---|
[Next.js] Next.js 13 <Image> plaiceholder 라이브러리 적용기 (1) | 2023.09.21 |
<WEB> Lighthouse로 웹사이트 성능 분석하기 (0) | 2022.12.05 |
번들링과 웹팩 (0) | 2022.11.23 |
웹 표준과 웹 접근성 (0) | 2022.11.08 |