gh pages로 리액트 앱 배포하기

zh025700·2022년 10월 9일
0

Web front

목록 보기
12/13

맨날 배포를 해도 까먹으니 포스팅을 해야겠다.

1단계 gh-pages 다운

터미널에

npm i gh-pages

명령어로 깃허브 페이지를 다운받는다.

2단계 json script 변경

package.json 파일에서
script를 찾는다

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
  },

이렇게 만들어 준다.

3단계 hompage 추가

package.json 파일에 "hompage"를 추가해준다.

"homepage": "https://${깃허브 유저네임}.github.io/${레포네임}"

업로드

이제 터미널에 아래 명령어를 입력하면 된다.

npm run deploy

오류들..

Failed to load resource: the server responded with a status of 404 ()

Manifest: Line: 1, column: 1, Syntax error.

index.html에 원래 있는 manifest부분을 아래의 것으로 바꿔주자
rel이 "manifest"인것을 "/"를 추가한것이다.

<link rel="/manifest" href="/manifest.json" crossorigin="use-credentials" />
  • 주석처리된 부분도 다 지우자

라우터 관련

BrowseRouter

hompage에서 맨뒤에 /를 추가하자

"homepage": "https://${깃허브 유저네임}.github.io/${레포네임}/"
profile
정리

0개의 댓글