Next.js + Firebase를 활용한 모바일 푸시 구현

본 포스팅은 스터디를 통해 작성한 글을 복사한 내용입니다.

여기서 Next와 관련된 더 많은 글들을 확인하실 수 있습니다.

---

1. 서비스 키 생성

1-1) 파이어베이스에 접속 후 프로젝트 선택

1-2) 프로젝트 설정 - 서비스 계정 - 비공개 키 생성 클릭

 

1-3) 다운받은 키는 프로젝트 특정 폴더에 위치시킵니다.

 

2. Firebase 설치

npm install firebase-admin --save

 

3. Firebase SDK 초기화

3-1) 파이어베이스 api를 생성합니다. 

SDK 초기화시 1-3)에서 위치한 경로를 지정해줍니다.

 

api/fcm/route.ts

import admin from "firebase-admin";
import { getMessaging } from "firebase-admin/messaging";

const firebaseConfig = require("@constants/fcm/firebase-admin-sdk.json");

export async function GET(req: Request, res: Response) {
  try {
    if (admin.apps.length === 0) {
      admin.initializeApp({
        credential: admin.credential.cert(firebaseConfig),
      });
      
      console.log("Authentication success");
    }    

    return Response.json({
      message: message,
    });
  } catch (error) {
    return Response.error();
  }
}

 

localhost:3000/api/fcm 호출 후 초기화가 잘되었는지 확인합니다.

 

*초기화 상태를 체크하지 않고 중복 초기화를 하게 되면 아래와 같은 에러 메세지가 발생합니다.

 

4. 푸시 테스트

이제 토큰을 파라미터로 전달받아 푸시를 전송하는 코드를 작성해봅니다.

message에 선언된 data 섹션은 클라이언트에 전달될 부분과 동일해야 합니다.

모바일앱 FCM 수신 중 일부

 

api/fcm/route.ts

import admin from "firebase-admin";
import { getMessaging } from "firebase-admin/messaging";

const firebaseConfig = require("@constants/fcm/firebase-admin-sdk.json");

/**
 * 푸시 테스트
 * @param req
 * @param token 테스트 토큰
 * @returns
 */
export async function GET(req: Request, res: Response) {
  const { searchParams } = new URL(req.url);
  const token = searchParams.get("token");
  let message = "OK";

  try {
    if (admin.apps.length === 0) {
      admin.initializeApp({
        credential: admin.credential.cert(firebaseConfig),
      });

      console.log("Authentication success");
    }

    if (token) {
      const message = {
        notification: {
          title: "푸시 테스트",
          body: "푸시 내용입니다.",
        },
        data: {
          id: generateRandomString(6),
          title: "푸시 테스트",
          content: "푸시 내용입니다.",
        },
        token: token,
        apns: {
          payload: {
            aps: {
              contentAvailable: true,
              badge: 0,
              sound: "default",
            },
          },
        },
      };

      getMessaging()
        .send(message)
        .then((response) => {
          console.log("Successfully sent message:", response);
        })
        .catch((error) => {
          console.log("Error sending message:", error);
        });
    } else {
      message = "Token is not available";
    }

    return Response.json({
      message: message,
    });
  } catch (error) {
    return Response.error();
  }
}

 

api를 테스트해봅니다.

 

푸시가 성공되면 아래와 같이 조회됩니다.

 

개발하고 보니 서버에서 푸시 메세지를 보내는 것이 클라이언트에서 푸시를 받는 설정보다 더 간편했던 것 같습니다.

푸시 수신 설정시에 앱 특성상 기기 상태별로 따로 처리해줘야하는 부분(background, foreground, terminated 상태에 따른) 이 많더라구요. 특히 IOS 설정 부분은 깨나 애먹었던 것 같아요.

 

참고문서

서버에 Firebase Admin SDK 추가