01_CI/CD
CI/CD 에 대한 이해
CI (Continuous Integration) 지속적 통합이라는 뜻으로,
코드를 메인에 합친 후 test / lint / build 테스트를 거쳐 안정화 된 코드만 통과시키는 과정을 이야기 한다.
CD (Continuous Deployment) 는 CI 과정을 거친 안정화 된 코드를 자동으로 배포하는것을 의미한다.
Github Actions 는 CI/CD 플랫폼 중 하나로 특정 레포지토리에 대한 테스트, 빌드 및 배포 파이프라인을 자동화 시킬 수 있다.
02_github action 생성하기
CI 과정 추가
.github > workflows 디렉토리 생성
이름.yml
ex )
ci.yml
name: CI run-name: ${{ github.actor }} is testing out GitHub Actions 🚀 on: [push] // or [pull_request] 일때 발동한다. //lint 와 build 작업을 거쳐 코드를 검사하겠다 라는 뜻 jobs: lint: name:Lint runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v2 with: node-version:'18' //나의 노드 버전 - run: yarn install - run: yarn lint build: name: Build runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v2 with: node-version:'18' - run: yarn install - run: CI='false' yarn build
⚠️run: CI='false' yarn build
CI 가 true 일때 빌드 중 나타나는 경고를 오류로 판단하여 빌드 에러를 나타낼 수 있으므로 false 처리 한다.
vercel CD 과정 추가
버셀에 자동배포를 하기 위해서 cd.yml 을 추가한다.
vercel githubaction 치면 바로 나오는 공식문서에 샘플이 나와있다.
name: CD env: VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} on: push: branches: - main jobs: Deploy-Production: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Install Vercel CLI run: npm install --global vercel@latest - name: Pull Vercel Environment Information run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }} - name: Build Project Artifacts run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }} - name: Deploy Project Artifacts to Vercel run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
여기서 다음의 값들이 필요하다.
- VERCEL_ORG_ID
- VERCEL_PROJECT_ID
- VERCEL_TOKEN
Vercel 에 프로젝트 CLI 에서 추가하기
vercel 을 CLI 에서 로그인하기 위해 먼저 설치를 한다.
npm i -g vercel
설치 후 vercel login > Continue with Github 명령어를 선택하면 vercel login 성공창이 뜬다.
프로젝트 이동 후 버셀의 프로젝트와 링크를 연결해줘야 한다.
vercel link
- Set up ‘프로젝트 경로’ ? [Y/N] y
- Which scope should contain your project ? 22sook00
- Link to existing project? [Y/N] n
- What’s your project’s name? 프로젝트이름
- In which directory is your code located? ./
- Want to modify these settings? [Y/N] n
이 과정을 거치면 .vercel 이라는 디렉토리가 자동으로 생성된다.
Vercel 사이트에 환경변수를 등록해줘야 한다.
settings 의 Environment Variables 에서 내가 가지고있는 환경변수들을 등록해준다.
VERCEL_ORG_ID & VERCEL_PROJECT_ID
.vercel 디렉토리 내부의 project.json 파일을 보면 product id 와 org Id 가 생성되어 있다.
이 값들을 github settings 의 secret 에 등록해야 한다.
name : VERCEL_PROJECT_ID
Secret : project.json 내부의 product id 값
name : VERCEL_ORG_ID
Secret : project.json 내부의 org id 값
VERCEL_TOKEN
Vercel 의 settings 의 Tokens 탭에 가면 토큰생성이 가능하다.
Create Token
- TOKEN NAME : github action 임을 명시하는 이름으로 설정
- ex - GithubActionToken
- SCOPE : Full Account
- EXPIRATION : 귀찮으니까 1 year
토큰을 발급받으면 잘 저장해 두었다가 Github settings 에 등록을 해야한다.
Github settings > Secrets and variables 탭 하위에 Actions 로 들어간다.
Name : ex- VERCEL_TOKEN
Secret : 저장한 버셀 토큰입력