yarn vite로 생성한 리액트 github pages에서 호스팅하기

리액트 강의를 듣고 투두앱을 만들면서 yarn vite로 생성해서 코드를 구현했다.

yarn dev로 실행시켜서 확인하면서 만들었고,

예전에도 npm이나 yarn으로 build해서 github에 올려 호스팅한 적이 있기 때문에

문제가 될게 아무것도 없다고 생각했었다.

 

하지만, vite는 build를 했을때 build 디렉토리가 아닌, dist 라는 디렉토리를 생성한다.

나는 처음에 몰랐다. dist로 생성된 것을...🤣

dist의 구조

 

레포지토리를 생성하고 add하고 commit하고 push까지 완벽했다.

 

하지만 내 github pages는 애꿋는 404 오류만 콘솔에 찍어줬다.

 

당황스러웠다. 난 인프런강의로 cat-zzal-maker도 만들어 올린 전적이 있었다.

그것도 리액트인데 ❓❗

 

당연하게 구글링을 했다.

그 과정에서 build가 아닌 dist 디렉토리가 생성된다는 것을 알게 되었다.

dist 이게 뭐 다른가?

다시 살폈다. github에 dist 디렉토리는 올라가지 않는다.

왜일까?

 

구글링해서 몇 가지를 따라해봤다.

하지만 404 오류만 내뱉을 뿐이었다.

 

팀원들과 대화 도중에 dist의 폴더가 올라가지 않는 이유는

.gitignore 파일에 dist가 있기 때문이라고 했다.

그것을 지우면 올라가지 않을까? 하는 의견이 나왔다.

난 놀라우면서도 한편으론 의심스러웠다.

그 파일에 dist가 있는 이유가 있지 않을까?

그래도 모르니 시도해봤다.

여전히 404. 어떤 리소스를 찾을 수 없는걸까.. 난 다 보내줬는걸.

 

2주의 삽질 끝에 구글링한 블로그에서 이렇게 말했다.

vscode도 한 번씩 리프레시하라고 🤣🤣

나는 당장 리프레시하고 GPT에 물어보고 레포지토리를 새로 생성해서 시도했다.

 

알려준 방법엔 내가 시도했던 것들도 있지만 왜인지 지금은 된다.

리프레시의 중요함을 깨닫게 되었다고할까.

---

 

1. vite.config.js에 base를 추가해준다.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/your-repo-name/', // 여기에 GitHub 저장소 이름을 입력하세요
});

 

2. github pages에 빌드된 파일을 자동으로 배포하려면 gh-pages 패키지를 설치한다.

yarn add gh-pages --dev

 

3. pakage.json 수정하기

{
	"name": "my-project-name",
	"version": "0.0.0",
	"private": true,
	"type": "module",
	"types": "./dist/index.d.ts",
	"main": "./dist/index.cjs.js",
	"module": "./dist/index.es.js",
	"exports": {
		".": {
			"types": "./dist/index.d.ts",
			"import": "./dist/index.es.js",
			"require": "./dist/index.cjs.js"
		}
	},
	"scripts": {
		"dev": "vite",
		"build": "vite build",
		"lint": "eslint .",
		"preview": "vite preview",
		"predeploy": "yarn build", // 빌드 후 배포
		"deploy": "gh-pages -d dist" // dist 폴더를 gh-pages 브랜치에 푸시
	},
	"dependencies": {
		"gh-pages": "^6.1.1",
		"react": "^18.3.1",
		"react-dom": "^18.3.1",
		"react-icons": "^5.3.0"
	},
	"eslintConfig": {
		"extends": [
			"react-app",
			"react-app/jest"
		]
	},
	"homepage": "https://id.github.io/repo-name", // GitHub Pages URL 설정
	"devDependencies": {
		"@eslint/js": "^9.9.0",
		"@types/react": "^18.3.3",
		"@types/react-dom": "^18.3.0",
		"@vitejs/plugin-react": "^4.3.1",
		"esbuild": "^0.23.1",
		"eslint": "^9.9.0",
		"eslint-plugin-react": "^7.35.0",
		"eslint-plugin-react-hooks": "^5.1.0-rc.0",
		"eslint-plugin-react-refresh": "^0.4.9",
		"globals": "^15.9.0",
		"tsconfig-paths": "^4.2.0",
		"vite": "^5.4.2",
		"vite-plugin-dts": "^4.1.0"
	}
}

4. git remote add origin 레포지토리URL 연결 한 후

 

5. yarn build 실행해서 build

6. yarn deploy 실행해서 배포하기

 

차근히 진행하니 호스팅이 완료됐다.

 

수정을 한 것이 있다면 다시 yarn build를 하면 자동으로 배포된다.

 

그 과정으로 힘들게 올린 vite로 생성한 리액트 github pages ✨

https://youd0313.github.io/todoFirst/

유디의 todo