Netlify를 통해서 Static React App 배포해보기

Static App을 배포할 때 Netlify라는 무료로 사용할 수 있는 아주 좋은 서비스가 있다.

만약 당신이 서버가 없는 Static App을 배포하고자 한다면 Netlify를 사용해보자.

Netlify는 Static App에서만 작동한다. 즉, Front-end만 작동한다는 것이다.

여기에는 서버를 넣을 수 없다. 하지만 우리는 서버가 없는 React App을 배포할 것이기 때문에 Netlify를 사용해서 배포를 해볼 것이다.

1. Netlify 설정하기

필자의 경우 이미 배포한 앱이 하나 있어서 해당 앱에 대한 정보를 볼 수 있지만, 처음으로 배포하는 경우는 비어있을 것이다.

일단 Netlify에 로그인하게 되면 위와 같이 New site from Git 을 클릭하자.

다음으로는 Github, GitLab, Bitbucket 중에서 소스코드가 호스팅되길 원하는 서비스를 선택한다.

우리는 Github를 통해서 배포를 할 것이기 때문에 Github를 선택해주자.

배포하고 싶은 Repository를 선택하는 부분이다. Github에서 배포를 하고자 하는 Repository를 선택해주자.

마지막으로 Build command와 Publish directory를 정해주면 된다.

이것을 정해주게 되면 github에 push를 할 때마다 Netlify에서 자동적으로 해당 repository를 Build 해주게되고, 그 Build된 폴더를 통해서 배포를 진행해준다.

2. 내 앱의 homepage 설정

배포가 완료되었다면 배포한 앱의 package.json 파일에서 homepage를 추가해줘야 한다.

url은 배포된 Netlify 앱의 주소를 적어주면 된다.

homepage를 추가하는 이유는 index.html을 확인해보면 아래와 같이 $PUBLIC_URL이라는 homepage의 주소를 따라서 변하게 되는 값이 있기 때문이다.