[ReactJS] 리액트 프로젝트 firebase 호스팅에 배포하기

firebase tool 설치하기

리액트 프로젝트를 firebase 호스팅에 배포하기 위해서는 firebase CLI(Firebase 명령어 도구)를 설치해야한다. 설치는 터미널에서 아래 명령어를 실행해서 설치할 수 있다.

npm install -g firebase-tools

 

 

아래 명령어를 입력하여 firebase에 로그인하고, 질문이 나오면 n을 입력하고 엔터를 누른다.

firebase 프로젝트에 접근하려면 로그인을 해야하는데 아래 명령어를 실행하면 구글 계정으로 로그인할 수 있다. 

firebase login

Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? (Y/n) n

웹사이트 창이 열리면서 계정을 선택하라고 창이 뜬다. 구글 계정에 로그인이 되어있다면 해당 계정을 선택하면 된다.

 

 

firebase CLI 서비스로 로그인 하기 위해 [계속] 버튼을 누르고 다음 단계를 진행한다.

 

 

[허용] 버튼을 클릭한다.

 

 

정상적으로 완료되면 웹사이트에는 아래와 같은 창이 뜬다.

 

터미널에도 로그인에 성공했다는 메세지가 뜬다.

Success! Logged in as my-email@gmail.com

 

 

리액트 프로젝트를 배포하기 위해 빌드 파일을 생성한다.

npm run build

 

 

---

 

 

firebase 프로젝트 초기화 설정하기

아래의 코드 입력하면 여러가지 질문이 나오는데 해당하는 답변을 선택하여 초기화를 설정한다.

// 프로젝트 초기화
firebase init

Before we get started, keep in mind:
  * You are currently outside your home directory
 
 // y 누르고 엔터
? Are you ready to proceed? (Y/n)

화살표키로 조정할 수 있고 스페이스바를 누르면 선택된다.

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ( ) Genkit: Setup a new Genkit project with Firebase
 ( ) Functions: Configure a Cloud Functions directory and its files
 ( ) App Hosting: Configure an apphosting.yaml file for App Hosting
>( ) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ( ) Storage: Configure a security rules file for Cloud Storage
 ( ) Emulators: Set up local emulators for Firebase products
 ( ) Remote Config: Configure a template file for Remote Config
(Move up and down to reveal more choices)

 

내가 만든 firebase에서 생성한 프로젝트 리스트가 나오는데 선택하고 엔터를 누른다.

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: react-shopping-app-b6c80 
(react-shopping-app)
i  Using project react-shopping-app-b6c80 (react-shopping-app)

 

(public) 을 지우고 build로 변경한다.

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public)


// 변경
? What do you want to use as your public directory? build

아래와 같은 질문이 나오면 y를 입력하고 엔터를 누른다.

"단일 페이지 앱으로 구성하시겠습니까(모든 URL을 /index.html에 다시 작성하시겠습니까?)"

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

git이 생성되어 있지 않다면 n을 입력하고 엔터를 누른다.

"GitHub를 사용하여 자동 빌드 및 배포를 설정하시겠습니까?"

? Set up automatic builds and deploys with GitHub? (y/N)

빌드 폴더에 index.html 이미 있기 때문에 n을 입력하고 엔터를 누른다.

"build/index.html 파일이 이미 존재합니다. 덮어쓰시겠습니까? "

? File build/index.html already exists. Overwrite? (y/N)

 

 

---

 

 

배포하기

아래 코드 입력하면 build 폴더에 있는 파일을 firebase로 배포하게 된다.

firebase deploy

hosting url로 접속하면 배포된 것을 확인할 수 있다.

=== Deploying to 'react-shopping-app-b6c80'...

i  deploying hosting
i  hosting[react-shopping-app-b6c80]: beginning deploy...
i  hosting[react-shopping-app-b6c80]: found 25 files in build
+  hosting[react-shopping-app-b6c80]: file upload complete
i  hosting[react-shopping-app-b6c80]: finalizing version...
+  hosting[react-shopping-app-b6c80]: version finalized
i  hosting[react-shopping-app-b6c80]: releasing new version...
+  hosting[react-shopping-app-b6c80]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/react-shopping-app-b6c80/overview
Hosting URL: https://react-shopping-app-b6c80.web.app