vite로 리액트 빌드한 후 깃허브에 배포하는 방법
323
작성한 질문수 71
강사님 강의 보면서 저는 vite 를 이용해서 했는데요,
그런 경우는 깃허브에 배포를 어떻게 해야 하나요?
npm run build
npm install gh-pages
그 다음에 package.json 파일도 아래처럼 수정을 했습니다.
"homepage": "깃허브주소 넣음",
"deploy": "gh-pages -d dist"
그다음에 다시
npm run build
npm run deploy
하면 깃허브에 gh-pages 가 생겨야 하는데 생기지를 않아서요....
어디 부분을 잘못 한걸까요?
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. gangsugi님께서 vite를 사용하여 만든 리액트 프로젝트를 GitHub Pages에 배포하는 과정에서 문제를 겪고 계시네요. 이를 해결하기 위한 몇 가지 체크리스트를 제공해 드리겠습니다.
패키지 설치 확인:
gh-pages패키지를 설치한 것이 맞는지 다시 한번 확인해주세요.npm install gh-pages --save-dev명령어로 설치되어 있어야 합니다.scripts 설정 확인:
package.json에scripts섹션을 확인해 주세요.deploy스크립트가 정확히 아래와 같이 설정되어야 합니다:"scripts": { "build": "vite build", "deploy": "gh-pages -d dist" }브랜치 설정 확인: 배포된 브랜치를 GitHub에서 올바르게 설정했는지 확인해주세요. GitHub Pages 설정에서
gh-pages브랜치가 선택되어야 합니다.브랜치 문제 해결: 기존에 발생하지 않은 것이라면, 로컬에
gh-pages브랜치를 수동으로 만들어 푸시해보는 것도 방법입니다:
git branch gh-pages
git checkout gh-pages
git push origin gh-pages
만약 위의 단계들을 모두 확인한 후에도 문제가 지속된다면, 이 질문에서 논의된 방법들을 참고해 보세요.
이곳에서는 비슷한 질문에 대해 해결책도 제공하고 있으니 한 번 살펴보시면 도움이 될 것입니다: Vite로 리액트 프로젝트 GitHub Pages에 배포하기 관련 참고.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
API 적용 안되는 코드 수정 방법입니다.
0
69
1
고양이 이미지가 엑박이 뜨네요
0
50
1
npx 명령어 사용 불가
1
74
1
const 변수와 컴포넌트의 차이
0
88
1
강의노트
0
138
1
빌드할때 dist 폴더가 만들어지는데요,
0
763
1
js파일 업로드 요청
0
135
1
변경된 api 사용시 text 안나오는 문제
0
140
1
메인글자수정...
1
266
3
디렉터리 구조 관련하여 참고할 만한 예시가 있을까요?
1
310
1
https://cataas.com/undefined 로 나오는데 왜그런건가요?
1
590
4
고양이 사진이 깨져요.ㅜㅜ
2
358
3
강의 노트 위치를 모르겠습니다
1
342
1
깃 강의노트 어디서 볼 수 있나요?
1
379
2
이해가 안되는 부분이 있어요
1
360
1
api가 안불러와지네요...
1
657
4
진유림 선생님 너무 궁금해서 질문드립니다 ㅜ
1
329
2
react에서 컴포넌트 만들 때 대문자를 쓰는 이유
2
1154
2
https://cataas.com/ 여기 도메인이 죽어서 이미지가 보이지 않습니다 ㅠ
1
328
2
index.js 내용이 바꼈네용
1
316
2
프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.
1
258
2
html 코드 오류
1
459
2
고양이 이미지 깨져요
1
336
2
고양이 이미지 링크 깨짐 문의
0
775
1





