이제.. 초라하게 나마 페이지를 만들었으니 배포를 해봐야겠지?
터미널에 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시간 잡아먹었다.