[React] Github page로 포트폴리오 웹페이지 만들기 #6 github custom domain / 도메인 연결하기

Github page로 포트폴리오 웹페이지 만들기

---

github page를 사용할때 기본적으로 접속가능한 url을 사용하여도 괜찮지만, 좀더 나만의 페이지를 가지기 위해 도메인을 구입해 연결해 보고 싶었습니다.

https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site

도메인은 가비아에서 구입하여 DNS를 등록 수정합니다.

먼저 github에 가비아에서 구입한 domain을 등록해 줍니다.

1. custom domain 등록

---

page가 있는 repository에 settings→pages 부분을 보시면 custom domain 을 등록할 수 있는 란이 있습니다.

저는 가비아에서 hiio420.com이라는 도메인을 구입하였습니다.

이 도메인을 입력해 줍니다.

2. DNS 등록

---

등록한 custom 도메인을 구입한 가비아로 이동해 DNS관리툴을 이용해 설정을 해줘야 합니다.

우선 DNS에 등록해야하는 레코드는 github 아이피와 url 주소를 입력해 주어야 합니다.

먼저 DNS 레코드에 A타입으로 설정하고 아이피를 입력해 줍니다.

이때 아이피는 커맨드에 nslookup 명령어를 통해 확인할 수 있습니다.

nslookup https://hiio42O.github.io

출력된 아이피중 아래의 4개를 모두 등록해 줍니다.

그리고 CNAME 타입으로 www 이름으로 기존의 github page url을 등록해 줍니다.

등록 후 저장 버튼을 눌러 줍니다.

정상적으로 완료가 되면, DNS check successful 이라는 문구가 나오게 됩니다.

hiio420.com 으로 접속해 보면 정상적으로 연결이 된것을 확인 할 수 있습니다.

3. CNAME 파일

---

custom domain을 등록하게 되면 현재 페이지가 돌아가는 gh-pages브랜치에 cname 파일이 생성되어 있는 것을 볼 수있습니다.

하지만, 로컬 build 디렉토리에는 cname 파일이 없습니다.

그렇기 때문에 빌드 후→gh-pages -d build 로 파일을 올리게 된다면, cname파일이 없어져 custom domain으로 접속 할 수 없습니다.

cname파일을 build파일에 생성 하기 위해 webpack plugin 중 cname-webpack-plugin을 설치해 사용해 보겠습니다.

https://www.npmjs.com/package/cname-webpack-plugin

설치!!

npm install --save-dev cname-webpack-plugin

webpack.config.js 파일의 plugins에 추가해줍니다.

const CnameWebpackPlugin = require("cname-webpack-plugin");
...
plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "index.html"),
    }),
    new CnameWebpackPlugin({
      domain: "hiio420.com",
    }),
  ],
...

설정 추가 완료 후 빌드를 실행합니다.

npm run build

cname파일이 생긴것을 확인할 수 있습니다.

이제 다시 gh-pages로 repo에 올려 주고 확인해 봅니다.

gh-pages -d build

정상적으로 올라 가서 , 접속이 잘 됩니다. !!

What is Next?

---

github page repository에 custom domain 을 연결 시켜 보았습니다.

아직 올리 만한 project가 마땅히 있지 않기 때문에

다음에는 본격적으로 메인 페이지를 간단하게 만들어보고 적용시켜 보겠습니다.

끝!!!