[Node.js] Node.js,Vite 프로젝트 Githubpages 배포하기

 

---

1.깃헙 리포지토리생성

Public으로 만들어서 만든 Vite,Node.js 프로젝트를 올린다.

 

 

 

 

2.Githubpages배포

settings에서 Pages 에서 Branch를 main으로 설정하고 save를 누른다.
아직 홈페이지에 들어가도 원하는 화면을 못볼것이다.

 

 

3.gh-pages 모듈을 설치

프로젝트에서 npm의 다음 모듈을 설치해준다.

npm i gh-pages

 

 

4. package.json 수정

"homepage" 에 자신의 깃헙 페이지 주소를 넣고

"predeploy": "npm run build", 
  "deploy": "gh-pages -d dist"
를 스크립트 내부에 추가한다.

{
  "name": "fruit-game",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
  "devDependencies": {
    "gh-pages": "^6.1.1",
    "vite": "^5.3.1"
  },
  "dependencies": {
    "matter-js": "^0.20.0"
  },
  "homepage": "https://asa9874.github.io/fruit-game/"
}

 

 

 

 

 

 

5. npm run deploy 

설정후 npm run deploy 명령어를 입력한다.

Debugger attached.
Waiting for the debugger to disconnect...
Debugger attached.

> fruit-game@0.0.0 predeploy
> npm run build

Debugger attached.
Waiting for the debugger to disconnect...
Debugger attached.

> fruit-game@0.0.0 build
> vite build

Debugger attached.
vite v5.3.3 building for production...
✓ 7 modules transformed.
dist/index.html                 0.38 kB │ gzip:  0.26 kB
dist/assets/index-BnCyqzMg.js  87.99 kB │ gzip: 28.48 kB
✓ built in 356ms
Waiting for the debugger to disconnect...
Waiting for the debugger to disconnect...

 

 

 

6.깃헙

정상적으로 되었다면 gh-pages라는 브런치가 생겨있을것이다.

 

만약자신이 vite.config.js 파일이 따로 없어서 base 주소가 설정되어있지않다면
gh-pages브런치에 가서 index.html에 들어가서 

<script type="module" crossorigin src="/assets/index-BnCyqzMg.js"></script>

이런식으로 앞에 /프로젝트 이름 주소를 붙여야한다.

<script type="module" crossorigin src="/fruit-game/assets/index-BnCyqzMg.js"></script>

 

 

 

 

 

그후 다시 깃헙페이지쪽으로 가서 브런치를 main 에서 gh-pages로 바꿔준다.

 

 

 

 

그후 몇분 기다린후 자신의 깃헙페이지 주소로 들어가면 정상적으로 배포한것을 확인할수있다.

 

https://asa9874.github.io/fruit-game/