영화 앱 만들기 -5-

제동현·2023년 2월 2일
0

이제.. 초라하게 나마 페이지를 만들었으니 배포를 해봐야겠지?

터미널에 npm i gh-pages를 입력해 패키지를 하나 설치해보자

이거슨 결과물을 github pages에 업로드를 할 수 있게 해주는 어썸한 패키지다.

네가 html.css.javascript를 올리면 그걸 웹사이트로 만들어줘서 전세계에 배포 시켜준다.

끼얏호우

우리가 설치를 마친 뒤 가장 처음에 해야 할일은 src 폴더안의 package.json안의 script 확인이다.

    "build": "react-scripts build",

찾았놔??

다음 터미널에 npm run build 명령어를 입력하면

우리 코드를 압축하고 최적화를 해준다 아마 쪼끔 시간이 걸릴 수도 있다.

완료되면 우리 디렉토리에 build라는 폴더가 생긴다.

이제 이 build를 github에 올리기전에 package.json에가서

    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "hompage": "https://DonghyeonJe.github.io/React-JS"
}

"hompage": "https://DonghyeonJe.github.io/React-JS"

"홈페이지":"너의 깃헙주소.io/코드가 있는 리포지토리
홈페이지 위에 있는 ,는 빼먹지 않도록 주의하자

다음은 스크립트를 추가해야하는데

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

상단의 script eject 다음 부분에 다음과 같이 추가한다.

    "deploy": "gh-pages -d build",
    "predeploy":"npm run build"

predeploy는 deploy가 되기전에 먼저 실행시켜주는 코드다
두번 일하지 않게 미리 필요과정을 진행시키는것이다.

니가 만약 deploy를 실행시킨다고해도
predeploy의 npm run build 코드가 먼저 실행된다.
그리고 그게 끝나면 gh-pages -d build가 실행된다.

https://donghyeonje.github.io/React-JS/

배포에서 또 1시간 잡아먹었다.

0개의 댓글