React 프로젝트 Netlify로 배포하기

Netlify

Create-react-app으로 React 프로젝트를 완성했다면? 

완성한 프로젝트를 배포해볼 차례다. 

 

아래의 링크로 들어가보면 

https://create-react-app.dev/docs/deployment/

Deployment | Create React App

 

 

위와 같은 화면이 보인다. 오른쪽을 보면 여러 방법들이 나와있는 것을 볼 수 있다. AWS, Firebase, Heroku, Nelify... 등등

그 중에서 오늘은 Netlify를 이용해 배포를 진행할 것이다. 

 

build 하기

먼저 프로젝트를 build 해주자.

나는 Cmder을 이용해 프로젝트에 명령어를 실행시킬 것이다. 각자 사용하던 커맨드 창을 이용해 

노드 패키지 매니저에 따라 yarn build 혹은 npm run build 명령어를 실행시키자.

나는 yarn build를 이용할것이다. 

 

yarn build를 실행시키고 보면 

이렇게 build 폴더가 생성된것을 볼 수 있다. build 폴더가 잘 생성되었는지 확인하고 넘어가자. 

 

Netlify 회원가입 / 로그인

Netlify 를 이용한 배포를 진행할 것이므로 Netlify에 로그인을 해야한다. 

https://www.netlify.com/

Netlify: Develop & deploy the best web experiences in record time

Netlify 사이트에 들어가면 위와 같은 화면이 보이게 된다. 상단의 버튼을 이용해 로그인 혹은 회원가입을 진행하자. 

Netlify 명령어 실행

 

위에서 봤던 create react app 페이지의 Deployment 카테고리에서 Netlify로 들어가자.

위와 같은 글이 보인다. 위의 명령어를 순서대로 실행하면 된다. 

 

첫줄 명령어는 netlify를 글로벌적으로 설치하는 것이다. 위의 사진처럼 명령어 작성 후 실행해보자. 

그 후, 두번째 줄의 명령어를 실행한다. 

netlify를 이용해 배포(deploy)를 하는 핵심 명령어이다. 

netlify deploy를 실행하면 

이처럼 원래 있던 사이트에 이 디렉토리를 연결할지 아니면 새로운 사이트를 만들지 결정하라는 문구가 뜬다. 

우리는 새로 사이트를 만들 생각이므로 자판의 아래 방향키 🔽를 클릭해 Create & configure a new site를 선택하자.

 

그 후 위와 같이 Team 설정이 뜨면 엔터를 치고 넘어가자.

그 후 사이트 이름을 설정한다. 나는 paradise-practice라고 설정했다. 만약 이미 존재하는 사이트의 이름으로 할 경우, 다시 설정해달라는 문구가 뜰 수 있다. 그럼 그냥 다른 이름으로 다시 설정하면 된다. 😅

 

사이트 이름을 설정하면 이제 Publish directory를 설정해야한다. 아까 우리가 만든 build 폴더를 선택하자. build라고 작성한 후 enter를 누르면 된다. 

 

 

그럼 이제 위와 같이 URL을 제공해준다. URL이라 쓰여진 곳의 링크를 복사해 들어가면 제작한 사이트가 잘 나온것을 확인할 수 있다. 만약 문제가 있다면 코드 오류거나 혹은 github pages 작업을 위해 사전에 package.json에서 homepage 설정을 한 부분이 있는지 확인해보자. 만약 homepage 설정을 해놓았을 경우 "homepage": ... 이 줄을 삭제해주면 된다.