[Firebase, Algolia] Cloud Extension 으로 Algolia 연결해서 검색 구현

 

Firebase 는 text 검색이 exact search 검색만 가능합니다.

https://firebase.google.com/docs/firestore/solutions/search

 

따라서 검색 업체인 Algolia 를 연동하여 사용해보도록 하겠습니다.

위 링크에서는 다른 업체들도 소개하였으나 Algolia 가 처음 사용하기에 편하다고 하여 선택했습니다.

 

firebase 에서 Algolia 를 사용하려면 다음의 과정을 따라가면 됩니다.

 

https://www.algolia.com/developers/firebase-search-extension/

 

Firebase Extension 을 사용하면 간편하게 될거라고 생각했는데, Firebase Extension 이 beta 기도 하고, 직접 Functions 로 작업하는 것이 좋을 것 같아서 그렇게 진행해보겠습니다.

 

 

1) Firebase Functions 준비

Firebase Functions 를 사용할 것이기 때문에 Firebase Functions 를 준비해야 합니다.

아래 포스팅으로 이 내용은 생략하겠습니다.

 

2022.01.20 - [PROGRAMMING/기타] - [Firebase] Firebase Functions CLI 사용하기, 함수 배포, 리전 변경

[Firebase] Firebase Functions CLI 사용하기, 함수 배포, 리전 변경

또한, 이 아티클에서 전반적인 과정을 이해한 후 프로젝트에 필요한 내용을 작성하였습니다. (오류가 나는 부분 등)

설명이 잘 되어 있으니 쭉 읽어보면 좋습니다.

https://rsfarias.medium.com/how-to-set-up-firestore-and-algolia-319fcf2c0d37

How to set up Firestore and Algolia using Cloud Functions.

 

2) algoliasearch 설치

functions 폴더로 이동하여 npm 으로 algoliasearch 를 설치해줍니다.

$ cd functions
$ npm install algoliasearch --save

 

3) Algolia Keys 등록

Algolia 를 사용하려면 Algolia 에 가입 후 프로젝트를 생성해서 API Keys 를 얻어야 합니다.

프로젝트를 생성하면 아래와 같이 API Keys 를 확인할 수 있습니다.

(참고: dev 를 위한 것과 프로덕션을 위한 것을 분리해서 환경을 조성하면 좋습니다.)

 

 

Admin API Key 는 절대 노출하면 안되는 정보입니다. (front-end 등 노출될 수 있는 공간에는 절대 두면 안됩니다)

Firebase Cloud Functions 는 이런 민감한 정보를 저장하는 환경 변수 (https://firebase.google.com/docs/functions/config-env) 를 제공합니다.

 

따라서, 다음과 같이 설정해주면 됩니다.

 

$ firebase functions:config:set algolia.appid="YOUR_APP_ID" algolia.apikey="YOUR_API_KEY"

• appid: Algolia 앱 id
• apikey: Admin API Key

 

다음과 같이 config 가 업데이트 되었다고 나오면 완료된 것입니다.

 

확인하고 싶으면

$ firebase functions:config:get

 

으로 볼 수 있습니다.

 

 

 

 

4) Algolia 에 index 만들기

이제 firestore 의 어떤 collection 을 Algolia 에 index 할 것인지를 정하면 됩니다.

그 전에 Algolia 와 연동하는 과정을 짧게 짚어보면,

• 1) Algolia 에 프로젝트 생성
• 2) Algolia 에 index 생성
• 3) 데이터를 Algolia 에 올리기 (file / API / manually)
• 4) 데이터 업데이트 시 Algolia 에 반영되도록 functions 작성
• 5) Search 작성

 

이 됩니다. 이는 Algolia 프로젝트 초기 생성 시에도 다음과 같이 확인할 수 있습니다.

 

 

Algolia 프로젝트에 필요한 index 를 만들어주면 됩니다. 이름은 편한대로 지으면 됩니다.

 

 

5) Firestore 내용을 Algolia 에 올리기

이 과정은 기존에 데이터가 있는 경우 진행해주면 됩니다.

즉, 기존 데이터를 Algolia 에 올려서 검색이 되도록 indexing 하는 과정입니다.

데이터를 올리는 데에는 json file 로 올리거나 API 를 사용하거나, 하나하나 직접 올리는 방법이 있습니다.

 

API 를 사용하기 위해 script 를 직접 작성할 수 있습니다.

앞서 말했듯, 이 과정은 기존 데이터를 올리는 과정이므로 단 한 번만 실행되어야 합니다!

 

파일을 하나 만들어서 실행시켜도 되지만, cloud functions 로 해당 기능을 구현할 수 있습니다.

const functions = require("firebase-functions");
const admin = require("firebase-admin");

// Set up Algolia
const {default: algoliasearch} = require("algoliasearch");
const algoliaClient = algoliasearch(
    functions.config().algolia.appid_dev,
    functions.config().algolia.apikey_dev,
);
const indexName = "dev_title";
const collectionIndex = algoliaClient.initIndex(indexName);

// Create a HTTP request cloud functions
exports.sendCollectionToAlgolia = functions
    .region("asia-northeast2")
    .https.onRequest(async (request, response) => {
      const firestore = admin.firestore();
      const algoliaRecords = [];
      const snapshot = await firestore.collection("Record").listDocuments.get();
      snapshot.forEach((doc) => {
        const document = doc.data();
        const record = {
          objectID: doc.id,
          title: document.title,
        };
        algoliaRecords.push(record);
      });

      // After all records are created, save them to Algolia
      collectionIndex.saveObjects(algoliaRecords, (_error, content) => {
        response.status(200)
            .send("COLLECTION was indexed to Algolia successfully.");
      });
    });

 

자신의 프로젝트에 맞게 내부 코드는 변형해서 사용하면 됩니다.

 

 

 

6) Firestore 의 데이터가 업데이트될 때 Algolia 에 반영되도록 functions 작성

Firebase 에 데이터가 생성/수정/삭제될 때, Algolia 도 해당 내용을 가지고 "최신"으로 업데이트해야 합니다.

Firestore 에서 특정 경로의 데이터 생성/수정/삭제가 발생할 경우에 트리거되는 함수를 작성해보겠습니다.

 

그 전에 먼저 Algolia client 랑 index 를 정의해야 합니다. 이는 5) 에 포함된 과정이지만, 혹시 해당 과정이 필요없어서 건너뛰었다면 체크하고 넘어가야 합니다.

// Set up Algolia
const {default: algoliasearch} = require("algoliasearch");
const algoliaClient = algoliasearch(
    functions.config().algolia.appid_dev,
    functions.config().algolia.apikey_dev,
);
const indexName = "dev_title";
const collectionIndex = algoliaClient.initIndex(indexName);

이처럼 appId 와 APIKey 로 client 를 만들어주고, index 를 지정해줍니다.

 

 

6-1) onCreate

새로운 document 가 생길 경우, Algolia 에 반영합니다.

// define functions:collectionOnCreate
exports.collectionOnCreate = functions
    .region("asia-northeast2")
    .firestore.document("Record/{recordId}")
    .onCreate(async (snapshot, context) => {
      await saveDocumentInAlgolia(snapshot);
    });

const saveDocumentInAlgolia = async (snapshot) => {
  if (snapshot.exists) {
    const data = snapshot.data();
    console.log(snapshot.id);
    if (data) {
      const record = {
        objectID: snapshot.id,
        title: data.title,
      };
      collectionIndex.saveObject(record)
          .catch((res) => console.log("Error with: ", res));
    }
  }
};

• Record Collections 이 있다고 가정하면, 그 id 는 위와 같이 {rocordId} 로 작성해주면 됩니다.
• indexing 할 내용만 record 에 담아 collectionIndex 에 saveObject 로 저장해주면 됩니다.

 

이때, Algolia 에서 취급하는 unique 한 id 인 "objectID" 를 꼭 요소로 넣어주거나 다음과 같이 사용해주어야 합니다.

index.saveObject(object object, {
  autoGenerateObjectIDIfNotExist: true
})

 

 

6-2) onUpdate

Algolia 에 원래 있는 요소를 업데이트하는 하는 방법에는 2가지 방법이 있습니다.

• saveObject(record): record 에 있는 정보로 기존 정보를 덮어씁니다.
• partialUpdateObjects(record): record 에 넣어준 정보만 새로 저장합니다.

 

특정 요소만 업데이트하고자 한다면 partialUpdateObjects 를, 모든 정보를 재갱신하고자 한다면 saveObject 를 사용하면 됩니다.

여기서는 기존의 정보를 사용해서 필요한 정보만 업데이트할 것이므로, partialUpdateObjects 를 사용하겠습니다.

 

// define functions:ticcleOnUpdate
exports.ticcleOnUpdate = functions
    .region("asia-northeast2")
    .firestore.document("Record/{recordId}")
    .onUpdate(async (change, context) => {
      await updateDocumentInAlgolia(context.params.recordId, change);
    });


const updateDocumentInAlgolia = async (objectID, change) => {
  const before = change.before.data();
  const after = change.after.data();
  if (before && after) {
    const record = {objectID: objectID};
    let flag = false;
    if (before.title != after.title) {
      record.title = after.title;
      flag = true;
    }
    if (before.content != after.content) {
      record.content = after.content;
      flag = true;
    }

    if (flag) {
      // update
      collectionIndex.partialUpdateObject(record)
          .catch((res) => console.log("Error with: ", res));
    }
  }
};

• .firestore.document("Record/{recordId}"): 여기 경로에 있는 {recordId} 는
• .onUpdate(async (change, context): context 에 포함되어 전달됩니다. 그래서 context.params.recordId 로 접근할 수 있습니다.
• title 와 content 를 indexing 한다고 가정했을 때 before data 와 after data 를 비교해서 필요한 내용만 partialUpdateObjects 을 사용하여 업데이트해줍니다.

 

6-3) onDelete

삭제는 간단합니다. 해당하는 objectID 를 삭제해주기만 하면 됩니다.

// define functions:ticcleOnDelete
exports.ticcleOnDelete = functions
    .region("asia-northeast2")
    .firestore.document("Record/{recordId}")
    .onDelete(async (snapshot, context) => {
      await deleteDocumentInAlgolia(snapshot);
    });
    
const deleteDocumentInAlgolia = async (snapshot) => {
  if (snapshot.exists) {
    const objectID = snapshot.id;
    collectionIndex.deleteObject(objectID)
        .catch((res) => console.log("Error with: ", res));
  }
};

 

 

여기까지 하고 테스트를 해보면 정의한 함수들이 잘 동작하고, Algolia 에도 잘 반영되는 것을 확인할 수 있습니다.

 

 

다음에는 React Native 에 Algolia 를 연결하여 검색을 구현해보겠습니다.