[React] 리액트 프로젝트 배포 - Firebase Hosting

 

 

---

리액트로 개발한 프로젝트를 배포해 보자

뭐 서버를 구축해서 배포하는 방법은 구축비용이라던가 너무 복잡하기 때문에 firebase를 사용해 좀 더 편리하게 배포를 해볼 것이다.

 

firebase 사이트로 이동해 새로운 프로젝트를 만들어보자

 

Firebase

 

---

react-project로 이름을 지정해 준 후 애널리틱스 사용설정을 해제하고 프로젝트를 만들어준다

만들어진 프로젝트에 가 Hosting 메뉴에 들어가 시작하기를 눌러주고 설치코드를 복사 후 터미널로 실행해 준다

다음 내가 만든 프로젝트 위치로 이동해 준다 그냥 vscode에서 터미널에서 하면 된다!

두 코드 차례대로 입력.

그럼 콘솔에 이런 창이 뜨게 되는데 우리는 Hosting기능을 사용할 테니 Hosting에 스페이스바로 체크를 해준후 엔터

project Setup에선 Use an existing project 체크

다음 만들어둔 react-project 선택

다음은 이대로 입력해 준다

 

다 했다면 다시 파이어베이스로 돌아가 호스팅설정 마지막에서 콘솔로 이동하기를 눌러준다

다음 맨 밑으로 이동하면 다른 사이트에 추가가 있는데 클릭 후 도메인이름을 써준다

firebase init으로 생성된 firebase.json파일에 자신이 생성한 도메인을 써준다

다음 한 번 더 다시 빌드해 준 후 firebase deploy명령어를 입력해 주자

npm run build
firebase deploy

그럼 배포가 완료되고  Hosting URL을 알려준다

해당 URL로 이동하면 프로젝트가 잘 뜨고 모든 기능들이 정상적으로 돌아간다

배보성공이닷!

 

 

감정 일기장