GitHub Pages?

GitHub 저장소를 통해 정적 페이지 배포

• 무료, GitHub 기반

  필자가 배포하려는 사이트는 본인의 포트폴리오 용 웹 사이트이기 때문에 복잡한 로직이 없어 해당 방법을 채택하였다.

1. React 프로젝트 build

npm run build
만약 CRA(Create React App)로 만들었다면, 위의 명령어를 통해 build 폴더를 생성하여 배포 용 파일을 생성한다.

(아마 대부분은 CRA로 프로젝트를 생성하니 필수정)

2. gh-pages 설치

npm install gh-pages --save-dev

프로젝트 배포를 위해 필요한 패키지를 설치해준다.

3. package.json 설정

package.json에 다음과 같은 항목을 추가해야 한다.

• homepage
• scripts > predeploy, deploy

1) homepage

“homepage”는 배포 후 확인할 수 있는 링크를 의미한다.

https://{GitHub 사용자 이름}.github.io/{레포지토리 이름}

다음과 같이 정해진 형식이 있으니 참고.

"homepage": "https://leeseoleem.github.io/leeseoleem-portfolio"

필자는 다음과 같이 작성하여 넣어주었다.

위치는 name과 같은 라인이다.

2) scripts 항목 추가

scripts 내부에 다음 두 항목을 추가해준다.

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

이 항목을 통해 npm run deploy 실행 시 자동 빌드 및 배포까지 진행할 수 있다.

4. npm run deploy

npm run deploy

이제 해당 명령어를 통해 빌드 및 배포가 실행될 것이다.

작업이 완료되었다면 본인의 웹 페이지가 잘 완성되었는지 확인해보자!

참고로 수정 사항이 발생한다면 해당 명려어를 재입력하여 재배포해주자.

참고

/build 후에 이미지가 깨질 수 있다.

이때는 환경 변수를 사용하여 이미지 주소를 설정하는 것이 좋다.

<img src={${process.env.PUBLIC_URL}/images/logo.png} alt="로고" />

process.env.PUBLIC_URL 를 통해 이미지가 자동적으로 public 내부에 위치하고 있다 인식할 것이다.