github에 올린 내 프로젝트를 url주소로 들어가 볼 수 있게 하려면?

난 방금전에 만들어본 오늘의 명언 앱을 기준으로 설명하겠음

 

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  base: '/quote-app/', // 깃허브 저장소 이름
  plugins: [vue()]
})

 

base경로는 꼭 자신의 현재 작업한 프로젝트 깃허브 리포지토리 이름으로 맞출 것

 

npm run build

 

배포용 빌드 실행ㄱ

빌드 돌려보면 아래 캡쳐처럼 dist폴더가 생성된것을 볼 수 있음

 

 

파일 몇 개 없어도, 정상이니까 너무 개의치않아도 됨..

 

 

npm install --save-dev gh-pages

 

gh-pages 패키지를 설치하겠음

이건 Github Pages에 정적 사이트(예: Vue로 만든 앱) 들을 자동으로 배포해주는 npm 패키지임

 

 

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
  }
}

 

 package.json에 deploy 스크립트 추가

 

 

npm run deploy

 

여기까지 실행하면 자동으로 gh-pages 브랜치에 dist폴더가 올라감

 

 

 

github --> 프로젝트 리포지토리 들어간 후 Setting --> Pages 로 들어감

Source는 Deploy from a branch

Branch는 gh-pages로 해놓고 저장

 

얼마 뒤에 url타고 들어가보면 자신이 만든 앱이 잘 배포되어 github url입력으로 볼 수 있게 된 걸 확인 가능할거임