Netlify로 정적 사이트 배포하는 법

깃허브 계정 연동만 하면 클릭 몇번으로 배포를 할 수 있는 서비스가 있습니다.

 

Netlify란

정적 웹 사이트를 편하게 배포할 수 있게 해주는 서비스다. 쉽게 배포를 도와줄 뿐 아니라 변경사항도 자동으로 적용해주기 때문에 수정또한 간편하게 할 수 가 있다.

 

Netlify로 배포하는 순서

1. 가입하기

2.배포하기

3.도메인 수정

 

1.가입하기

로그인 또는 회원가입을 한다. 회원가입시, 원격 저장소 계정(ex: github) 으로 가입하는것을 추천한다.

 

2.배포하기

상단바의 Sites 선택후, Add new site 클릭!

Add new site를 클릭하면 세가지 항목이 나오는데 Import an existing project를 선택한다.

저장소를 선택한다. 나는는 Github을 사용하기 때문에 Github를 선택했음.

처음 클릭시에는 선택한 저장소와 연동하기 위한 권한 요청이 뜰텐데 요청이 뜨면 권한을 승인해준다.

배포하고 싶은 프로젝트를 선택

배포하길 원하는 브랜치를 선택한후, 빌드 커맨드가 있다면 설정해준다. 나는 npm 을 쓰기 때문에 npm run build로 설정해주었는데 yarn을 쓰시는 분들이라면 yarn build를 하면 될듯.

모두 설정해 주었다면 Deploy site 버튼 클릭한다.

 

그럼 빌드 성공 유무도 확인 할 수 있는 것이 뜬다. 클릭!

빌드 실패 로그가 뜬다. 

수정할 부분을 수정한뒤 다시 push를 해준뒤 확인해본다.

네모 친구를 클릭하면 배포된것을 확인할 수 있다. 

도메인주소를 주제에 맞게 바꾸고 싶다면 원하는 도메인으로 수정해주면 된다.

 

3.도메인 수정

상단바의 Site settings로 들어가서

Change site name버튼을 클릭해준다.

원하는 사이트 이름으로 설정해준 뒤 Save 버튼을 눌러준다.

Save버튼 클릭후 다시 이 네모네모 한 친구를 누르면 배포된 사이트를 확인할 수 있다.

 

Package.json에서 보편적으로(?) 설정 해줘야할것

CI=false

package.json파일에서 build에 CI=false를 해줘야 성공적으로 배포할 수 있다.

 

 _redirects 파일

public 폴더안에 redirect 파일을 만들어야한다. (뒤에 .js라던지, .tsx라던지 붙이지 않아도 된다.)

그리고 파일에는 /* /index.html 200 을 입력후 저장해준다.

이 작업을 해줘야 새로고침시에도 에러가 뜨지 않는다.

 

Netlify를 이용하여 배포를 해보면서 그저 기록을 해둔정도라 그럼 index.html를 적어주는것이 무엇을 의미하는지, CI=false가 무엇을 뜻하는지 등 자세히는 알지 못한다.  사이드프로젝트를 Netlify로 여러번 배포를 해보면서 조금씩 더 알아가야겠다.