GitHub pages에 배포(Deploy)

gh-pages..

• yarn add gh-pages
• branch를 gh-pages라 부름
• 어떤 HTML을 push하면 HTML은 index를 갖는데, 이렇게 되면 website는 무료로 제공됨
• 하지만, Branch를 만드는건 고통임 (merge,push등등..(git의 기능 용어들) 하는게 귀찮음)
• 그래서 gh-pages가 존재하는거임. 자동으로 돌아감.
• 주의할점, 깃허브에 올라간 프로젝트여야함
• Scripts에 다음과 같이 작성

"deploy": "gh-pages -d build",
"predeploy": "yarn run build"
"homepage": "https://wjdwndtlr.github.io/nomflix",

{
  "name": "nomflix",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "0.18.1",
    "gh-pages": "^2.1.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.11.0",
    "react-helmet": "^5.2.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "styled-components": "^4.4.1",
    "styled-reset": "^4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build", // yarn deploy 하면 predeploy먼저 실행된 다음 실행됨
    "predeploy": "yarn run build" 
  },
  
  "eslintConfig": {
    "extends": "react-app"
  },
  // 리액트를 위해 홈페이지를 구성 wjdwndtlr->깃허브 프로필이름
  "homepage": "https://wjdwndtlr.github.io/nomflix",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

• 깃허브홈페이지가서 해당 프로젝트로 가보면 branch가 두개가 되어있음
  하나는 master 또 하나는 gh-pages.
  
  
• brower router은 gh-pages와 같이 작동하지않음.
  hash router가 필요함( url에 #이 포함되는걸 말함)
  
  
• hash router을 사용안하고싶으면 이와같이 작성하면됨

export default () => (

  <Router>

    <>

      <Header />

      <Switch>

        <Route path="https://wjdwndtlr.github.io//" exact component={Home} />

        <Route path="https://wjdwndtlr.github.io//tv" component={TV} />

        <Route path="https://wjdwndtlr.github.io//search" component={Search} />

        <Route path="https://wjdwndtlr.github.io//movie/:id" component={Detail} />

        <Route path="https://wjdwndtlr.github.io//show/:id" component={Detail} />

        <Redirect from="*" to="/" />

      </Switch>

    </>

  </Router>

);

 

( git remote -v // 올린거확인)