GitHub Pages로 배포한 Next.js 프로젝트에 커스텀 도메인 등록(+배포 후 커스텀 도메인 초기화 현상 방지)

이전 포스팅에서 GitHub Pages를 이용해 프로젝트 배포까지 마쳤다.

Next.js 프로젝트 Github Pages 배포

 

이제 배포한 사이트에 유료로 구매한 도메인을 등록하고, 구글 콘솔 및 네이버 서치 어드바이저 등록, 구글 애드센스 적용과정이 남았다.

시행착오를 상당히 많이 거쳤기 때문에 나중을 위해서라도 과정을 등록해 두고 싶었다. 기록을 하지 않으면 금세 휘발되어 버리기 때문에...

 

커스텀 도메인 등록

나는 hosting.kr 사이트에서 유료 도메인을 구매했다.

프로젝트를 위한 도메인은 하위 도메인으로 등록하고 싶었기 때문에, 하위 도메인을 등록하는 과정부터 진행했다.

 

 

하위 도메인 생성 (hosting.kr)

생성해 둔 하위 도메인이 이미 있다거나, 메인 도메인으로 등록하고 싶다면 패스해도 되는 부분이다.

hosting.kr > 도메인 > 나의 도메인에 들어가서 네임서버/DNS 탭을 눌러 새 레코드를 추가한다.

 

위와 같이 값을 입력했다.

이름에는 하위 도메인 이름을 입력한다.

내가 가진 도메인 이름이 example.com이라면, 이름에 abc를 입력했을 때 abc.example.com으로 하위도메인이 생성된다.

값에는 깃헙id.github.io를 입력한다. 깃헙 페이지로 배포한 사이트를 위한 도메인이기 때문에 깃헙에서 하라는 대로(...) 등록했다. 

관련 자료는 아래에 있다.

Managing a custom domain for your GitHub Pages site - GitHub Docs

docs를 확인해 보면, 위와 같이 다양하게 도메인을 등록하는 법을 설명하고 있다.

나의 경우 가장 마지막 항목을 따라서 그대로 값을 입력했다.

 

 

도메인 등록

깃허브 레파지토리 > Setting > Pages에 들어가서 Custom domain에 도메인을 입력하고 save 해주었다.

처음에는 A 타입 레코드와 주어진 ip 주소 중 하나를(페이지에 기입된 ip 중 아무거나 입력해도 된다) 입력하여 하위도메인을 등록하려 했는데, github pages 도메인 체크 과정에서 cname 사용하라는 에러가 떠서, cname 방식으로 도메인을 등록했다.

그러면 알아서 DNS를 체크해 주는데, 시간이 좀 걸리기 때문에 기다려주면 된다.

경험 상 DNS 체크가 되지 않더라도 상단 site 주소에 바로 도메인이 적용되어 사이트에 바로 접속해 볼 수 있었다.

커스텀 도메인이 등록된 모습

 

CSS 적용

이렇게 커스텀 도메인을 등록하니, 기존에 사용하던 도메인과 달라졌기 때문에 CSS 적용했던 부분이 프로젝트에 적용이 되어 있지 않았다. 이 부분을 수정하기 위해 package.json과 next.config.js에서 도메인 등록했던 부분 코드를 커스텀도메인으로 모두 바꾸어 주었다.

 

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: "export",
  assetPrefix:
    process.env.NODE_ENV === "production"
      ? "https://내 도메인"	// 이 부분 수정
      : "",
};

module.exports = nextConfig;

 

package.json

"homepage": "https://내 도메인",

 

 

커스텀 도메인 초기화 현상 방지

이렇게 하위도메인까지 모두 등록했는데, 이제 deploy를 할  때마다 custom domain이 기존 깃허브에서 제공하는 기본 도메인으로 초기화되는 현상이 발생했다.

이 부분은 아래와 같이 해결했다.

next.js 프로젝트로 가서 public 폴더 아래 CNAME 파일을 하나 만든다.

CNAME 내부에는 내가 등록한 도메인명을 입력하면 된다.

프로토콜 없이 도메인명만 입력한다.

이후에 다시 빌드 및 배포 진행하면 커스텀 도메인이 초기화되지 않고 유지됨을 확인할 수 있다.

 

 

 

+) 빌드와 배포를 쉽게

package.json

"scripts": {
    ...
    "bd": "npm run build && npm run deploy"
  },

npm run bd로 빌드와 배포를 동시에 할 수 있다.

 

 

 

 

---

참고

 

Managing a custom domain for your GitHub Pages site - GitHub Docs

[GitHub] 깃허브에 커스텀 도메인 사용하기

DNS check unsuccessful, yet the domain resolves to github pages · community · Discussion #75668

[Git-Pages] Github Custom Domain 설정 (hosting.kr / react) (2022)

react.js 빌드된 프로젝트 gh-pages로 배포할 때 custom domain이 초기화되는 현상