[React] gh-pages로 git-hub 배포하기

mangosteen·2024년 2월 25일

react

목록 보기
2/8
  1. npm i gh-pages 로 gh-pages를 설치.
    gh-pages로 build 전 package.json을 세팅.

  2. package.json > homepage 추가
    package.json의 가장 하단에 gitHub url를 homepage로 추가 (레포지토리까지 포함).

// package.json
{
  "어쩌구" : {
    ...다른 설정들
  },
  "homepage": "https://mangosteen977.github.io/nomadcoder-react"
}
  1. package.json => scripts에 deploy, predeploy 추가
    :install한 gh-pages 실행에 대한 설정 추가.
// package.json
  "scripts": {
    "어쩌구":"...다른 설정들",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
  }
  1. npm run deploy 실행
    실행 시 predeploy가 먼저 실행되어 npm run build로 build파일을 생성 후,
    deploy가 실행되어 gh-pages -d build로 homepage에 기재한 레포지토리에 gh-pages라는 브랜치에 build파일이 올림. (이후 github.io... 배포 확인 후 페이지 확인하면 됨.)

추가. React dom 버전 6 이후에서 router(route, Link 등) 동작 안하는 경우
=> path경로 앞에 ={${process.env.PUBLIC_URL}/} 을 추가.
=> 그리고 잘 모르겠는데 삼항연산자 안에 들어있는 컴포넌츠의 path에서는 '={${process.env.PUBLIC_URL}/} ' 안됨..?
잘 몰라서 Link 부분만 연산자 밖으로 빼냄...^_^;;;

// ex.)
<Route path={`${process.env.PUBLIC_URL}/`} element={< Home />}>

<Link to={`${process.env.PUBLIC_URL}/movie/${id}`}>
profile
Mong muốn trở thành chủ cuộc sống của tôi🔥.

0개의 댓글