개요

React로 만든 포트폴리오를 웹으로 배포하기위해 도메인을 적용하고 Github Pages로 배포한 과정에 대해 기록하고자 글을 작성하였다.

Github Pages 호스팅

배포를 위해 다양한 방법이 있지만 포트폴리오가 정적페이지에 가깝기 때문에 가장 간편한 Github Pages를 이용했다.

1. 배포하고자 하는 레포지토리의 Settings -> Pages 로 이동한다.

2. Branch를 선택하고 Save를 누른다.

이렇게 하면 약 3분 경과후 호스팅이 완료된다.
호스팅 주소는 https://깃허브id.github.io/리포지토리명 와 같이 생성된다.

하지만 Github Pages는 정적 페이지를 호스팅 해주는 서비스 이기 때문에 리액트 페이지를 빌드를 할 필요가 있다.

React 설정

1. package.json 설정

"scripts": {
	...
	"predeploy": "npm run build",
	"deploy": "gh-pages -d build"
}
"homepage": "Github Pages 호스팅 주소"

package.json 에서 다음과 같이 설정을 한다.

2. 빌드

npm run deploy 명령어를 수행한다.
이렇게 하면 gh-pages 라는 브랜치가 추가된다.

도메인 적용

포트폴리오 답게 내 이름으로 된 도메인을 적용하고 싶어서 가비아를 이용했다.

내 이름을 검색해보니 다양한 도메인이 나왔고 이 중에서 할인하고 있는 choijongmyung.site를 선택했다.

도메인을 신청하고 결제까지 완료하면 나의 도메인에서 조회가 가능하다.

DNS 설정

해당 도메인의 DNS 설정에 들어가서 다음과 같이 DNS 레코드를 추가해준다.
A 타입에 해당하는 저 값들은 깃허브의 DNS 값이다.
CNAME 타입에 값은 깃허브id.github.io 를 입력 해주면 된다.

도메인 적용

Github pages에 구매한 도메인을 등록하면 완료다.

결과물

https://choijongmyung.site https://jongmyung.site 에서 제 포트폴리오를 보실 수 있습니다.