정적 웹 사이트 (js/html/css만 존재하는 형태)로 서비스 제공이 필요할 때 가장 편하게 구축할 수 있는 방법으로 Netlify가 있습니다.
빌드/배포/호스팅까지 정적 웹 사이트를 제공하기 위한 모든 기능을 쉽고 편하게 제공하다보니 많은 분들이 사용하고 계시는데요.
GithubAction이나 TravisCI와 같이 별도의 CI 서비스를 구축할 필요도 없다보니 한번쯤 익혀놓으시면 정말 요긴하게 쓰일데가 많습니다.
가격 역시 개인이 무료로 쓰기에 불편함이 없습니다.
자 그래서 이번 시간에는 Netlify로 간단한 정적 사이트를 배포하는 방법을 진행해보겠습니다.
1. 가입하기
아직 가입을 안하신 분들이라면 아래 과정을 따라 가입부터 시작해보겠습니다.
Netlify 사이트를 방문해보시면 아래와 같이 우측 상단에 Signup 버튼이 있어, 이를 선택합니다.
가입 방식이 여러곳인데, 저는 Github 계정만 있어 Github을 선택합니다.
필요한 추가 정보를 등록하면 가입이 완료됩니다.
가입이 완료되면 아래와 같이 퀵가이드 팝업이 뜨는데요.
일단 퀵 가이드가 아닌 일반적인 방식으로 배포를 진행해보겠습니다.
2. 배포하기
가입 후 로그인된 페이지를 보시면 아래와 같이 New site from Git 버튼이 있습니다.
이를 클릭합니다.
그럼 아래와 같이 온라인 저장소 중 어떤 곳에서 코드를 가져올지 선택하는 화면이 나오는데요.
제 코드는 Github에 있으니 Github을 선택합니다.
그럼 로그인된 Github 계정이 사용할 수 있는 사용자와 그룹이 나오는데, 여기서 본인의 사용자를 선택합니다.
특별히 Netlify가 접근하면 안되는 저장소가 있는게 아니기 때문에 접근 권한을 "All repositories" 를 선택하고 Install 버튼을 클릭합니다.
그럼 아래와 같이 해당 계정이 보유한 저장소들이 보이는데요.
Netlify로 배포할 저장소를 검색해서 선택합니다.
테스트에 사용된 저장소는 tistory-ppm입니다.
혹시나 배포가 실패해서 디렉토리 구조를 비교해보고 싶으신 분들은 참고해보세요.
그럼 아래와 같이 배포 환경을 설정합니다.
빌드 커맨드와 정적 웹 사이트로 제공될 디렉토리 위치를 선택하셔야 하는데요.
저 같은 경우 아래와 같은 구조로 되어 있어 public 디렉토리를 등록하였습니다.
설정이 다 끝나셨으면 Deploy site를 클릭합니다.
그럼 아래와 같이 배포가 진행되는 것을 볼 수 있는데요.
Site deploy in progress 링크를 클릭해보면 배포 현황을 볼 수 있습니다.
아래와 같이 현재 빌드중인 링크를 클릭해보면
아래와 같이 빌드와 배포 로그를 볼 수 있습니다.
정상적으로 성공했다면 아래와 같이 Complete 로그를 볼 수 있습니다.
여기까지 하셨으면 Netlify로 정적 웹 사이트 배포와 호스팅까지는 끝났습니다.
실제로 아래와 같이 배포가 성공한 경우에는 유니크한 이름의 xxx.netlify.app 도메인이 붙어서 해당 사이트가 제공되는 것을 볼 수 있습니다.
다만, 이렇게 정체를 알 수 없는 도메인 보다는 그래도 식별가능한 주소이면 좋겠죠?
별도의 DNS 구매를 하려면 돈이 드니 xxx.netlify.app에서 xxx만이라도 원하는 이름으로 변경해보겠습니다.
3. prefix 도메인 변경하기
해당 배포 페이지에서 좌측 상단의 Site overview를 클릭하시면 아래와 같이 Site settings가 있습니다.
이를 클릭합니다.
그럼 아래와 같이 현재 서비스 되는 사이트의 여러 정보들을 설정할 수 있는데요.
여기서 Site name이 xxx.netlify.app에서 xxx를 나타냅니다.
하단의 Change site name을 클릭합니다.
여기서 원하는 이름으로 변경합니다.
그러면 아래와 같이 지정된 이름으로 netlify 앱의 prefix 도메인이 변경된 것을 확인할 수 있습니다.
4. 뱃지 달기
혹시나 TravisCI와 같이 README.md 에 뱃지를 달고 싶으시다면 Site Details 하단에 아래와 같이 뱃지 스크립트가 나옵니다.
이를 복사해서 README.md 파일에 붙여넣으시면 뱃지도 정상적으로 확인할 수 있습니다.
