요즘은 원티드 프리온보딩 프로그램에 등록해 간만에 열몇시간씩 컴퓨터 앞에 붙어있는 생활을 하고 있다. 다양한 세션을 통해 많은 것을 배울 수 있었는데 가장 좋았던 건 S3를 통해 배포하는 걸 드디어 배웠다는 거다!
그럼에도 왜 netlify 사용법을 가져왔느냐 하면, 훨씬 쉽기 때문이다.🤣 S3에 배포하고, github actions로 자동배포가 되게 한땀한땀 셋팅하는 것보다 한 큐에 뚝딱 되는 게 있다는데 안 할 이유가 X. 그리고 팀원이 알려준 덕도 크다 🍀 사랑해요 2팀~
그럼 리액트 프로젝트를 배포 해보자!
Netlify는 정적 웹 호스팅 및 웹 개발 서비스를 제공하는 플랫폼이다. 더 간단히 말하면 정적 사이트를 손쉽게 배포할 수 있는 곳!이랄까.
무엇보다 100GB용량에 빌드 300분까지 무료로 사용 가능하고, SSL 인증서를 자동으로 제공하기까지 하는 데다 CI/CD도 구축할 수 있다!
프엔 개발 취준생에게 빛과 소금...✨
유사한 서비스로는 vercel이 있다. vercel도 매우매우 간단하다고 하니 입맛에 맞는 걸로 골라잡으면 되겠다.
최초로 회원 가입을 하고 팀을 생성하면 아래와 같은 창을 볼 수 있다.
(github 계정과 연동해 회원가입을 했다.)
Import from Git
을 눌러 Github 레포와 연동할 수 있다.
Authorize 해주고,
Configure하면
아래과 같이 위치를 지정할 수 있다.
개인 프로젝트를 배포할 예정이라 github 아이디 클릭!
특정 레포만 배포할 권한을 줄 지, 아니면 모든 레포에 줄 지 정할 수 있다.
개인 과제 링크를 배포할 예정이라 특정 레포만으로 생성했는데,
전체 레포를 해도 상관 없다. (추후에 설정 변경 가능!)
그럼 Install
까지 해주자
문제 없이 등록된 모습을 볼 수 있다!
이제 배포할 레포를 클릭!
어떤 브랜치를 기준으로 배포할지 설정할 수 있다.
나는 master로 설정했다.
Base directory
Build script returned non-zero exit code: 2
가 발생한다. Publish directory
Environment variables
모두 입력했다면
하단
Deploy
버튼을 눌러보자!
Production deploys에서 현황을 확인할 수 있다.
열심히 돌아가는 중...
완료가 되면, overview에서 화면 미리보기에 정상적으로 화면이 뜬다!
Domain settings를 누르면
이렇게 도메인을 수정할 수 있다.
참고로 http도 https로 알아서 잘 변경되어있다.
만약 뒤에 netlify.app도 붙지 않는 도메인을 등록하고 싶다면, 도메인을 구입 후 Add a domain으로 변경할 수 있다.
그리고 변경한 링크를 클릭하면
사이트에서 접속할 수 있다 :)