1. 프로젝트 빌드

---

npm run build

2. 프로젝트 배포 환경 설정

---

1) Firebase CLI 설치

• 프로젝트 배포를 위해 터미널에서 파이어베이스 명령어를 실행할 수 있게 Firebase CLI를 설치한다.

npm install -g firebase-tools

2) firebase login

• 파이어베이스의 기능들을 사용할 수 있도록 파이어베이스에 로그인한다.

firebase login

• 로그인하면 잠시후 브라우저가 열리면서 연결할 계정을 선택할 수 있다. 로그인이 완료되었다면 아래의 화면이 나온다. (만약 node.js 버전으로 인해 로그인이 거부당한다면 업데이트를 해야한다. sudo npm install -g n 을 통해 노드 버전 관리 플러그인을 설치하고 n stable 명령어를 통해 최신 안정버전으로 업그레이드한다.)

3) 프로젝트 초기화

• 아래 명령어를 통해 해당 프로젝트가 파이어베이스 프로젝트임을 알려준다.

firebase init

4) 호스팅 옵션 선택

• 키보드 방향키로 호스팅 옵션을 이동할 수 있으며, 스페이스로 선택할 수 있다. 배포를 할 것이기 때문에 Hosting : Congifure files for Firebase Hosting and (optionally) set up GitHub Action deploys 를 선택하고 넘어간다.

• 그 후 파이어베이스 콘솔에서 미리 프로젝트를 만들어 두었다면 Use an existing project 를 선택하고 엔터키를 눌러서 다음으로 넘어간다.

5) 배포할 프로젝트 선택

• Use an existing project 를 선택하고 넘어오면 만들어둔 프로젝트들의 목록이 나온다. 여기서 배포할 프로젝트를 선택한다.

6) 호스팅 세부 설정

6-1. What do you want to use as your public directory?

• public 폴더를 이용할 것인지 물어보는 내용이다. 하지만 build 해 둔 파일을 사용할 것 이기 때문에 build를 입력한 후 엔터키를 눌러 넘어간다.

6-2. Configure as a single-page app (rewrite all urls to /index.html)?

• 리액트로 프로젝트를 만들었기 때문에 Yes를 선택하고 넘어간다.

6-3. Set up automatic builds and deploys with GitHub?

• 이 옵션은 깃허브를 이용해서 자동 빌드와 배포를 할 것인지 선택하는 옵션인데 No 를 선택하고 넘어간다.

6-4. File build/index.html already exists. Overwrite?

• build 파일에 이미 index.html이 존재해서 덮어 씌울 것인지 물어보는 질문이다. 하지만 이미 build한 index.html을 이용할 것이기 때문에 No를 선택하고 넘어간다.

• 그러면 파이어베이스 초기화가 완료되었다.

3. 프로젝트 배포

---

• 아래 명령어를 통해 프로젝트를 배포한다.

firebase deploy

• 그러면 배포가 되면서 호스팅 URL을 볼 수 있는데 이 URL이 내가 만든 프로젝트가 호스팅 되고 있는 주소다.

• 파이어베이스 콘솔에서 확인해보면 2가지의 도메인을 지원하고 있는 것을 볼 수 있으며, 출시 내역 목록에서 배포 후 재배포 이력도 확인할 수 있다.

1) 프로젝트 재배포

• 프로젝트에 변경 사항이 생겨 재배포 할 때는 프로젝트 수정 후 npm run build로 build를 먼저 하고 다시 firebase deploy 명령어로 재배포를 하면 수정사항이 반영된 것을 확인할 수 있다.

추가사항

• 배포 후 수정한 부분이 반영이 안 되어있다면 배포 사이트 새로고침을 해보자 그럼 수정한 내용이 반영이 되어 있을 것이다. (이것 때문에 배포 안 되는 줄 알고 몇 번을 다시 배포해 봤는지...)