Netlify CLI 로 배포하기

보통 간단한 프로젝트의 경우 Github Pages를 이용해서 배포를 했습니다.
하지만 Public repogitory에 한해서만 무료로 배포가 가능하다는 단점이 있습니다.

그래서 Public/Private에 상관없이 배포할 수 있는 Netlify를 이용해보려고 합니다!

netlify-cli 설치

$ npm install netlify-cli -g

설치가 완료된 후 다음의 명령어를 통해 버전을 확인해보세요.

$ netlify -v

수동 배포

$ netlify deploy

배포를 진행하면 다음의 질문들이 나옵니다. 원하는 답변을 선택하거나 입력해주세요!

? What would you like to do? (선택)
? Team: (선택)
? Site name: (입력)

이어서 다음 질문이 나오는데, 이 때 build를 바로 입력하거나 엔터로 넘어가도 됩니다.

? Publish directory (Enter / build)

그리고 Netlify 사이트에서 배포 상태를 확인해봅시다.

Netlify와 연결은 되었는데 아직 배포는 정상적으로 이루어지지 않았습니다.

build 디렉토리 생성

위 단계 전에 build 디렉토리를 생성해야 합니다.
왜 이렇게 설명했냐고 물어보신다면.. 저도 이렇게 했거든요.. 힣

$ npm run build

netlify deploy 명령어를 수행한 후 최하단에 다음과 같은 메시지가 나타납니다.
(수동 배포 터미널 스크린샷 참고)

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
⇒ draft URL을 통해 정상적으로 동작한 것을 확인했다면, 아래 명령어를 통해 main site URL에 배포하세요.
netlify deploy --prod

제가 정상적으로 build 디렉토리를 생성 후 명령어를 실행했으면 draft URL을 통해 기능을 확인할 수 있지만 build 디렉토리를 생성하지 않고 수행해서 draft URL로 접속하면 페이지가 나타나지 않습니다.

그래서 저는 정상적으로 동작하는 것을 가정하고 --prod 플래그를 이용해서 배포하겠습니다.

$ netlify deploy --prod

그럼 다시 아래 질문이 나옵니다. 이번에는 build를 잘 입력해봅시다.

? Publish directory build

배포가 정상적으로 이루어졌습니다.
Website URL이 배포 링크입니다. 해당 링크로 접속하면 정상적으로 웹 사이트가 나타납니다.

그리고 .netlify 디렉토리가 생성되고 .gitignore에 .netlify가 자동으로 추가됩니다.

Github repository 연결 및 자동 배포

Netlify
⇒ Team 선택
⇒ Site 이름 선택(배포 시 입력했던 Site name과 동일)
⇒ Site configuration
⇒ Build & deploy
⇒ Continuous deployment 로 이동

Link repository 버튼을 클릭합니다.

Github repository를 배포했으니 Deploy with Github을 선택합니다.

repository 목록에서 배포를 진행했던 repository를 찾아 선택합니다.

그대로 Deploy repository 버튼을 누르면 repository와 연결이 됩니다.
다음과 같이 배포 상태를 확인할 수 있고, 이 후 main 브랜치에 커밋을 할 때마다 자동으로 배포가 진행됩니다.

배포 링크 삭제하기

배포 후 문제가 발생했을 때 삭제하고 다시 배포를 진행할 수 있습니다.

Site configuration
⇒ General
⇒ Danger zone
⇒ Delete thie site 선택

그리고 .netlify 디렉토리까지 삭제해주세요.

마무리

• Public repository만 배포해보았는데, 이번 기회에 private repository도 배포를 해보았습니다.
• Vercel에서도 private repository를 배포할 수 있습니다.
• 위에 나타나는 링크를 접속하더라도 정상적으로 나타나지 않을 겁니다. private 이라서 임의의 프로젝트 이름으로 변경해서 올린 스크린 샷이거든요.. 힣

참고

• Get started with Netlify CLI
• Netlify 배포하는 방법
• [React] 프로젝트 배포 방법(GitHub, Netlify)