허기영

Netlify

DESCRIPTION
필자는 멋쟁이사자처럼 대학 13기 운영진을 맡게 되어 간단한 정적 소개 페이지 개발을 준비하고 있다.
정적 웹 페이지 배포에 특화된 서비스인 Netlify에 대한 포스팅을 작성하고자 한다.

Netlify

소개 페이지 호스팅을 위해 다양한 배포 서비스를 찾던 도중 Netlify의 존재를 알게되었다.
AWS EC2, Heroku 등의 다양한 PaaS가 존재하지만, Netlify는 서버리스인 정적 웹 소개 페이지 배포에 적합하고 사용법이 간단하여 해당 서비스를 선택하게 되었다.

Netlify는 파일 업로드 외에도 깃허브 리포지토리와 연동하여 배포가 가능하고, 도메인 및 https와 같은 추가 설정들도 인터페이스화 되어있어 배포에 익숙하지 않더라도 사용에 부담이 적다.

해당 포스팅에서는 리액트 프로젝트 생성 후 깃허브 리포지토리를 통하여 배포화는 과정을 담고자 한다.

Repository 생성

repository

cra를 통하여 리액트 프로젝트를 생성한 후 리포지토리에 업로드를 진행하였다.
즉, 초기 프로젝트 생성 시 상태와 동일하다.

Netlify를 통한 배포

signup

필자는 GitHub 계정을 통하여 회원가입을 진행하였다.

access-to-repo

GitHub 가입 후 리포지토리 접근 권한에 추가적인 설정을 진행한다.
방금 생성한 리포지토리를 선택한다. 차후, 접근 가능한 리포지토리 수정이 가능하다.

netlify-1 netlify-2 netlify-3

Import from Git - GitHub 버튼을 클릭하여 내 리포지토리와 연동된 페이지에 접속한다.
접근 권한을 설정한 netlify-example 리포지토리만 목록에 출력된다.

기타 리포지토리를 추가하고 싶다면, 좌측 하단 Configure the Netlify app on the GitHub를 클릭하여 리포지토리를 추가적으로 등록해주면 된다.

netlify-4

이후, 사이트 배포에 앞서 설정을 진행한다.
Site name은 이후 초기 사이트 도메인이 되므로 필요에 따라 수정해주자.

netlify-5

최종적으로 빌드에 관한 설정을 진행한다.
리액트 프로젝트의 경우, 빌드 진행 시 /build 디렉토리에 빌드된 파일들이 생성된다.
따라서, Publish Directory는 build로 지정해준다.

Build Command는 CI= npm run build로 지정해준다.
띄어쓰기에 주의해서 명령어를 기입하여야 한다.

빌드 시 자동적으로 메인 파일은 index.html로 생성되게 된다.
그러나, 파일의 이름이 index.html이 아니면 오류가 발생하는 경우가 존재한다고 하니 참고하자.

netlify-6 netlify-7

설정을 다 마친 뒤 배포를 진행한다.
빌드 과정을 거치며 배포가 완료될 경우 성공 메시지를 보여준다.
View site deploy를 통해 배포된 사이트에 대한 대시보드로 이동하자.

netlify-8 netlify-9

사이트 도메인을 통해 접속해보면, 정상적으로 사이트가 배포된 것을 알 수 있다.

도메인 설정

필자는 가비아를 통하여 도메인을 구입하였다.
도메인 구입 과정은 해당 포스팅에서 생략한다.

netlify-dns-1 netlify-dns-2

대시보드 - Domain management로 접속하여 Add a domain 버튼을 클릭하여 도메인을 등록한다.

netlify-dns-3 netlify-dns-4 netlify-dns-5

도메인 입력하고 나면 2가지 도메인(본 도메인, www 하위 도메인)이 등록된다.
Awaiting External DNS는 도메인의 네임서버를 제대로 지정해주지 않아서 발생하는 문제이다.
우선, Options - Go to DNS panel로 이동하여 네임서버를 확인하자.

netlify-dns-6 netlify-dns-7

가비아의 도메인 관리툴에서 Netlify 대시보드에서 확인한 네임서버를 입력한 뒤 저장한다.
도메인 적용은 경우에 따라 하루 이상의 시간이 걸릴 수도 있다고 한다. 필자는 5분만에 완료되었다.

netlify-dns-8

구입한 도메인으로 접속하여보면 도메인이 적용된 것을 알 수 있다.
필자는 5분만에 적용이 되었다.

https 설정

https 설정은 Let’s Encrypt를 통하여 진행한다.
Netlify는 https 설정을 프로비저닝 해놓음으로써 버튼 클릭만으로 자동으로 https 설정이 가능하도록 한다.

netlify-https-1 netlify-https-2

Domain management 페이지 하단의 HTTPS 섹션에서 Verify DNS configuration 버튼을 클릭하면 자동적으로 https 적용이 진행된다.

netlify-https-3

https 적용에도 5분 정도의 시간이 소요되었다.
위와 같이 Let’s Encrypte를 통하여 인증서가 발급된 것을 알 수 있다.

결론

Netlify는 무료 웹 호스팅 서비스로서 프론트엔드단의 정적 웹 페이지 배포에 특화되어있다.
배포 및 도메인, https 적용 과정이 프로비저닝 및 인터페이스화 되어있어 사용에 부담이 적은 서비스이다. 포트폴리오 및 소개 페이지 배포 시 Netlify의 활용을 기대할 수 있을 것으로 예상된다.

#Reference