깃허브 프로젝트에 올린 웹 사이트를 인터넷에 올릴 방법이 없나 찾아보던 중 클릭 몇 번만으로 편리하게 깃허브 프로젝트를 인터넷상에서 배포할 수 있는 Netlify라는 서비스가 있어 사용방법을 소개하고자 합니다.

 

Netlify 서비스의 장점

  • 기본적으로 무료입니다.
  • 깃허브 등 저장소 사이트와 계정 연동만 하면 클릭 몇 번만으로 각종 애플리케이션을 빌드 및 배포할 수 있습니다.
  • https를 기본으로 지원합니다. 참고로 실제 호스팅 과정에서 https 설정은 매우 어렵습니다.

 

사용 방법

1) 깃허브 연동으로 사이트에 회원가입 후, app.netlify.com에 접속 후 로그인합니다. 그리고 [New site from Git]이라는 버튼을 클릭합니다.

 

2) Continuous Deploy 밑에 있는 저장소 서비스 중 하나를 선택합니다. 여기서는 GitHub를 사용합니다.

 

3) 검색창에서 올리고자 하는 프로젝트 이름을 검색한 후 선택합니다. react-redux-1 프로젝트는 create-react-app을 기반으로 만든 리액트 기반의 간단한 Todo 형식의 예제입니다.

 

 

4) 여기서 브랜치(branch)를 선택하고 Basic build settings 를 확인합니다. 참고로 npm 기반 프로젝트는 빌드 명령어 및 빌드 디렉토리를 자동으로 파악해 설정하므로 여기서 바로 [Deploy site] 버튼을 눌러 진행할 수 있습니다.

 

5) 사이트가 배포 중입니다. 배포가 완료되면 Netlify에서 정해준 URL로 접속할 수 있습니다.

 

6) 사이트 배포가 완료된 상태입니다. 

 

7) 기본으로 주어진 사이트 이름을 변경할 수 있습니다. 사이트 세팅에 들어간 뒤 Domain management의 사이트 이름에서 Options > Edit site name 을 클릭합니다.

 

8) 여기서 중복되지 않는 이름으로 설정한 뒤 [Save]를 누르면 도메인이 변경됩니다. 중복된 이름을 지정한 경우 설정이 변경되지 않습니다.

 

9) 사이트 도메인 react-www.netlify.app 으로 접속하면 애플리케이션이 정상적으로 배포되었음을 알 수 있습니다.