vite로 React 빌드한 후, github페이지에 배포하기

이번에 반응형 웹 클론 코딩을 하면서 vite라는 것을 써볼 기회가 생겼다.

vite가 무엇인지 여기서는 생략하고 vite 사용 방법과 그 후 github페이지에 배포하는 방법을 글로 정리해보려한다. 

 

vite가 무엇인지 간단하게 정리해 둔 참고 사이트 

Introduction | Cracking Vue.js

 

 

1. vite 설치

우선, 프로젝트를 시작할 폴더 디렉토리에서 터미널에 npm create vite@latest를 입력한다.

 

그런다음 프로젝트 이름과 사용할 framework를 묻는데 차례대로 설정해주면 된다. (enter키로 설정 확인)

나는 프로젝트 이름을 wake me up before you go go로 설정해보았다.

 

나는 리액트를 선택

 

리액트를 선택하면 react를 쓸건지 react-ts(타입스크립트)를 쓸건지 나오는데 자기가 사용할 스택에 따라 선택해주면 된다.

 

설정이 끝나면 아래와 같이 디렉토리가 만들어진다.

이걸로 끝이 아니고 만들어진 프로젝트 폴더(wake me up before you go go)로 들어가서 npm install을 해준다.

 

확실히 npx create-react-app 보다는 빠르다

 

+vite로 tailwind 사용하는 법

나는 tailwind를 같이 써보았는데, tailwind를 사용하기 위해서는 다음과 같이 설정한다.

 

터미널 창에서 아래와 같이 입력

npm install -D tailwindcss postcss autoprefixer

 

install이 끝나면 다음과 같이 입력

npx tailwindcss init -p

 

끝! 필요에 따라서 tailwind config 파일에 변수 및 스타일을 추가해주면 되고 작업을 시작하면 된다.

참고로 작업물 확인을 위해서는 npm run이 아닌 npm run dev를 터미널 창에 입력해주어야 한다.

 

 

 

2. Vite로 빌드한 프로젝트 배포하기

작업이 끝났으면 build후 deploy를 해야겠지. 무난하게 github page로 해보자.

우선 작업 프로젝트가 github 레파지토리와 연동이 되어 있어야 한다.

$git remote add origin http://레파지토리주소.git  을 터미널에 입력하여 연동.

 

 

①  레파지토리에 잘 연동이 되어 있으면 vite.config.js 파일을 열어서 base url을 수정해 준다.

이 때, base : "/레파지토리 이름/" 이렇게 입력해주어야 한다.

연결된 레파지토리 이름이 'responsive-web'이기 때문에 base에 똑같이 넣어준다.

 

 

②  터미널에서 npm run build 입력

 

그러면 이렇게 dist라는 폴더가 생긴다. 이 폴더도 레파지토리에 추가해주어야 한다.

 

 

 

③ 레파지토리에 dist 폴더 추가 

$ git add dist -f 를 입력하여 dist 폴더를 스테이지에 올린다. 그리고 차례로 다음과 같이 터미널에 입력한다.

 

$ git commit -m "커밋 메세지"

$ git subtree push --prefix dist origin gh-pages

 

(참고로 vs code에서 git 명령어를  쓸 때 앞에 달러사인 $ 표시는 안써도 된다...)

 

그러면  gh-pages라는 브랜치가 새로 생기고 이 브랜치가  deploy전용 브랜치가 되는 것이다.

 

 

 

④ 깃헙 레파지토리에서 pages 설정

해당 프로젝트 레파지토리에서 setting > pages로 들어간다.

 

 

Source는 Deploy from a branch로 선택한다.

바로 밑에 Branch 설정에서는 branch를 확인하면 gh-pages가 있는 것을 알 수 있다. 이 브랜치를 선택한다.

옆에 폴더는 /(root)로 놔둔다.

 

 

이렇게 하면 설정 끝! your site is live at "http://~~~" 이 주소로 들어가면 작업물을 확인 할 수 있고 반영되는 데에는 시간이 좀 걸릴 수 있다.

 

 

 

3. 빌드 후 수정하고 배포한 사이트에 반영되게 하려면?

이렇게 깃헙페이지를 통해서 배포를 다 하고 나서 코드를 수정해야 할 일이 생겨 수정 후 다시 배포사이트에 반영되게 하려면?이건 쉽다.

 

코드를 수정 한 후 다시 다시 npm run build를 해준다.그리고 dist 폴더를 다시 레파지토리에 commit 해주는데, 이 때 gh-pages 브랜치가 아닌 원래 기존 작업 브랜치에다가 해주면 된다.

($  git subtree push --prefix dist origin gh-pages << 이 명령어는 다시 쓸 필요 없다.)

 

조금 기다리면 깃헙 배포 사이트를 들어갔을 때 수정사항이 반영된 것을 확인 할 수 있다. ^__^