웹사이트 Build 및 깃허브(Github) Pages로 배포하기

리랙트 프로젝트로 만든 사이트를 깃허브에서 제공하는 무료로 HTML 파일을 호스팅 해주는 사이트인 Pages로 실제 배포해 보고자 합니다.

물론 무료인 만큼 제약사항으로 Static HTML, CSS, Javascript 정도 지원이 되니 적용 가능한지 사전에 인지가 필요합니다.

 

실제 만들어진 프로젝트 파일을 그대로 Github에 복사해서 올린다고 동작하지 않습니다.

배포하기 위한 작업 단계에 대해 설명드리고자 합니다.

 

1.  사전작업

•  지금까지 코딩한 파일은 localhost:3000 을 통해서 동작확인을 합니다.
   실행시 warning message 정도는 배포시 문제되지 않습니다.
• github.com 에 신규 계정 가입을 하고 프로젝트명에 해당하는 repository를 만듭니다.
  • 참고로 계정이름과 repository 명칭은 모두 소문자로 작성합니다.

• VS Code 터미널에서 $ npm install gh-pages 로 gh-pages 를 설치합니다.
  • 이것을 통해 웹페이지를 github 로 업로드 해주는 것을 허용하고 page 도메인에서 볼 수 있도록 해줍니다.
   

• github pages로 올라가는 URL 은 [github_user_name].github.io/[repository_name] 으로 정해집니다.
• package.json 에 homepage 로 상기 github URL을 등록합니다.

(...)
  "devDependencies": {
    "dotenv": "^16.3.1",
    "tailwindcss": "^3.3.3"
  },
  "homepage": "https://user_name.github.io/repository_name"
}

 2. 프로젝트 Build 하기

github에는 build 된 파일을 올립니다. 이를 위해 package.json 에 프로젝트를 build 하고 deploy(배포) 하는 script를 다음과 같이 추가합니다.

• 터미널에서 $ npm run build  → build folder 생성되고 배포용 파일(html, css, js, image 파일)이 만들어짐  
• "deploy" : "gh-pages -d build"  → build folder 파일을 github 로 업로드
• "predeploy" : "npm run build"  → deploy 실행시 자동으로 predeploy 를 실행하여 자동으로 build 파일을 생성

  "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"
  },

• $ npm run deploy 를 실행  →  설정한 homepage 로 배포되는 것을 확인

이제 github.io 페이지에서 정상 동작여부 확인합니다.