배포의 종류 (Deploy, Release, Distribute) 와 vscode에서 Gh-Pages 로 Deploy 해보기

하나의 프로젝트가 끝난다음 Github에서 web을 Publishing 하는 방법입니다!

Github을 가지고 gh-pages관련 패키지를 이용해 Deploy하는 과정입니다.

 

1. GitHub Repository 생성하기

 

2. 명령어 입력

yarn add gh-pages //# 또는 npm install gh-pages

*여기서  github pages는 github에서 무료 제공하는 서비스로 코드를 올리면 그걸 웹사이트화 시켜서 전세계에 무료 배포해줌

 

 

3. 빌드 실행하기

npm run build

하고 나면 내 폴더에 build 폴더(내가 작성한 코드가 압축되어 생성됨)가 생성됩니다.

 

 

4. GitHub에 Push하기

//# package.json
{
"homepage": "https://username.github.io/react-for-beginner"
}

//# package.json 맨 아래에 코드 추가

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build" //# 또는 yarn start
  },
  
  //# 중간 script부분에 코드 추가하기

 

5. 실행하기 

npm run deploy // 또는 yarn run deploy

 

*deploy를 실행하면 Node.js가 predeploy를 먼저 실행시킨다.

 

 

6. 결과적으로 gh-pages라는 디렉토리가 깃헙에 형성됩니다.

yarn run deploy와 같은 명령어를 입력하면 npm run build를 통해 전체 내용을 build합니다. 이후 deploy가 진행되면 내 깃허브에 gh-pages라는 폴더가 생성되고 관련 폴더에 build한 내용이 옮겨지게 됩니다.

 

---

 

배포의 종류

Deploy: 프로그램을 서버와 같은 기기에 설치해서 서비스 등을 제공하는 의미(이번에 한거)

Distribute: 제품을 사용자들이 사용할 수 있도록 서비스 등을 제공하는 의미

Release: 같은 제품을 새롭게 만드는 것(예: 새로운 버전을 배포, 새로운 아이피 번호로 부여)