[Node.js - Express] Node.js Express로 Firebase Firestore DB와 연동하기 + CRUD

Node.js 프로젝트 생성

$ npm init -y

패키지 설치

$ npm install express firebase dotenv cors

Express 프레임워크, Firebase 패키지, dotenv 라이브러리, cors 설치.

$ npm install nodemon --save-dev

PM2와 비슷하게 파일 변동 시 Node.js 서버를 자동으로 재시작해주는 nodemon 설치.

--save-dev 옵션은 설치 후 devDependencies에 추가하는 옵션.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
  },

설치 후 package.json 파일의 "scripts" 부분에 "start": "nodemon index.js" 를 추가해 주자.

나중에 npm start 명령어만으로 nodemon을 실행시킬 수 있도록 하기 위함.

아니면 그냥 pm2 써도 된다.

$ npm install body-parser

post 방식의 request 데이터에서 body에 담긴 파라미터들을 쉽게 추출할 수 있도록 해주는 패키지.

** 주의 **

firebase 패키지를 사용하면 서버가 안 켜지는 경우가 있다. (나는 그랬다.)

그러므로.. firebase-admin 패키지를 이용하도록 하겠음..

$ npm install firebase-admin

파일 구조 생성

프로젝트 파일 아래에

.env

config.js

db.js

index.js

파일 생성.

controllers

models

routes

폴더 생성.

물론 이름은 달라도 상관없으나 아래 코드는 알아서 수정하면서 따라오시면 됩니다 :D

환경 변수(SDK), Firebase DB 생성

Firebase 프로젝트 생성.
Web-app 추가(등록).
Web-app Register 과정에서 Add Firebase SDK 부분을 확인.

놓치고 지나갔다면

프로젝트 설정 - 일반 - 내 앱 에서 다시 확인할 수 있다.

.env 파일에 입력.

 #express server config
 
PORT=8080
HOST=localhost
HOST_URL=http://localhost:8080
 
#firebase database config
/* 여기에 Add Firebase SDK 부분에 있는 것들을 복사하여 입력 */
API_KEY=
AUTH_DOMAIN=
DATABASE_URL=
PROJECT_ID=
STORAGE_BUCKET=
MESSAGING_SENDER_ID=
APP_ID=

apiKey: "AIzaenf6asdf3fJSDF734rsoJasdjkfhYY", 같이 되어 있으면

API_KEY=AIzaenf6asdf3fJSDF734rsoJasdjkfhYY 처럼 입력해주면 됨. 쉼표 없어도 됩니다~

config.js 파일에 입력.

 "use strict";
const dotenv = require("dotenv");
const assert = require("assert");
 
dotenv.config();
 
const {
  PORT,
  HOST,
  HOST_URL,
  API_KEY,
  AUTH_DOMAIN,
  DATABASE_URL,
  PROJECT_ID,
  STORAGE_BUCKET,
  MESSAGING_SENDER_ID,
  APP_ID,
} = process.env;
 
assert(PORT, "PORT is required");
assert(HOST, "HOST is required");
 
module.exports = {
  port: PORT,
  host: HOST,
  url: HOST_URL,
  firebaseConfig: {
    apiKey: API_KEY,
    authDomain: AUTH_DOMAIN,
    databaseURL: DATABASE_URL,
    projectId: PROJECT_ID,
    storageBucket: STORAGE_BUCKET,
    messagingSenderId: MESSAGING_SENDER_ID,
    appId: APP_ID,
  },
};

dotenv 로 .env 파일에 입력한 환경변수를 관리해주는 것이다.

assert 는 Node.js 테스트용 모듈로, 정상적으로 작동하는지 확인해 주는 역할.

Firestore 데이터베이스를 미리 생성해 줍시다.

Express.js 서버 생성

index.js 파일에 입력.

 "use strict";
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const config = require("./config");
 
const app = express();
 
app.use(express.json());
app.use(cors());
app.use(bodyParser.json());
 
app.listen(config.port, () =>
  console.log("App is Listening on url http://localhost:" + config.port)
);

Firebase Firestore DB와 연결

db.js 파일에 입력.

 const firebase = require("firebase-admin");
const config = require("./config");
 
const db = firebase.initializeApp(config.firebaseConfig);
 
module.exports = db;

line 1 에서 firebase-admin을 사용했다.

const firebase = require("firebase"); 처럼 firebase 패키지를 이용해도 되지만,

에러가 날 시에는 firebase-admin으로 시도해 보길.

CRUD

Create

models 폴더에 user.js 생성 후 입력.

 class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

user 객체 생성 틀.

controllers 폴더에 userController.js 생성 후 입력.

 "use strict";
 
const firebase = require("../db");
const User = require("../models/user");
const firestore = firebase.firestore();
 
const addUser = async (req, res, next) => {
  try {
    const data = req.body;
    const user = await firestore.collection("CRUD_TEST").doc().set(data);
    res.send("Record saved successfully");
  } catch (error) {
    res.status(400).send(error.message);
  }
};
 
module.exports = {
  addUser,
};

routes 폴더에 user-routes.js 생성 후 입력

 const express = require("express");
const { addUser } = require("../controllers/userController");
 
const router = express.Router();
 
router.post("/user", addUser);
 
module.exports = {
  routes: route
};

index.js 에 추가 입력. (line 6, line 14)

 "use strict";
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const config = require("./config");
const userRoutes = require("./routes/user-routes");
 
const app = express();
 
app.use(express.json());
app.use(cors());
app.use(bodyParser.json());
 
app.use("/api", userRoutes.routes);
 
app.listen(config.port, () =>
  console.log("App is Listening on url http://localhost:" + config.port)
);

nodemon 또는 pm2로 서버를 켜준다.

nodemon이라면 아까 설정한 대로

$ npm start

pm2라면

$ pm2 start index.js --watch

postman으로 post 데이터 날려보기.

Postman 사용법은 알아서 찾아서 해보세용.

Post 형식으로 해서 URL에 http://localhost:8080/api/user 입력 후

Body - raw 로 설정하고 JSON 형식으로 설정한 후에

 {
    "name": "Kim",
    "age": "50"
}

대충 이런 데이터 한 번 보내봅시다. 물론 형식은 models 의 user.js 에서 정한대로..^^

여기서 오류가 난다면

데이터를 전송했는데 Record saved successfully가 안 뜨고 오류가 난다면 다음을 시도해 보자. 필자는 이렇게 성공함.

firebase-service-key를 가져와서 파일에 JSON 형태로 저장.
db.js 수정 ( line 4 추가, firebase.initializeApp() 수정. )

 const firebase = require("firebase-admin");
const config = require("./config");
 
const serviceAccount = require("./firebase_service_key.json");
 
const db = firebase.initializeApp({
  credential: firebase.credential.cert(serviceAccount),
  databaseURL: "https://(이름 알아서 찾아서 넣어보삼)-default-rtdb.firebaseio.com",
});
 
module.exports = db;

postman으로 post데이터 날렸을 때 밑에 Record saved successfully 가 뜨고, Firestore DB 에서 추가된 것을 확인하면 성공!!

Read

userController.js 에 Read하는 함수 추가(getAllUser), 그 함수 exports로 내보내기

( line 17~34, line 38 )

 "use strict";
 
const firebase = require("../db");
const User = require("../models/user");
const firestore = firebase.firestore();
 
const addUser = async (req, res, next) => {
  try {
    const data = req.body;
    await firestore.collection("CRUD_TEST").doc().set(data);
    res.send("Record saved successfully");
  } catch (error) {
    res.status(400).send(error.message);
  }
};
 
const getAllUser = async (req, res, next) => {
  try {
    const snapshot = await firestore.collection("CRUD_TEST").get();
    const data = snapshot;
    const usersArray = [];
    if (data.empty) {
      res.status(404).send("No User Record found");
    } else {
      snapshot.forEach((doc) => {
        const user_data = new User(doc.data().name, doc.data().age);
        usersArray.push(user_data);
      });
    }
    res.send(usersArray);
  } catch (error) {
    res.status(400).send(error.message);
  }
};
 
module.exports = {
  addUser,
  getAllUser,
};

userController.js 에서 import해 사용할 User Class를 user.js 에서 export해주기

( line 8 )

 class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
 
module.exports = User;

user-routes.js 에 getAllUser 함수로 Read 할 route 설정해 주기

( line 7 )

 const express = require("express");
const { addUser, getAllUser } = require("../controllers/userController");
 
const router = express.Router();
 
router.post("/user", addUser);
router.get("/users", getAllUser);
 
module.exports = {
  routes: router,
};

postman으로 get 요청 보내보기

http://localhost:8080/api/users 주소에 get 요청을 보내면 밑에 데이터가 쫘라락 뜰 것이다.

안 뜨면 에러메시지 보고 함수 고쳐보시길.

(Firebase 공식 문서 참고)

Update

userController.js 에 Update 함수 추가(updateUser)

마찬가지로 module.export 에 updateUser 추가!

 const updateUser = async (req, res, next) => {
  try {
    const newUserData = req.body;
    const userID = req.params.id;
    const userSnapshot = await firestore.collection("CRUD_TEST").doc(userID);
    const userData = await userSnapshot.get();
 
    if (!userData.exists) {
      res.status(404).send("User with given ID not found");
    } else {
      userSnapshot.update(newUserData);
      res.send(`Update Successfully\n
      Updated User ID : ${userID}\n
      new User Data : {
        name : ${req.body.name},
        age : ${req.body.age}
      }
      `);
    }
  } catch (error) {
    res.status(400).send(error.message);
  }
};

user-routes.js 에도 마찬가지로 route 추가. ( line 5, line 12 )

 const express = require("express");
const {
  addUser,
  getAllUser,
  updateUser,
} = require("../controllers/userController");
 
const router = express.Router();
 
router.post("/user", addUser);
router.get("/users", getAllUser);
router.post("/updateUser/:id", updateUser);
 
module.exports = {
  routes: router,
};

postman에서 테스트! post 형식으로 데이터 보내기.

문서명은 URL에서 파라미터 형식으로 입력!

( http://localhost:8080/api/updateUser/"Document명" 처럼 )

 {
    "name" : "JAEWON",
    "age" : "500"
}

같이 데이터를 입력해주고, send버튼 누르면 잘 작동하는 것을 볼 수 있다!

Delete

이제 남은 건 delete인데.. 하던 대로 똑같이 구현하면 어렵지 않게 구현할 수 있다.

userController.js 에 Delete 함수 추가(deleteUser)

마찬가지로 밑의 module.export 에 deleteUser 추가!

 const deleteUser = async (req, res, next) => {
  try {
    const userID = req.params.id;
    const userSnapshot = await firestore.collection("CRUD_TEST").doc(userID);
    const userData = await userSnapshot.get();
 
    if (!userData.exists) {
      res.status(404).send("User with given ID not found");
    } else {
      res.send(`Delete Successfully!
      Deleted User ID : ${userID}
      Deleted User Data : {
        name : ${userData.data().name},
        age : ${userData.data().age}
      }
      `);
      userSnapshot.delete();
    }
  } catch (error) {
    res.status(400).send(error.message);
  }
};

user-routes.js 에도 마찬가지로 route 추가. ( line 6, line 14 )

 const express = require("express");
const {
  addUser,
  getAllUser,
  updateUser,
  deleteUser,
} = require("../controllers/userController");
 
const router = express.Router();
 
router.post("/user", addUser);
router.get("/users", getAllUser);
router.post("/updateUser/:id", updateUser);
router.get("/deleteUser/:id", deleteUser);
 
module.exports = {
  routes: router,
};

postman에 get 방식으로 데이터 보내보면 정상적으로 지워질 User 데이터가 출력되고, Firestore에서 지워지는 것을 확인할 수 있음.

지울 Document명(문서명)은 파라미터로 입력.

(http://localhost:8080/api/deleteUser/"문서명")

이렇게 성공적으로 Express.js로 서버를 열어 Firebase Firestore DB와 연동하고 CRUD까지 마쳤다. ^ㅁ^

Node.js 프로젝트 생성
패키지 설치
파일 구조 생성
환경 변수(SDK), Firebase DB 생성
Express.js 서버 생성
Firebase Firestore DB와 연결
CRUD
Create
Read
Update
Delete

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`