[React] 깃허브 : 사이트 배포하기

깃허브 배포 관련 공식 문서

배포 제공 : 배포 REST API를 사용하여 서버 및 타사 앱과 상호 작용하는 사용자 지정 도구를 빌드할 수 있습니다.

 

API, REST API 란?

 

API : Application Programming Interface

응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어에서 제공하는 기능을 제어할 수 있게 해주는 인터페이스
(인터페이스 : 사람과 사람, 사람과 사물 또는 기기를 연결하는 것)

즉, 어플리케이션 간 지정된 형식으로 요청과 응답을 할 수 있도록 연결하는 것을 말함.

 

REST API

인터넷 식별자 URI 와 HTTP를 기반으로 하며, 브라우저 간 호환성이 좋은 JSON 형식을 주로 사용하며,
각 요청이 어떤 정보나 동작을 위한 것인지 모습 자체만으로 추론이 가능하다.

=> HTTP 요청을 할 때 어떤 URI에 어떤 method 를 사용할지에 대한 개발자 간  약속

REST : 문서, 그림, 데이터 등의 자원을 이름으로 구분해서 해당 자원에 대한 상태, 정보를 주고받는 것 의미하며, HTTP Method를 활용하여 해당 자원에 대한 CRUD를 적용한다. (HTTP Method : GET, POST, PUT, DELETE + PATH)

+ DOM APIs, Location APIs, contextAPIs 등 라이브러리나 프레임워크에서 제공하는 기능을 api라고 부르기도 한다.

 

과정 시작

1. 모든 코드 github 에 올려놓기

repository 를 public으로 생성하여, 모든 코드 main/origin branch 에 올려두기.

처음 만들 때 부터 public으로 만들면 repository setting 에서 이 부분 설정 다시 안해도 된다.
(만약 private이었다면 설정 들어가서 가장 아래 Danger Zone 에서 변경하면 된다.) 

 
 2. Code and automation 탭 가장 아래의 Pages 이동

    2-1. Source 는 branch 관련으로 변경 후 domain 제대로 나오는 지 확인 후 

 

3. VS code 터미널

주의점 : 나는 헷갈렸지만 꼭 프로젝트 폴더 안에서 실행!

    3-1. react-scripts 패키지가 설치되어 있는지 확인

npm install react-scripts --save

    3-2. gh-pages 패키지 설치

npm install gh-pages --save-dev

    3-3. pakage.json 파일을 열고

        1. "homepage" : "http://[깃허브 이름].github.io/[레퍼지토리 이름]"
              - 여기서 레퍼지토리 이름은 소문자와 - 정도만 사용하는 것이 좋다.

         

           2. 아래 scripts 에 predeploy 와 deploy 추가

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

 

+ 만약 여기서 원활하게 사이트가 구동되지 않는다면 아래 코드 추가하기

"devDependencies": {
    "gh-pages": "^5.0.0"
  }

 

사이트 : http://[깃허브 이름].github.io/[레퍼지토리 이름]

        3-4. 터미널에서 아래 코드를 실행하면 배포 완료. 

npm run deploy

 

나는 헷갈렸는데 이렇게 배포하면 타인도 볼 수 있다.

 

배포 성공시 결과 

$ npm run deploy
\
> my-app@0.1.0 predeploy
> npm run build


> my-app@0.1.0 build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  54.07 kB  build/static/js/main.4c1f10c4.js
  1.78 kB   build/static/js/453.ed3810f9.chunk.js
  276 B     build/static/css/main.3e7e29ad.css

The project was built assuming it is hosted at /enter-to-reactjs/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment


> my-app@0.1.0 deploy
> gh-pages -d build

Published

 

+ 만약 사이트를 열었는데 README.md 가 나온다면?

Branch 탭을 gh-pages 로 변경 후 save 누르면 된다.

좌 : 과정 화면 -----> 우 : 마지막 화면

 

+ 추가 : gh-pages 브랜치 삭제 후 재배포 방법

이 방법은 로컬에서 삭제 하는 방법이다.

cd .. // 상위 폴더

git branch -d gh-pages // 로컬 저장소에서 삭제

 

이 방법은 원격 저장소에 있는지 확인하고 지우는 방법이다.

cd ..

git branch -r // gh-pages 있는지 확인
git push origin --delete gh-pages // 삭제

 

내가 났던 오류 

1. browserslist

틀린 코드

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],

 

옳은 코드

{
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ]
}

 

2. 의존성 오류

이 오류 발생 이유는 내가 프로젝트 폴더에서 실행하지 않았기 때문이었으니 꼭 확인하시길..

의존성 재 설치 방법

rm -rf node_modules package-lock.json
npm install

 

npm run build

혹시, 의존성 재설치 후 이 곳에서 오류를 겪고 있다면, 내가 프로젝트 폴더 안에 있는지 다시 살펴보자.