🌐Netlify란?

정적 웹사이트와 프론트엔드 애플리케이션을 간편하게 배포하고 관리할 수 있는 클라우드 플랫폼

• AWS로도 배포할 수 있지만, Netlify는 Git과 연동하여 자동으로 빌드와 배포가 진행되기 때문에 설정이 더 간단하다.
• GitHub에 커밋할 때마다 Netlify가 변경사항을 감지해 자동으로 사이트를 최신 상태로 업데이트해 주기 때문에 편리하다.

🚀Netlify로 프로젝트 배포하기

1️⃣ 새 사이트 추가

Netlify 사이트에 로그인 후, Add new site - import an existing project 버튼을 클릭한다.

2️⃣ 연결할 플랫폼 선택

배포할 프로젝트가 있는 Git 저장소를 선택한다.

3️⃣ 배포할 프로젝트 레포지토리 선택

GitHub 선택하고 Authorized 하면

GitHub에 있는 레포지토리 목록이 나타난다.
이 중에 배포할 프로젝트를 선택한다.

4️⃣ 배포 설정

배포할 사이트 이름을 작성하고, 사용 가능한지 확인한다.
URL은 https://작성한이름.netlify.app 형식이 된다.

빌드 설정을 한다.

• Branch to deploy
  • 어떤 브랜치를 기준으로 배포할지 선택한다.
  • 일반적으로 main이나 master 브랜치를 선택한다.
• Base directory
  • 프로젝트의 루트 디렉토리 지정한다.
  • 프론트엔드와 백엔드가 같은 저장소에 있는 경우 프론트엔드 디렉토리를 지정해 해당 폴더만 배포하게 할 수 있다.
  • 프론트엔드 코드만 있는 경우 빈칸으로 두면 된다.
• Build command
  • 프로젝트를 빌드할 때 사용하는 명령어를 입력한다. 이때, 기본으로 npm run build가 입력되어 있는데, 그대로 하면 에러 난다. CI= npm run build으로 해야된다.
  • CI 환경에서는 테스트 실패를 에러로 처리하기 때문에 CI= 를 앞에 붙여 테스트를 무시하도록 설정해야 빌드가 정상적으로 진행된다.
• Publish directory
  • 빌드가 완료된 후 생성되는 폴더 이름이다.
• Functions directory
  • 서버리스 함수를 사용할 때 필요한 디렉토리이다.

필요한 경우 환경 변수를 추가한다.

모든 설정이 완료되면 Deploy {사이트 이름} 버튼을 클릭해 배포를 시작한다.

5️⃣ 배포 완료

배포가 진행 중일 때는 Site deploy in progress라는 문구가 표시된다.

배포가 완료되면 웹 사이트 주소가 나타나고, 들어가보면 성공적으로 배포가 된 것을 확인할 수 있다.

추가적으로 사이트 보안을 위해 HTTPS를 설정하거나 도메인을 연결할 수 있다.