[토익 시험장 찾기 2] 도메인 네임이 맘에 안들어서 어쩌지

Choi Wontak·2025년 4월 15일

비바이빙 빠르게_개발하기

비바이빙

목록 보기

2/8

비바이빙 - 빠르게 개발하기

AI 시대에 맞추어 2주에 한 프로덕트를 만들어내는, 작지만 빠른 개발을 지향하는 프로젝트입니다.

결과물 보러가기! >> 내 근처 토익 시험장 찾기

가리고 싶은 부끄러운 도메인 (문제 인식 단계)

깃허브 Pages로 배포를 하고 나니 한 가지 문제점이 있었다.
바로.. 깃허브 이름이 너무 드러난다는 것이다!
지금 URL은 다음과 같다.

https://roundtable02.github.io/location-map-app/

독자 분들께선 페이지만 잘 들어가지면 되는 것 아니야? 라고 생각하실지도 모르지만
나한테는 뭔가 이름 내놓고 사업하는 '김복자 할머니네 김치찜' 그런 느낌이다.

원래 백엔드를 공부해서 더 거슬려보이는 걸까..?

무엇이 필요할까 (기획 단계)

문제점

그래도 명색이 프로덕트인데 도메인에 내 이름이 들어가는 것이 좀 부끄럽다.

해결방안

도메인을 내 도메인으로 바꿀 수 있다면 어떨까?

구체화

무료 도메인을 발급받아서 Pages로 연결해보자.
HTTPS를 이용해 안전한 페이지로 인식되었으면 좋겠다!

어떻게 만들까? (설계 단계)

Pages에서 외부 도메인 연결하기

깃허브 Pages에는 Custom Domain을 연결할 수 있도록 기능을 제공하고 있다.
심지어 Enforce HTTPS가 있어 HTTPS 연결까지 자동으로 지원해준다!

Pages에서 개인 도메인만 달아주면 성공할 것 같다.

만들어보자! (개발 단계)

Duck DNS를 이용해 무료 도메인 발급받기

이전에 다른 프로젝트에서 모바일 클라이언트와 안전한 연결을 위해 무료 도메인을 발급받은 적이 있다.
그때 사용했던 것이 DuckDNS이었는데, 간단하게 개인 도메인을 무료로 발급받을 수 있어서 좋았던 기억이 있다.

https://www.duckdns.org/

duckdns.org 도메인을 GitHub Pages에 연결
DuckDNS → GitHub Pages 리포지토리 주소로 연결
1. GitHub Pages 프로젝트 루트에 CNAME 파일을 추가
2. git add . && git commit -m "Add CNAME" 후 푸시
3. GitHub에서:
리포지토리 > Settings > Pages
Custom domain 입력
Save 후 "Enforce HTTPS" 체크박스 활성화되면 반드시 체크!
4. DuckDNS에서:
도메인 DNS 설정 → CNAME 레코드 추가

이 방식대로 하면 될 것 같다!

Duck DNS의 문제점

그런데.. 아무리 기다려봐도 이 Check in Progress가 끝나질 않았다.
Enforece HTTPS 자체가 활성화되지 않아서 4번으로 못 넘어가고 있었는데, 알고보니 DuckDNS는 CNAME 설정을 지원하지 않는 것이었다...

User가 Domain으로 접근하면, DNS에서 이 도메인을 어디로 연결할 지를 판단해야하는데, 그 과정을 누락했기 때문에 연결할 수 없는 것이다.

많이 쓰는 것 같은 freenom은,

도메인 강탈 문제
HTTPS 연결시 Cloudflare 같은 중계 서비스를 이용해야 하는 것

과 같은 문제가 있어 논외로 두었다.

리버스 프록시 (Reverse Proxy) 이용하기

리버스 프록시란?

클라이언트를 대신해 다른 서버에 요청을 전달하고, 받은 응답을 다시 클라이언트에게 전달하는 서버

EC2 서버에서 nginx로 리버스 프록시를 구현하면 내 도메인으로 접속했을 때 github pages에 호스팅 되어있는 내 프로젝트로 연결 할 수 있을 것이다!
또한, 리버스 프록시로 HTTPS까지 구현한다면, 최초의 조건에 모두 부합한다.

우선 EC2 프리티어 인스턴스를 하나 열어주고,

이전에 서버가 메모리 문제로 뻗은 적이 있어서 스왑 메모리도 설정해주었다.

[ChatGPT와 함께 진행하였습니다.]

nginx 설치

sudo apt install nginx -y
sudo systemctl enable nginx
sudo systemctl start nginx

# 설정 파일 수정
sudo nano /etc/nginx/sites-available/default

설정파일 (뒤에서 수정하는 부분이니 참고해주세요)

server {
    listen 80;
    server_name your-subdomain.duckdns.org;

    location / {
        proxy_pass https://username.github.io/your-repo/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

sudo nginx -t  # 설정 테스트
sudo systemctl reload nginx

이제 동적 ip를 duckdns에 자동 갱신해준다.

mkdir duckdns
cd duckdns
nano duck.sh

# duck.sh에 입력
echo url="https://www.duckdns.org/update?domains=your-subdomain&token=YOUR_TOKEN&ip=" | curl -k -o ~/duckdns/duck.log -K -

chmod 700 duck.sh
(crontab -e)  # 매 5분마다 갱신
*/5 * * * * ~/duckdns/duck.sh >/dev/null 2>&1

이제 Let's Encrypt로 HTTPS 인증서를 발급한다.

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your-subdomain.duckdns.org

# 자동 갱신 확인
sudo certbot renew --dry-run

요런 404 에러가 발생했다..

알고보니 Github Pages는 Host가 https://roundtable02.github.io일 때만 페이지를 서빙하고, 지금은 Host를 duckdns로 인식해서, 문제가 발생한 것이다. 다음과 같이 해결하면 된다!

location /location-map-app/ {
        proxy_pass https://roundtable02.github.io/location-map-app/;
        proxy_set_header Host roundtable02.github.io;
        proxy_set_header X-Real-IP $remote_addr;

        # GitHub Pages가 압축하는 경우를 대비해 인코딩 제거
        proxy_set_header Accept-Encoding "";
        }

결국 성공!
https://bevibing.duckdns.org/location-map-app/