[DevOps] React, gh-pages를 통해 웹 페이지를 배포해보자! (3)

배포도 잘되고 페이지도 잘 보이는데 불편한게 하나 있다.

바로 도메인이다.

현재 기본으로 사용하는 도메인은 github에서 제공하는 도메인이라 살짝 길고 불편할 수 있다.

여기에 커스텀 도메인을 사용해보자.

 

커스텀 도메인

일단 package.json에서 사용할 도메인으로 변경하고 push한다.

// package.json
{
  "homepage": "https://page.riroan.com",
// 생략 ...

 

그 후 도메인을 구매한 페이지에서 CNAME으로 사용할 도메인을 riroan.github.io를 가리키게 설정한다.

나의 도메인이 깃허브를 찾을 수 있도록 레코드도 추가해야 한다.

 

그리고 깃허브 Repository에서 Settings -> Pages 밑으로 가면 custom domain이 나온다.

여기에 https를 제외한 도메인을 적는다.

위의 예시에서는 page.riroan.com만 적는다.

DNS check successful이 나오면 성공!

 

지금은 http를 사용하고 있지만 Enforce HTTPS를 체크하면 깃허브가 https접속을 할 수 있도록 설정해준다.

 

CNAME 파일

어떠한 이유로 custom domain을 설정했는데 github.io로 돌아가는 상황이 발생한다.

그럴때는 프로젝트의 적당한 곳에 CNAME파일을 만들어 커스텀 도메인을 저장하면 된다.

// CNAME  <- 파일 이름
page.riroan.com