[React] Vite + React Github Pages 배포

---

1.깃 연동

우선 만든 프로젝트를 github과 연동한다.
이때 레포지는 public 으로 해야한다.

 

 

 

2.gh-pages 설치

npm으로 gh-pages를 설치해준다.

npm install gh-pages

 

 

 

 

 

3.vite.config.ts

vite.config.ts의 base란에 /레포지토리이름/ 으로 설정해준다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from "tailwindcss";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
  base: '/product-recall-info/',
 
});

 

 

 

 

4.package.json

package.json의
scripts에 "predeploy": "npm run build","deploy": "gh-pages -d dist"

"homepage": "레포지 주소" 를 추가한다.

{
...
  "scripts": {
  ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
  ....
  },
  "devDependencies": {
  ....
  },
  "homepage": "https://asa9874.github.io/product-recall-info/"
}

 

 

 

 

 

 

5.npm run deploy

다음명령어를 입력하면 깃헙 페이지로 정적페이지가 생성된다.

npm run deploy

 

 

레포지토리의 Settings -> Pages에 가면 배포되고있는 주소를 확인할수있다.