Vite로 빌드한 Vanilla JavaScript 프로젝트 Github Pages 배포

Vite로 빌드한 바닐라 자바스크립트 프로젝트를 Github Pages를 통해 배포할 수 있다.

간단한 프로젝트를 배포하고 싶을 때 Github Pages를 이용하면 편리하게 웹상에 나가 만든 사이트를 올릴 수 있다.

코드 수정 시 변경된 내용을 반영하기 위해 다시 빌드하고 배포하는 과정은 번거로울 수 있다.
Github Actions를 통해 origin에 푸시하면 자동적으로 수정 내용이 반영되도록 한다.

 

1.  Github Pages 세팅

• 배포하려는 repository의 Settings -> Pages -> Build and deployment의 source를 Github Actions로 변경한다.

 

 

2. Vite 설정 추가

• Github Pages를 통해 https://<Github User Name>.github.io/<Repository Name>의 형태로 배포하고 싶으면 vite.config.js에 아래와 같은 설정을 추가해야 위의 url로 접근할 수 있다.

import { defineConfig } from "vite";

export default defineConfig({
	base: "/repository_name/", // ex) base: "/test_repo/"
});

 

3.  Github Actions 워크 플로우 설정

• Github Actions를 통해 자동적으로 배포를 진행하려면 배포와 관련된 모든 작업 단계를 지정해야 한다.
• 프로젝트 루트에 .github/workflows 폴더를 만들어 vite 문서를 참고해 아래와 같은 내용의 deploy.yml 파일을 생성한다.

# 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@v4
              with:
                  node-version: 20
                  cache: "npm"
            - name: Install dependencies
              run: npm ci
            - name: Build
              run: npm run build
            - name: Setup Pages
              uses: actions/configure-pages@v4
            - name: Upload artifact
              uses: actions/upload-pages-artifact@v3
              with:
                  # dist 디렉터리 업로드
                  path: "./dist"
            - name: Deploy to GitHub Pages
              id: deployment
              uses: actions/deploy-pages@v4

 

4. origin main 브랜치에 푸시 시 Actions 탭 확인

• origin main 브랜치에 커밋한 내용을 푸시하면 자동적으로 배포가 진행된다. 
  이 과정은 Actions 탭에서 확인할 수 있다. 성공적으로 배포되면 초록색 체크 마크를 확인할 수 있다.

 

• 만약 배포에 실패하면 어떤 부분에서 실패했는지 내역을 확인할 수 있으므로 이를 수정해 다시 반영하면 된다.

 

5. 확인

• Actions 탭에서 오류 없이 배포가 완료되면 사진과 같이 url이 생성된 사이트를 확인할 수 있다.