1. 깃헙 페이지 만들고
2. package.json에 밑에 코드 추가하고
{
"homepage":"여러분 github page url",
...
}
3. npm run build 해준다음
4. build안의 파일을 그대로 올렸는데도 배포시 흰화면이 떳다..
(이걸로 며칠을 고생했는지...)
구글링과 팀원분들을 총동원해 알게 된 사실 .. (사랑해여 팀원분들. . . )
1. build파일의 index.html 경로가 잘못되어있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Blog</title>
<script defer="defer" src="./static/js/main.31d6264a.js"></script> //1번
<link href="./static/css/main.683dd473.css" rel="stylesheet" /> //2번
</head>
<body>
<div id="root"></div>
</body>
</html>저 1번과 2번 경로가 ./static이 되어야한다. (경로가 이상하게 되어 있었다..)
2.
npx create-react-app my-app
로 react 프로젝트를 생성하면 .gitignore에 /build 파일이 적어져있다.
(build파일이 안올라가서 드래그앤 드롭으로 했는데 이 이유였다니 . . . 허무하다 . . .)
이것을 지워준다.
그리고 push해주면 !!
아직 뭐 별것도 하지 않은 페이지지만 ...^^
드디어 성공했다!!
리액트 페이지 배포하는법을 정리하자면
1. 레파지토리를 생성하고 github page 만들기
2. 아래 코드를 package.json에 추가하기
{
"homepage":"여러분 github page url",
...
}
3. 아래 코드로 build해주기 (그러면 build 폴더가 생성된다.)
npm run build
4. build 안에 있는 파일중 index.html 의 경로를 잘 확인하고 build파일 푸시하기
(이때 .gitignore 에도 /build가 적혀있는지 확인하자! )
정말 오랫동안 삽질했던. . .에러 다신 보지 말자 ^^
'에러해결하기' 카테고리의 다른 글
| [React] unique한 key 값을 생성해주는 uuid 라이브러리 (1) | 2022.10.05 |
|---|---|
| [React Error] Function components cannot be given refs. (0) | 2022.07.05 |
| [React Error] missing in props validation (0) | 2022.07.05 |
| [React Error] 프로젝트 이름 에러 ( name can no longer contain capital letters..) (0) | 2022.06.13 |