0334

BE

[Firebase] 웹 앱에 Firebase 추가

| 서론

안녕하세요 팡일입니다.

현재 저는 우아한테크코스 8기 프리코스 오픈미션에서 're:log'라는 회고 서비스를 제작중에 있는데요?

백엔드 서비스로 Firebase를 사용하게 되어서,

오늘은 Firebase 프로젝트를 생성하고, 서비스를 추가하는 방법을 정리해보려고 합니다.

| Firebase 프로젝트 생성하기

1) Firebase Console에 접속합니다.

2) 좌측의 '새 Firebase 프로젝트 만들기'를 선택합니다.

3) 프로젝트 이름을 입력합니다.

| 앱 추가하기 (웹 서비스로)

1) 생성된 프로젝트 가운데 상단에 있는 '앱 추가' 버튼을 클릭합니다.

2) 여러 플랫폼 중 '웹'을 클릭합니다.

3) 앱의 닉네임을 입력합니다.

4) 호스팅을 희망하기에, 호스팅도 체크했습니다.

5) Firebase SDK를 추가합니다.

(1) npm install firebase 명령어를 프로젝트 root에서 설치하여 패키지를 추가합니다.

bash
npm install firebase

(2) firebase.ts 파일을 만들어 아래의 내용을 추가합니다.

bash
// src/lib/firebase.ts
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
	apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
	authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
	projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
	storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
	messagingSenderId: import.meta.env.VITE_FIREBASE_SENDER_ID,
	appId: import.meta.env.VITE_FIREBASE_APP_ID
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

(3) .env 파일을 만들고 SDK 관련 정보를 추가합니다.

bash
VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-auth-domain
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-storage-bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
VITE_FIREBASE_APP_ID=your-app-id

6) Firebase CLI를 설치합니다.

이후 호스팅을 사용하기 위해서 터미널을 켜서 전역적으로 Firebase CLI를 설치해줍니다. (이미 설치했다면 패스)

bash
npm install -g firebase-tools

7) Firebase 호스팅 배포를 진행합니다.

(1) firebase login

: 해당 명령어를 입력하여, google 계정으로 로그인합니다.

  1. “Enable Gemini in Firebase features?” → Yes
    : Yes 선택 시, Firebase CLI에서 Gemini 관련 기능을 사용할 수 있습니다.

  2. “Allow Firebase to collect CLI and Emulator Suite usage and error reporting information?” → Yes
    : Firebase CLI 사용 통계 수집 동의 여부입니다.

즉, 두 항목 모두 “Yes”로 선택해도 보안상 문제는 전혀 없으며,
Firebase CLI가 정상적으로 작동하고, 추후 AI 기반 설정 보조 기능(Gemini)도 사용할 수 있게 되는 이점이 있습니다.

(2) firebase init (또는 firebase init hosting)

  1. Please select an option: 프로젝트 연결 방법을 선택합니다. -> 기존 프로젝트를 사용하기 위해 Use an existing project를 선택합니다.

  2. Select a default Firebase project for this directory
    : 여러 프로젝트 중 현재 로컬 디렉토리와 연결할 Firebase 프로젝트를 선택합니다.-> 저는 re-log-920ae (re-log)를 선택했습니다.

  3. What do you want to use as your public directory? -> build
    : firebase가 배포할 정적 파일 폴더를 지정합니다.
    -> npm run build 과정을 거쳐 만들어진 build 폴더를 사용할 예정이기에, build를 입력했습니다.

  4. Configure as a single-page app (rewrite all urls to /index.html)? (y/n) -> Yes
    : SvelteKit은 SPA(Single Page Application)이므로, Firebase가 라우트를 요청 받을 대 자동으로 index.html로 리다이렉트 하도록 설정해야 하므로, Yes를 선택합니다.

  5. Set up automatic builds and deploys with GitHub? (y/n)
    : CI/CD (자동배포)를 구성할 것인지를 선택합니다.
    -> 현재는 로컬에서 수동으로 firebase deploy를 실행하므로 불필요하다.

단, 나중에 CI/CD (자동 배포) 를 구성하고 싶을 때는 “Yes”로 선택하면Firebase가 GitHub Actions 워크플로우(.github/workflows/firebase-hosting.yml)를 자동 생성해줍니다.

(3) firebase deploy

: 해당 명령어를 입력하여, build 폴더를 바탕으로 배포를 진행합니다.

| 앱 추가하기 (웹 서비스로) - 트러블 슈팅

하지만 처음 firebase init 명령어를 입력했더니, 아래와 같은 오류가 발생했습니다.

이 현상은 Firebase CLI가 여전히 “hellopangil”을 기본 프로젝트 캐시로 기억하고 있어서, 새로운 프로젝트 목록을 불러오지 못하는 경우였습니다.

로그아웃만으로는 완전히 초기화되지 않아서, CLI 내부의 전역 캐시 파일(~/.config/configstore/firebase-tools.json) 을 한 번 지워줘야 했었습니다.

bash
rm -rf ~/.config/configstore/firebase-tools.json

그래서 위의 명령어를 입력한 뒤에, 다시 firebase init을 진행한 결과,

성공적으로 세팅을 완료했고, Firebase가 아래 두 파일을 자동으로 생성했습니다.

1) .firebaserc

bash
{
  "projects": {
    "default": "re-log-920ae"
  }
}

2) firebase.json

bash
{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

| 결론

이번 과정을 통해 Firebase 프로젝트 생성부터 웹 앱 등록, SDK 연동, 그리고 호스팅 배포까지 전 과정을 직접 수행해보았습니다.

처음에는 CLI 캐시 문제로 약간의 오류가 있었지만, 설정을 재정비한 후 정상적으로 프로젝트를 연결하고 배포할 수 있었습니다.

결국 re:log 서비스는 SvelteKit으로 빌드된 정적 파일을 Firebase Hosting을 통해 성공적으로 배포하게 되었고,
앞으로는 이 환경을 기반으로 데이터베이스(Firestore)와 인증 기능까지 확장해 나갈 계획입니다.

이번 경험은 “개발에서 배포까지의 전 과정을 스스로 세팅할 수 있다”는 자신감을 얻게 된 좋은 기회였습니다.

목차
  1. | 서론
  2. | Firebase 프로젝트 생성하기
  3. | 앱 추가하기 (웹 서비스로)
  4. | 앱 추가하기 (웹 서비스로) - 트러블 슈팅
  5. | 결론