react CRA를 Mac 터미널에서 배포해보자.
1. 터미널에서 gh-pages 패키지 설치
npm i gh-pages
2. package.json 파일의 scripts에서 build 명령어 확인
npm run build를 실행하면 build 폴더가 생기고, 브라우저가 이해할 수 있도록 코드가 압축되고 최적화된 js 파일이 생성된다.
다음 단계에서 배포 전 build를 해줄 것이기 때문에 확인만 하고 터미널에 명령어를 실행하지는 않아도 된다.
3. package.json 파일 최하단에 다음의 코드 작성
"homepage": "https//<본인의_github_계정명>.github.io/<repository_name>"
4. package.json 파일의 scripts에 다음의 코드 작성
"deploy": "gh-pages -d build", // (1)
"predeploy": "npm run build" // (2)(1) gh-pages가 build 폴더를 3번에서 적은 홈페이지 웹사이트에 업로드하도록 하는 코드
(2) deploy 명령어를 실행하면 predeploy 명령어가 먼저 실행되어서 npm run build를 해줌
5. 터미널에서 deploy 명령어 실행
npm run deploy
6. 배포 완료: homepage에 적은 url 주소를 방문
배포 후 업데이트되는데 최대 4~5분 정도가 걸리기 때문에 처음에는 404 페이지가 뜨지만 시간이 조금 지나면 정상적으로 페이지가 보일 것이다.
사실 위의 과정은 굳이 CLI에서 하지 않아도 github 레포 > 상단 Settings > 왼쪽 사이드바 중간 Pages 메뉴에서 몇 번의 클릭만으로 가능한 작업이다. 그래도 이렇게 터미널에서 배포하는 방식도 있다는 걸 오늘 처음 알았기에 기록을 남기기 위해 포스팅을 작성해 보았다.
'배워서 남 주자' 카테고리의 다른 글
| [JavaScript] 내장 자료구조: Map과 Set (0) | 2023.01.08 |
|---|---|
| [JavaScript] 숫자 100000을 100,000으로 바꾸는 방법 (0) | 2023.01.03 |
| styled-components의 장점 (0) | 2023.01.01 |
| [알고리즘] 2 x n 보드 타일링과 피보나치 수열 (0) | 2022.12.30 |
| 배열 map 메소드 활용법 (0) | 2022.12.29 |