리액트 - Netlify로 리액트 프로젝트 배포하기

리액트 전체 링크

 

참고

- 리액트 프로젝트 추가하기

- gh-pages로 리액트 프로젝트 배포하기

- .env 환경 변수 파일 관리하기

- Vercel로 리액트 프로젝트 배포하기

 

- Netlify로 리액트 프로젝트 배포하기
- Netlify로 배포된 프로젝트에 리액트 라우터 적용하기
- Netlify 배포 에러 해결하기

 

깃허브 페이지처럼 Netlify로 무료 웹 호스팅 서비스에 리액트를 배포해 보자.

 

먼저 깃허브에 리액트 프로젝트를 추가한다. (npm create react-app react-netlify)

 

Netlify에서 로그인 / 회원가입을 진행한다. (깃허브로 가입)

 

깃허브 가입 후, repositoroy 접근 권한을 주면 Netlify에서 깃허브 저장소에 접근할 수 있다.

overview 화면에서 Add new site → Import an existing project를 클릭한다.

 

Deploy with GitHub를 클릭한다.

 

저장소를 모두 보이도록 선택하였다면 모든 저장소 목록이 보인다.

 

깃허브에 추가한 리액트 프로젝트의 저장소를 선택한다.

 

깃허브 페이지와 달리 Site name을 설정할 수 있다. ([설정한 이름].nelify.app)

 

Add environment variables에서 환경 변수를 추가할 수 있다. (REACT_APP_ 으로 시작해야 한다.)

이제 Deploy xxx 버튼을 클릭하자

 

페이지가 전환되면서 Build가 시작된다.

 

정상적으로 배포가 완료되면 아래와 같이 Published로 변경된다.

오른쪽 > 버튼을 클릭해 보자.

 

Open production deploy 버튼을 클릭하면 배포된 페이지로 이동한다.

 

URL이 https://master--test-for-my-react-netlify.netlify.app/ 가 되지만

설정한 URL https://test-for-my-react-netlify.netlify.app/ 로 들어가도 정상적으로 배포가 된 것을 알 수 있다.