🥬🍖프론트를 Firebase에 싸서 드셔보세요 | 3 - Firebase 설치와 Deploy

이번에는 deploy까지 해보자!
1, 2편을 놓쳤다면 꼭 보고 오자!

Firebase 설치 및 config

npm i firebase

Firebase를 설치해준다.

이제 아까 생성했던 Firebase 프로젝트에서 api key나 id 등이 담긴 config object를 가져와야 한다.

좌측의 햄버거 메뉴를 누른 후 프로젝트 개요 옆의 설정버튼을 클릭한다.

프로젝트 설정에 들어가면 필요한 내용이 있다.

내리다 보면 SDK 설정 및 구성이 나온다. npm을 선택하면 나오는 내용을 src/index.js 안에 그대로 넣어준다. (프로젝트마다 다른 값이 들어 있으니까 현재 진행 중인 프로젝트에서 가져오면 된다.)

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyAP7b_6QFUUs5DjlePHzDP4PN1iZ-yFrPA",
  authDomain: "myproject-daf20.firebaseapp.com",
  projectId: "myproject-daf20",
  storageBucket: "myproject-daf20.appspot.com",
  messagingSenderId: "534036629128",
  appId: "1:534036629128:web:51db7081a6f9f37c3d813d"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

Firebase Tools 설치하기

Firebase를 이용해 사이트에 deploy를 하기 위해서는 firebase-tools 패키지가 필요하다.

npm install firebase-tools -g

Firebase에 로그인하기

firebase login

프로젝트 폴더에서 Firebase에 로그인해준다. (Gitpod 등, 로컬 호스트로 연결되지 않는 환경에서는 firebase login —no-localhost로 할 수 있다.

링크를 타고 들어가면 내가 로그인 하려는게 맞는지 확인하는 과정이 있다.

맞으니까 넘어가주자.

Authentication Code를 복사한다.

터미널에 입력해주면 로그인이 끝난다.

firebase init 실행하기

Firebase init

Firebase 프로젝트를 실행해준다.


방향키로 선택할 수 있는 화면이 나온다.
스페이스바로 선택하고 엔터로 넘어갈 수 있다.

대부분 Storage도 필요하겠지만, 일단은 사이트에 올리는게 목적이니 Hosting만 선택해주고 넘어가자.

Hosting이 2개가 있는데 윗 사진처럼 첫번째를 선택해주면 된다.

public 디렉토리 로 어떤 폴더를 선택할지 물어본다. 우리는 dist로 만들었으니까 dist를 입력한다.

single-page app로 설정하냐는 질문에는 yes, 나머지는 No라고 해준다.

firebase deploy

이쯤에서 혹시 중간에 꺼진 적이 있거나 해서 webpack으로 현재 코드를 다시 bundling해줘야하는 상황일 수 있으니 다음을 실행해준다.

npm run build

이제 deploy만 남았다!

firebase deploy

Hosting URL 뒤의 주소로 가보자!

잘 나오는 걸 볼 수 있다🔥👏🏻👏🏻

다음에는 사이트마다 흔히 볼 수 있는 Sign in with Google을 구축해보자.