3. Vue(with Vuetify)와 Firebase로 서버리스 PWA myBlog 개발 - firebase

myBlog의 backend로 Firebase를 사용합니다.

Firebase란?

Firebase는 Google에서 제공하는 백엔드 서비스 플랫폼으로,
클라우드 기반으로 동작하며,
모바일과 웹 애플리케이션 개발을 지원합니다.

Firebase의 주요 특징

• 관리형 백엔드: 서버 관리가 필요 없으며, 백엔드 코드 없이도 강력한 기능을 구현 가능.
• 실시간 데이터베이스: 데이터를 실시간으로 동기화하여 실시간 협업 애플리케이션 개발에 적합.
• 통합된 생태계: 데이터베이스, 인증, 클라우드 함수, 분석 등 다양한 기능을 한곳에서 제공.
• 크로스 플랫폼 지원: iOS, Android, 웹, Unity, C++ 등 다양한 플랫폼에서 동작.

Firebase 주요 서비스

1. Authentication (사용자 인증) *

사용자 로그인 및 인증을 간편하게 관리할 수 있는 서비스입니다.

3. 2. Realtime Database

JSON 기반의 NoSQL 실시간 데이터베이스로, 데이터가 클라이언트 간에 실시간으로 동기화됩니다.

3. Firestore (Cloud Firestore) *

Firebase의 최신 NoSQL 데이터베이스로, 확장성과 성능이 뛰어납니다.

4. Cloud Functions *

서버리스 함수를 사용하여, 서버를 직접 관리하지 않고 백엔드 로직을 실행할 수 있습니다.

5. Hosting *

정적 웹 사이트와 Firebase 애플리케이션을 신속히 배포할 수 있는 호스팅 서비스.

6. Cloud Storage

대용량 파일(이미지, 동영상 등)을 저장할 수 있는 클라우드 스토리지.

7. Cloud Messaging (FCM) *

푸시 알림을 애플리케이션에 추가하는 서비스로, 사용자 디바이스에 알림을 전송 가능.

8. Analytics

Firebase 애플리케이션의 사용자 활동과 데이터를 분석할 수 있는 무료 분석 도구.

9. Remote Config

앱의 구성을 클라우드에서 동적으로 변경할 수 있는 서비스.

10. Performance Monitoring

애플리케이션의 성능 데이터를 수집하고, 사용자 환경 최적화를 지원.

dotenv

dotenv는 환경 변수(Environment Variables)를 관리하기 위한 도구로,
주로 Node.js 프로젝트에서 사용되며,
설정 파일(.env)을 통해 민감한 정보(예: API 키, 데이터베이스 URL, 비밀번호 등)를 코드와 분리해 저장하고 로드하는 방식으로 동작합니다.

1. 주요 특징

• 환경 변수 관리: .env 파일에 민감한 설정 정보를 저장해, 코드에서 직접 노출되지 않도록 합니다.
• 간편한 사용: dotenv 라이브러리를 사용해 .env 파일의 값을 Node.js 애플리케이션에 쉽게 불러올 수 있습니다.
• 보안: 환경 변수를 통해 코드 레포지토리에 민감한 정보가 포함되지 않도록 하며, .env 파일은 .gitignore에 추가해 버전 관리에서 제외합니다.

2. 설치

dotenv는 npm 패키지로 제공되며, 아래 명령어로 설치할 수 있습니다.

npm install dotenv

3. 사용 방법

(1) .env 파일 생성
루트 디렉토리에 .env 파일을 생성하고, 환경 변수를 정의합니다.

# .env
API_KEY=your_api_key
DATABASE_URL=mongodb://localhost:27017/myapp
PORT=3000

 

(2) Node.js에서 dotenv 불러오기

dotenv를 초기화하여 .env 파일의 내용을 환경 변수로 로드합니다.
.env 파일에 정의된 변수는 process.env 객체를 통해 접근할 수 있습니다.

// index.js
require('dotenv').config(); // dotenv 초기화

console.log(process.env.API_KEY); // 'your_api_key'
console.log(process.env.DATABASE_URL); // 'mongodb://localhost:27017/myapp'
console.log(process.env.PORT); // '3000'

firebase 설정

우리는 데이터베이스로 Ffirebae firestore를 사용하고,
사용자 인증을 위하여 Firebase Authentication를 사용하고
웹앱 인터넷 서비스를 위하여 Firebase Hosting을 사용합니다.

firebase 설정에 firestore, Authentication 설정을 추가 합니다.

// src/firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// npm install dotenv - env가 정상 동작하지 않을 때 설치 필요함
const firebaseConfig = {
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_FIREBASE_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Firestore 
const db = getFirestore(app);
const auth = getAuth(app);

export { auth, db};