[REACT] 리액트 깃허브 페이지 커스텀 도메인(가비아)

1. 도메인 구매(링크 > 도메인 > 도메인 검색 > 사용하고 싶은 주소 검색)

https://domain.gabia.com/regist/regist_domain

가비아: 대한민국 도메인 점유율 1위

 

2. 도메인 DNS 설정

my 가비아 >

이용중인 서비스(도메인) >

DNS 관리툴 >

구매한 도메인의 우측에 있는 설정 버튼 >

DNS 설정 >

레코드 수정

 

아래 표와 같이 레코드를 수정/추가 한다.

타입	호스트	값/위치	TTL	우선 순위	서비스
A	@	185.199.108.153	1800		DNS 설정
A	@	185.199.109.153	1800		DNS 설정
A	@	185.199.110.153	1800		DNS 설정
A	@	185.199.111.153	1800		DNS 설정
CNAME	www	자신의 깃허브 아이디.github.io.	3600		DNS 설정

 

DNS 레코드 예시 사진

 

3. 커스텀 도메인 설정

깃허브 >

레포지토리 >

배포할 레포 >

pages(좌측 탭) >

Custom domain >

도메인 명 입력 후  save

도메인 명 예시

커스텀 도메인 설정 예시

 

4. 기다리기

대충 하루 정도 기다리면 완성!

 

(참고)라우터를 사용한 프로젝트라면?! (중요❗)

라우터를 사용한 프로젝트라면 App.js와 package.json 파일을 수정해야 한다.

1. 배포할 때 추가했던 package.json 파일의 homepage를 바꾼다.

(도메인을 설정했으므로 기본 경로를 바꾸어주는 것)

입력 예시

 

2. App.js에서 BrowserRouter를 사용하고 basename을 설정한다.

(기본 주소를 package.json의 homepage로 설정하는 것)

      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <Routes>
          <Route path="/" element={<Home />} />
		  ...
        </Routes>
      </BrowserRouter>

 

아직 배포를 안 했다면??

https://sooncoding.tistory.com/73

[REACT] 리액트 배포(깃허브 호스팅) 방법