깃허브 프로젝트 페이지 - gisheobeu peulojegteu peiji

들어가기 전에 githubpages에 간단히 알아보자.

github pages란?

쉽게말해 github저장소의 내용을 웹페이지로 호스팅 해주는 서비스이다. repository에 올린 소스를 직접 웹페이지를 통해서 보여주고 무료로 웹서버를 호스팅 할 수 있다.

대표적인 사례로 기술블로그로 많이 이용된다. 깃허브 페이지의 url은 다음과 같은 형식으로 생겨먹었다.

https://username.gibhub.io

와 같은 형태의 url을 본 적이 있을 것이다. 이 외 간단한 웹 프로젝트를 구현해볼 수 있으나, 저장소의 최대용량이 1G로 제한되어 있기 때문에 무거운 프로젝트는 힘들 것 같다.

github pages 구축 방법

먼저, 공식 사이트에 가이드 라인을 잘 제공하고 있다.

• 참조 가이드 : https://pages.github.com/

가이드에서 알 수 있듯이 repository 명을 username.github.io 로 만들면 별도의 작업없이 소스만 업로드 하면 호스팅이 되고, 저장소명이 기본 도메인이 된다. 즉,

https://userName.github.io

로 접속을 하면 저장소 루트의 첫페이지.html 또는 md 내용에 웹에 출력된다.

하지만!!! 깃허브에서 이런 메인 호스팅작업은 1계정당 1페이지 밖에 제공하지 않는다. 그렇다면 여러 Repository를 만들어 띄우고 싶다면 여러 계정을 파야할까?? 답은 단연 NO. repository명을 “userName.github.io” 형식이 아닌 자유형식으로 지정하되, 별도의 GitHubpages 활성화 설정을 해주면 “userName.github.io/repoName”형식으로 호스팅이 가능하다! 지금부터 별도 활성화 설정을 설명한다.

1. repositoy > settings > pages 진입 
   
2. 각 저장소의 source 에 대한 기본 설정은 None 이기 때문에 Github Pages 가 활성화 되어있지 않다. none에서 master로 변경하여 githubpages를 활성화 시켜준다.
   
   
3. 활성화가 완료되며 도메인/reponame/으로 주소를 제공한다.

   ex)
   https://userName.github.io/repo2/
   

   

주소를 눌러 시작 html페이지가 잘 뜨는지 확인해보자. 이렇게 설정을 해주면 여러 repositoy를 경로명만 다르게 해서 호스팅 할 수 있다.

🚫 404 에러 발생 시,

페이지 시작 html명을 경로에 추가하여 접속해본다. defualt인 index.html로 가정했을때

https://userName.github.io/repo2/index.html

로 시도를 해보자. 접속이 될 것이다.

자, 이제 제작한 앱을 깃허브 페이지에 배포해보자.

1. Github page 생성

• 메인 디렉토리 URL : https://{본인아이디}.github.io/
• 서브 디렉토리 URL : https://{본인아이디}.github.io/movie-app

우리는 메인이 아닌 서브 디렉토리에 배포를 할 것이기 때문에 별도의 세팅이 필요하다.

아직 Github page가 없다면 Github에 가입 후 생성해주어야 한다. 메인 디렉토리 페이지가 없으면 서브 디렉토리 페이지도 만들 수 없다.

Github page 생성

1) New repository

2) Repository name은 반드시 본인아이디.github.io로 한다.

서브 디렉토리 생성

1) New Repository

2) Repository 작명을 자유롭게 해준다.

2. Github page 패키지 설치

깃허브 페이지 생성을 도와주는 패키지이다. 프로젝트 폴더 경로에 설치해준다.

npm install --save gh-pages

3. Package.json

프로젝트 폴더에 있는 Package.json을 열어 아래 코드를 추가해준다.

1) "homepage": "https://본인아이디.github.io/movie-app"

2) "scripts" 하위에
"deploy": "gh-pages -d build",
"predeploy": "npm run 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"
  },

• "deploy": "gh-pages -d build"
  깃허브 페이지에 build 폴더를 배포하겠다는 의미
• "predeploy": "npm run build"
  배포 전에 build가 되어있지 않다면 build부터 실행

3. build

배포용 파일로 만들기 위해 build 명령어를 입력해준다.
predeploy 설정을 해두었기 때문에 필수 과정은 아니다.

npm run build

4. 배포

1) 리액트로 작업한 프로젝트 전체 코드 업로드

• README 파일이 없다면 생성
  echo "# movie-app" >> README.md

• 프로젝트 폴더를 git 저장소로 설정
  git init

• 프로젝트 폴더 내 모든 파일을 add
  git add .

• 프로젝트 폴더 내 모든 파일을 commit
  git commit -m "first commit"

• 메인 branch를 'main'으로 설정
  git branch -M main

• git 원격 저장소와 연결
  git remote add origin https://github.com/본인아이디/movie-app.git

• main branch로 git push
  git push -u origin main

main branch에 리액트로 작업한 원본 코드가 업로드 된 것을 확인할 수 있다. 배포용은 아니지만 전체 코드를 공개하고 싶을 때 유용하다.

2) 배포용 build 파일 업로드

npm run deploy

'Published'가 뜨면 성공이다.
gh-pages라는 branch가 자동으로 생성되며, 해당 branch를 선택하면 build 파일들이 업로드 되어있는 것을 확인할 수 있다. 깃허브 페이지용 파일임.

3) Settings로 들어간다.

4) Github Pages 섹션에서 Check it out here!을 클릭한다.

5) branch가 'main'으로 되어 있다면, gh-pages로 변경해준다.

6) 깃허브 페이지에 접속해본다.
Published까지 10~20분 정도 걸림.

https://본인아이디.github.io/movie-app/