Portfolio

Vercel은 CI/CD를 지원한다.

This step-by-step tutorial will help you get started with Vercel, an end-to-end platform for developers that allows you to create and deploy your web application.

https://vercel.com/docs/concepts/get-started

📌

CI/CD - As you're developing a project, Vercel automatically provides a preview deployment with its own URL. The preview URL is automatically integrated with your connected Git provider and is accessible in the body of your pull request. Once your pull request is merged into the main branch, Vercel will make a Production Deployment.

Vercel은 자동으로 미리보기 배포(프리뷰)를 제공한다.

프리뷰 URL은 연결된 깃 프로바이더(깃허브, 깃랩 등)와 자동으로 통합되며,

풀 리퀘스트에서 접근 가능하다.

풀 리퀘스트가 메인 브랜치에 병합되면 Vercel이 프로덕션 배포를 수행한다.

그렇다면 Vercel에서 CI/CD가 지원되는 데도 불구하고 github action을 같이 사용할까?

깃허브 액션이란?

GitHub Actions Documentation - GitHub Docs

Automate, customize, and execute your software development workflows right in your repository with GitHub Actions. You can discover, create, and share actions to perform any job you'd like, including CI/CD, and combine actions in a completely customized workflow.

https://docs.github.com/en/actions

GitHub Actions의 소개와 핵심 개념

Engineering Blog by Dale Seo

https://www.daleseo.com/github-actions-basics/

액션을 만들어서 CI/CD는 물론 원하는 작업을 수행할 수 있고,

완전히 커스터마이징된 워크플로우 안에서 액션들을 조합할 수 있다.

깃허브 액션을 사용하면 자동으로 코드 저장소에서 어떤 이벤트가 발생할 때

특정 작업이 일어나게 하거나 주기적으로 어떤 작업들을 반복해서 실행시킬 수 있다.

Workflows

깃허브 액션에서 워크플로우란 쉽게 말해서 자동화 해놓은 작업 과정이다.

워크플로우는 .github/workflows 폴더 아래에 YAML 파일로 설정하며,

여러개의 워크플로우를 생성 가능하다.

Jobs

깃허브 액션에서 Job이란 독립된 가상 머신 또는 컨테이너에서 돌아가는 하나의 처리 단위를 의미한다.

하나의 워크플로우는 여러개의 작업으로 구성되며 적어도 하나의 작업이 필요하다.

모든 작업은 기본적으로 동시에 실행되고, 필요시 실행 순서를 제어 가능하다.

Actions

액션은 빈번하게 필요한 반복 단계를 재사용하기 용이하도록 제공되는 일종의 작업 공유 메커니즘이다.

대표적인 액션은 저장소로부터 코드를 내려받기 위한 체크 아웃 액션(actions/checkout)이다.

GitHub Actions의 체크아웃(Checkout) 액션으로 코드 내려받기

Engineering Blog by Dale Seo

https://www.daleseo.com/github-actions-checkout/

깃허브의 코드 저장소에 올려둔 코드를 CI 서버로 내려받은 후에 특정 브랜치로 전환하는 행위라고 볼 수 있다.

이전 프로젝트에서 작성한 워크플로우


name: Vercel Production Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches: main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: create vercel.json
        run: |
          touch vercel.json
          echo '
          {
            "rewrites": [
              {
                "source": "/api/:url*",
                "destination": "${{ secrets.API_BASE_URL }}/:url*"
              },
              {
                "source": "/(.*)", 
                "destination": "/"
              }
            ]
          }
          ' >> vercel.json
      - 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과 깃허브 액션을 같이 사용하는 방법

How can I use GitHub Actions with Vercel?

Learn how to use GitHub Actions to deploy to Vercel including support for GitHub Enterprise Server.

https://vercel.com/guides/how-can-i-use-github-actions-with-vercel

📌

This approach is useful for developers who want full control over their CI/CD pipeline, as well as GitHub Enterprise Server users, who can’t leverage Vercel’s built-in git integration.

CI/CD 파이프라인을 완전히 제어하고 싶은 개발자에게 용이하다.

내 생각

깃허브 액션으로 어떤 이벤트가 발생할 때 특정 작업을 발생시키거나,

주기적으로 특정 작업들을 반복시키고 싶을 때 사용하는 것 같다.

CI/CD 측면에서는 Vercel에서 해주는 자동 CI/CD가 아닌

원하는 대로 제어한 파이프라인을 가지고 싶을 때 사용하는 것으로 이해했다.

그리고 github actions secrets를 통해서 api end point를 가릴 수 있다는 이점도 있다.

Secrets

Github) Github actions에서 Secrets로 환경변수 관리하기

github actions는 github에서 제공하는 기능으로, 특정 트리거가 발동되었을 때 미리 설정한 워크플로를 실행시키는 자동화 툴이다. github actions를 활용하면 main 브랜치에 코드가 푸시되었을 때 자동으로 코드를 테스트하고, 문제가 없다면 배포까

https://velog.io/@2ast/Github-Github-actions%EC%97%90%EC%84%9C-Secrets%EB%A1%9C-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0

Github) Github actions에서 Secrets로 환경변수 관리하기

secrets는 환경 변수를 암호화해서 저장할 수 있는 기능이다.

github에서 secrets에 원하는 값을 입력하면,

actions의 workflow가 실행될 때 이 secrets에 접근이 가능해진다.

그러면 이때 동적으로 secrets의 데이터를 취합해 .env파일을 새로 생성하는 것이다.

Github Actions에서 Secrets을 통해 env 파일 생성하기

일반적으로 Github에 업로드하지 않는 env 파일을 어떻게 Github Actions에서 생성하고, 환경 변수를 추가할 수 있는지 알아봅시다.

https://ji5485.github.io/post/2021-06-26/create-env-with-github-actions-secrets/

Github Actions에서 Secrets을 통해 env 파일 생성하기

내 생각

만일 우리가 api end point를 가려야 한다면 사용하는 게 좋을 것 같고,

그게 아니라면 굳이 사용하지 않아도 된다고 생각된다.

이 프로젝트에서 자신만의 CI 셋업까지 필요하다고 생각되지 않기 때문이다.

Vercel에서 CI/CD가 지원되는 데도 불구하고 Github Action을 같이 사용하는 이유

Workflows

Jobs

Actions

Secrets