[Vite + React] - Github page

준성·2024년 3월 1일

GitHub Pages의 정적 웹페이지로 배포를 해보자

시작

포트폴리오를 만들어보기 위해서 배포를 알아보던중 Github pages 를 이용해서 다른 분들도 제작하는 걸 확인하고
나 또한 시작해보고자 만들어봤다. 보통 create-react-app을 사용해서 많이들 배포하지만
vite 를 써보고자 하는 마음에 vite를 통한 배포를 하기위해서 준비를 해봤다.

준비

github.io

github page를 이용하기 위해서 우선 레포지토리를 하나 생성해야한다. 저장소명은 내 username 과 같게 설정해줘야
page가 오류없이 잘 뜨는걸 확인 할 수 있다.

Repository name

내 사용자명과 같이 지어준다. 내 경우에는 이미 있다고 오류가 나기에 빨간 글씨로 경고 문구가 뜸

Public

다른 사용자들도 볼 수 있어야하기에 공개적인 저장소로 설정해야함.

README file

선택 옵션이긴 하지만 페이지 확인용으로 체크하는게 좋다고 생각한다.

settings - pages 옵션을 들어가 확인해보면 페이지가 만들어져 있는걸 확인할 수 있다.

local

원격 저장소에서 나의 로컬 저장소로 따로 가져오는 작업을 하기위해서 git clone 을 이용하여 내 로컬과 연동시킨다.

Vite

로컬과 연결 되었다면 Vite를 설치하여 작업을 시작한다.
기본 README.md 파일 밖에 없기에 Vite 를 설치하여 페이지에 적용시킬 수 있게 만든다.

[공식 문서 참조] Vite : https://vitejs.dev/guide/

npm create vite@latest

따로 템플릿을 이용하여 내가 사용하고자하는 프레임워크를 사용할 수 있다.

// # npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template react-ts
// react 와 typeScript를 같이 사용하는 명령어

이후 GitHub Pages 정적 웹 페이지 배포를 시작하기전에 준비를 해야한다.

[공식 문서 참조] Vite : https://ko.vitejs.dev/guide/static-deploy.html

기본적으로 설치가 되면 vite.config.ts 에 base '/' 를 추가시켜 기본 배포 사이트를 연결시킨다.

만약 https://<USERNAME>.github.io/ 형태로 배포하는 경우는 생략하거나 기본값 /으로 지정하면 됨
https://<USERNAME>.github.io/<REPO>/ 형태로 배포하는 경우 /<REPO>/로 지정
이 값은 추후에 생성할 github 레포지토리 명과 동일해야 하며, 추후에 배포될 하위 주소명과 동일해야함

프로젝트 Root 경로에 .gitlab-ci.yml 파일을 생성하여 다음과 같이 설정하면 push 를 하게되면 자동적으로 사이트가 빌드 및 배포가 된다.

image: node:16.5.0
pages:
  stage: deploy
  cache:
    key:
      files:
        - package-lock.json
      prefix: npm
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
    - cp -a dist/. public/
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

git add, commit, push를 이용하여 수정된 사항을 원격 레포지토리에 반영시킨다.

리포지토리 설정 페이지에서 GitHub Actions를 선택한다.

Static HTML을 선택해 Action Workflow 등록을 위한 페이지가 열리면 다음과 같이 수정하면 된다.

# GitHub Pages에 정적 콘텐츠를 배포하기 위한 간단한 워크플로우
name: Deploy static content to Pages

on:
  # 기본 브랜치에 대한 푸시 이벤트 발생 시 실행
  push:
    branches: ['main']

  # Actions 탭에서 수동으로 워크플로우를 실행할 수 있도록 구성
  workflow_dispatch:

# GITHUB_TOKEN의 권한을 설정하여 GitHub Pages에 배포할 수 있도록 함
permissions:
  contents: read
  pages: write
  id-token: write

# 동시에 하나의 배포만 허용하도록 구성
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # 단순히 배포만 수행하기에 하나의 잡으로만 구성
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          # dist 디렉터리 업로드
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

완료가 되면 Actions 탭에서 확인할 수 있다.

그럼 내 사이트에서 들어가서 확인하면 정상적으로 연결이 되어있는 걸 볼 수 있다.

마무리

알아보면서 보통 CRA 를 사용하고 gh-pages 패키지를 이용하여 Github page를 이용했다.
Vite에 대해서 기존 CRA 의 보다 개발 속도나 측면쪽에서 우세하다는 얘기가 있어 써보고 싶다는 생각이 들었다.
보통 CRA, Vite 프로젝트의 크기 또는 요구사항에 갈려 여러 방면에서 선택을 하여 사용한다.
나의 포트폴리오는 대규모의 프로젝트가 아니지만, 다양한 경험을 위해서 사용해보는 것이 좋다고 판단했다.
마무리를 잘 해보려고 하겠다. 화이팅 👊