(작성일: 2024.12.09)
도입 계기
나는 지금까지 두 개의 웹 서비스를 운영하고 있었다.
`AWS`의 `EC2`, `RDS` 등을 사용해 소스 코드를 배포한 후
`가비아`에서 구매한 도메인을 `AWS` 서버와 연결해 사용하고 있었다.
감사하게도 이제 취업했기 때문에, 더 이상 웹 서비스를 운영할 필요가 없어졌다.
또한, 매달 약 26,000원씩 지불하고 있었기에 이를 줄이고자
사용 중이던 AWS 자원들을 모두 삭제했다.
하지만, 도메인 주소는 1년 계약이기에 여전히 유효하고,
이미 여러 기업에 도메인 주소를 기재했기 때문에 접속자가 있을 수 있다고 판단했다.
그렇다면, `AWS`와 같은 `클라우드`나 `물리 서버` 없이 서비스 접속 종료 안내 페이지만
도메인과 연결하여 접속한 사용자에게 안내할 수 있는 방법에 대해 찾아보았다.
그 결과, `Github`에 단일 페이지 `HTML` 소스 코드를 `push`한 후에
`Github Pages`를 사용하면 개별 도메인과 연결할 수 있다는 사실을 알게 되었다.
그래서 간단한 `HTML` 페이지를 만들어 서비스 종료 안내를 하기로 했다.
1. 서비스 종료 안내 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>서비스 종료 안내</title>
<style>
/* Reset */
body, h1, p {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
}
.container {
background: #ffffff;
padding: 20px 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
}
.container h1 {
font-size: 24px;
color: #ff6b6b;
margin-bottom: 15px;
}
.container p {
font-size: 16px;
margin-bottom: 20px;
line-height: 1.5;
}
.container a {
display: inline-block;
padding: 10px 20px;
margin-top: 10px;
color: white;
background-color: #007bff;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.container a:hover {
background-color: #0056b3;
}
footer {
margin-top: 20px;
font-size: 12px;
color: #999;
}
</style>
</head>
<body>
<div class="container">
<h1>bootshelf 서비스 종료 안내</h1>
<p>안녕하세요, 소중한 고객 여러분.<br>
<strong>서비스는 2024년 12월 01일</strong>에 종료됩니다.<br>
저희 서비스를 오랜 기간 이용해주셔서 진심으로 감사드립니다.<br>
</div>
<footer>
© 2024 BOOTSHELF. All rights reserved.
</footer>
</body>
</html>
이전 프로젝트에서 사용하던 `div` `container`를 가져와 최대한 간단하게 만들었다.
또한, 모바일 접속자를 위한 `반응형` 웹 페이지로 구성했다.
2. Github Repository 생성
`HTML` 소스 코드를 관리할 새로운 `Repository`를 만든 후,
소스 코드를 `push`했다.
(상세 설명 생략)
3. Github Pages 설정
3-1. 상단 바에서 `Settings` 클릭
3-2. 왼쪽 중앙에 `Pages` 클릭
3-3. Branch: None -> `main` (`master`) 변경
3-4. 도메인 설정
- 구매한 도메인이 있다면, `Custom domain`에 구매한 도메인 주소 입력
- `Enforce HTTPS` 체크박스 클릭
- 구매한 도메인이 없다면, 상단에 `Github`에서 부여한 주소 사용
4. 가비아 도메인 설정
4-1. `My가비아`에서 수정할 도메인 클릭
4-2. 오른쪽 하단에 `DNS 정보` - `도메인 연결` 클릭
4-3. 수정할 도메인의 설정 버튼 클릭
4-4. `Github`의 `DNS 레코드` 값 입력
- `A` 타입 선택 후, 차례로 `4`개의 `DNS 레코드 값` 입력
참고
GitHub Pages 사이트의 사용자 지정 도메인 관리 - GitHub Docs
GitHub Pages 사이트의 기본 도메인을 사용자 지정 도메인으로 가리키도록 특정 DNS 레코드 및 리포지토리 설정을 설정하거나 업데이트할 수 있습니다.
docs.github.com
`가비아`에 `DNS` 설정을 먼저 한 후에,
`Github Pages`에 `Custom domain` 설정을 하는 것을 권장한다.
사용자의 네트워크 환경에 따라 다르지만, 비교적 금방 설정이 완료되었다.
결과
회고
서버가 없어도, `Github`에서 `웹 호스팅`을 할 수 있다는 점을 알 수 있었다.
간단한 설정만으로 HTTPS까지 적용할 수 있다는 점은 큰 장점이다.
열심히 개발한 웹 서비스들을 이제 볼 수 없어서 아쉽지만,
혹시라도 접속한 사용자에게 서비스 종료 안내를 할 수 있게 되어 다행이다.
'Git & Github' 카테고리의 다른 글
| [Github] Github README.md 꾸미기 (0) | 2025.05.14 |
|---|---|
| [Git] Git main -> develop 브랜치 변경 (0) | 2025.05.08 |