[FE 배포] Netlify로 3초 만에 리액트 프로젝트 배포하기

프론트엔드 배포는 EC2로만 해봤었는데 이번에 UMC 미션하면서 netlify를 알게 되었다.

vercel과 비슷한 사이트인 것 같은데 정적 사이트를 아주 쉽게 배포할 수 있어서 앞으로 많이 사용할 것 같다.

https://www.netlify.com/

 

100GB까지 무료로 사용할 수 있고, Build도 300분까지 무료라서 AWS의 과금이 두려운 사람에게 완전 추천한다.🤩🤩

 

 

회원가입하고 로그인하면 아래와 같이 뜰 건데, 깃허브 리포지토리와 연동해주면 된다.

 

원하는 브랜치를 선택해주고, 아래에서 빌드 설정을 해주면 된다.

자동으로 빌드를 해주기 때문에 따로 vscode에서 npm run build를 해줄 필요가 없다. 

 

프로젝트 폴더가 안에 들어가있다면 Base directory를 설정해주면 되는데, 나는 바로 리액트 프로젝트여서 비워뒀다.

Build command만 CI= npm run build로 수정해주면 된다. (yarn 쓰면 CI= yarn build)

그냥 npm run build 하면 오류 뜨니 꼭 해주기!!

 

.env 파일이 있었다면 아래 사진처럼 환경변수를 따로 등록해주어야 한다.

 

Deploy가 다 잘 되면 아래처럼 모두 complete가 된다,

 

아마 한 번에 바로 성공하는 경우는 거의 없을 거고 Building이나 Initializing에서 오류가 뜰 거다.

 

우선, deploy 설정을 잘못 해줬나 잘 봐야한다.

파일 구조가 내가 생각했던 것과 다를 수 있다.

 

또, npm run build가 아니라 CI= npm run build(CI= 이렇게 띄어쓰기까지 똑같이 되어야한다)로 써줬는지 꼭 확인하자!

 

마지막으로, 오류가 나는 경우를 보면 대부분 파일 구조가 여러 폴더로 구성된 경우가 많았다.

그냥 이런 식으로 해당 브랜치를 들어가면 파일들이 뜨게 해야 바로 성공하는 것 같다.

 

또, 처음에 리드미 파일을 만들어서 아래 같은 구조로 되어있지는 않은지 봐야 한다.

만약 그렇다면 해당 폴더를 삭제해주고 위에 사진처럼 만들어줘야 한다.

 

이렇게까지 하면 웬만하면 다 잘 배포가 될 거다.

이제 Open production deploy 버튼을 누르면 배포된 사이트가 나온다.

 

그런데, 배포된 사이트에서 page not found가 뜰 수 있다.

그럴 때는, public 폴더에 _redirects라는 파일을 하나 만들어주고, 

/* /index.html 200

 

위 내용을 넣어주면 된다.

 

이렇게 했는데도 안 된다면 package.json에 homepage를 추가해주면 될 거다.

 

추가로, Netlify에서는 사이트 이름을 설정할 수 있다. 

 

http://설정해준Site name.netlify.app으로 설정이 되는데 이거 칠 때 키보드 영어로 되어있어야만 써지니 참고하기!

 

다 하면 아래처럼 배포가 완료된다!