Vercel/Github Page로 Vite 프로젝트 배포하기

풀스택 개발 인턴을 하면서 프론트를 공부할 기회가 생겨 요새 react를 많이 만져보고 있는데, 회사 내 프로젝트에서 신규 프로젝트 배포 자동화가 너무 잘 되어 있었습니다. 개발은 했는데 배포까지 못 해본 게 찜찜해서 프론트 배포에 대해 공부해 보게 되었습니다.

github page와 vercel을 이용한 방법을 공부해봤는데 워낙 자동화가 잘 되어있어서 설정을 건드려줄 부분이 많지 않았습니다.

github page로 배포할 때 별도로 요금제에 가입되어 있지 않으면 레포지토리를 공개해야 하는데 vercel은 공개하지 않고 배포할 수 있는 부분이 좋았던 것 같습니다.

 

Vercel

먼저 프로젝트를 배포하기 전에 깃허브 레포지토리와 연동해 주기 위해 레포지토리를 하나 생성하고 vite 프로젝트를 올려주었습니다.

 

이제 vercel에 들어가서 프로젝트를 새로 생성해줍니다.

Vercel: Build and deploy the best web experiences with the Frontend Cloud – Vercel

 

로그인한 후 좌측 상단에 projects를 누르면 Create Project를 눌러 새로운 프로젝트를 생성할 수 있습니다.

 

생성한 레포지토리를 Import 해줍니다.

 

Build 명령어와 build된 파일이 생성되는 위치, 의존성 설치 명령어를 넣어주고 Deploy 버튼을 눌러줍니다.

 

배포 완료.. 정말 딸깍, 딸깍 배포가 가능하네요..

 

Vercel의 정말 좋은 점은 별도의 CD 파이프라인 구성 없이도 브랜치에 push하면 바로 CD 적용이 가능하다는 점입니다.

 

Github Page

이번에는 github에서 제공하는 github page 기능을 이용해 배포해보려 합니다.

github page는 CD 파이프라인을 github action을 이용해 구성해주어야 하지만 마찬가지로 정말 간단하게 배포가 가능합니다.

프로젝트에 github page 의존성을 추가해 줍니다.

npm install --save-dev gh-pages

 

다음으로 vite.config.js에서 base를 레포지토리 이름으로 변경해 줍니다.

자신의 repository 이름으로 base를 변경

 

다음으로 github page에 배포하기 위한 script 명령어를 추가해 줍니다.

 

마지막으로 페이지를 배포해 줍니다.

npm run build
npm run deploy

 

github page로도 간단하게 배포를 완료했습니다!

 

 

github page의 경우 CD 파이프라인을 구성하려면 추가적인 설정을 해주어야 합니다.

.github/workflows/deploy.yml 경로에 github action 파이프라인을 작성해 줍니다.

.github/workflows/deploy.yml name: deploy

on:
  push:
    branches:
      - main

jobs:
  build-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: checkout repository
        uses: actions/checkout@v3

      - name: setup node.js
        uses: actions/setup-node@v3
        with:
          node-version: 23

      - name: install dependencies
        run: npm install

      - name: build project
        run: npm run build

      - name: deploy to github pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

 

github 레포지토리의 설정 > actions로 와서 workflow permissions에 Read and write permissions로 변경해 줍니다.

정상적으로 워크플로우가 동작하는 것을 확인할 수 있습니다.

 

정리

프론트 배포와 CI/CD에 대해 공부해보고 싶었는데 이번 기회에 공부해 볼 수 있어 좋았습니다. 막상 해보니 많은 부분이 자동화되어 있어 쉽게 배포할 수 있다는 것을 배웠습니다. S3와 CloudFront를 이용한 정적 배포도 가능한데 Next까지 생각하면 소규모 프로젝트에서는 Vercel을 이용하는 게 훨씬 간단하고 SSR까지 활용할 수 있어 좋은 것 같습니다.