Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기
이 페이지는 Cloud Translation API를 통해 번역되었습니다.
Switch to English

Firebase 용 Cloud 함수

이 코드 랩에서는 Google Cloud Functions 용 Firebase SDK를 사용하여 채팅 웹 앱을 개선하는 방법과 Cloud Functions를 사용하여 채팅 앱 사용자에게 알림을 보내는 방법을 알아 봅니다.

3b1284f5144b54f6.png

배울 것

  • Firebase SDK를 사용하여 Google Cloud 함수를 만듭니다.
  • 인증, Cloud Storage 및 Cloud Firestore 이벤트를 기반으로 Cloud Functions를 트리거합니다.
  • 웹 앱에 Firebase 클라우드 메시징 지원을 추가합니다.

필요한 것

  • WebStorm , Atom 또는 Sublime 과 같이 선택한 IDE / 텍스트 편집기.
  • NodeJS v8이 설치된 셸 명령을 실행하는 터미널입니다.
  • Chrome과 같은 브라우저.
  • 샘플 코드. 이에 대한 다음 단계를 참조하십시오.

명령 줄에서 GitHub 저장소 를 복제합니다.

git clone https://github.com/firebase/friendlychat

시작 앱 가져 오기

IDE를 사용하여 android_studio_folder.png 샘플 코드 디렉토리의 cloud-functions-start 디렉토리. 이 디렉토리에는 완전한 기능을 갖춘 채팅 웹 앱으로 구성된 코드 랩의 시작 코드가 포함되어 있습니다.

프로젝트 생성

Firebase 콘솔 에서 프로젝트 추가를 클릭하고 이름을 FriendlyChat으로 지정 합니다.

프로젝트 만들기를 클릭합니다.

Google 인증 활성화

사용자가 앱에 로그인 할 수 있도록 활성화해야하는 Google 인증을 사용합니다.

Firebase 콘솔에서 개발 섹션> 인증 > 로그인 방법 탭을 엽니 다 (또는 여기클릭 하여 이동). Google 로그인 공급자를 활성화하고 저장을 클릭해야 합니다 . 이렇게하면 사용자가 Google 계정으로 웹 앱에 로그인 할 수 있습니다.

또한 앱의 공개 이름을 Friendly Chat 으로 설정해도됩니다.

8290061806aacb46.png

클라우드 스토리지 활성화

앱은 Cloud Storage를 사용하여 사진을 업로드합니다. Firebase 프로젝트에서 Cloud Storage를 사용 설정하려면 Storage 섹션으로 이동하여 시작하기 버튼을 클릭하세요. 당신이 보안 규칙에 대한 면책을받을 때 그런있어 그것은을 클릭합니다.

842ad84821323ef5.png

Firebase 명령 줄 인터페이스 (CLI)를 사용하면 웹 앱을 로컬로 제공하고 웹 앱과 Cloud Functions를 배포 할 수 있습니다.

CLI를 설치하거나 업그레이드하려면 다음 npm 명령을 실행하십시오.

npm -g install firebase-tools

CLI가 올바르게 설치되었는지 확인하려면 콘솔을 열고 다음을 실행하십시오.

firebase --version

Firebase CLI의 버전이 4.0.0 이상인지 확인하여 Cloud Functions에 필요한 모든 최신 기능을 갖출 수 있습니다. 그렇지 않은 경우 npm install -g firebase-tools 를 실행하여 위와 같이 업그레이드합니다.

다음을 실행하여 Firebase CLI를 승인합니다.

firebase login

cloud-functions-start 디렉토리에 있는지 확인한 다음 Firebase 프로젝트를 사용하도록 Firebase CLI를 설정합니다.

firebase use --add

그런 다음 프로젝트 ID를 선택하고 안내를 따릅니다. 메시지가 표시되면 예를 들어 codelab 과 같은 별칭을 선택할 수 있습니다.

이제 프로젝트를 가져오고 구성 했으므로 처음으로 웹앱을 실행할 준비가되었습니다. cloud-functions-start 폴더에서 콘솔을 열고 firebase deploy --except functions 실행합니다. 단, Firebase 호스팅에만 웹 앱을 배포합니다.

firebase deploy --except functions

다음은 표시되어야하는 콘솔 출력입니다.

i deploying database, storage, hosting
✔  database: rules ready to deploy.
i  storage: checking rules for compilation errors...
✔  storage: rules file compiled successfully
i  hosting: preparing ./ directory for upload...
✔  hosting: ./ folder uploaded successfully
✔ storage: rules file compiled successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

웹 앱 열기

마지막 줄에는 호스팅 URL 이 표시되어야합니다 . 이제 웹앱은 https : // <project-id> .firebaseapp.com 형식이어야하는이 URL에서 제공되어야합니다. 열어 봐. 채팅 앱의 작동 UI가 표시되어야합니다.

Google로 로그인 버튼을 사용하여 앱에 로그인 하고 메시지를 추가하고 이미지를 게시 할 수 있습니다.

3b1284f5144b54f6.png

새 브라우저에서 처음으로 앱에 로그인하는 경우 메시지가 표시 될 때 알림을 허용해야합니다. 8b9d0c66dc36153d.png

나중에 알림을 활성화해야합니다.

실수로 차단 을 클릭 한 경우 Chrome Omnibar에서 URL 왼쪽에있는 🔒 보안 버튼을 클릭하고 알림>이 사이트에서 항상 허용을 선택하여이 설정을 변경할 수 있습니다.

e926868b0546ed71.png

이제 Cloud Functions 용 Firebase SDK를 사용하여 몇 가지 기능을 추가 할 것입니다.

Cloud Functions를 사용하면 서버를 설정하지 않고도 클라우드에서 실행되는 코드를 쉽게 가질 수 있습니다. Firebase 인증, Cloud Storage 및 Firebase 실시간 데이터베이스 이벤트에 반응하는 함수를 빌드하는 방법을 보여 드리겠습니다. 인증부터 시작하겠습니다.

Cloud Functions 용 Firebase SDK를 사용하는 경우 Functions 코드는 functions 디렉토리에 있습니다 (기본적으로). Functions 코드는 Node.js 앱이기도하므로 앱에 대한 정보를 제공하고 종속성을 나열하는 package.json 이 필요합니다.

더 쉽게하기 위해 코드가 들어갈 functions/index.js 파일을 이미 만들었습니다. 계속 진행하기 전에이 파일을 확인하십시오.

cd functions
ls

Node.js에 익숙하지 않은 경우 코드 랩을 계속하기 전에 자세히 알아 보는 것이 좋습니다.

package.json 파일에는 이미 Cloud Functions 용 Firebase SDKFirebase Admin SDK의 두 가지 필수 종속성이 나열되어 있습니다 . 로컬로 설치하려면 functions 폴더에서 npm install 을 실행하십시오.

npm install

이제 index.js 파일을 살펴 보겠습니다.

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// TODO(DEVELOPER): Import the Cloud Functions for Firebase and the Firebase Admin modules here.

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

먼저 필요한 모듈을 가져온 다음 TODO 대신 세 개의 함수를 작성합니다. 먼저 필요한 노드 모듈을 가져 오겠습니다.

이 코드 랩에는 두 개의 모듈이 필요합니다. firebase firebase-functions 모듈을 사용하면 Cloud Functions 트리거 규칙을 작성할 수 있고, firebase firebase-admin 모듈을 사용하면 관리자 액세스 권한이있는 서버에서 Firebase 플랫폼을 사용할 수 있습니다. Cloud Firestore 또는 FCM 알림을 보냅니다.

index.js 파일에서 첫 번째 TODO 를 다음으로 TODO .

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// Import the Firebase SDK for Google Cloud Functions.
const functions = require('firebase-functions');
// Import and initialize the Firebase Admin SDK.
const admin = require('firebase-admin');
admin.initializeApp();

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

Firebase Admin SDK는 Cloud Functions 환경 또는 기타 Google Cloud Platform 컨테이너에 배포 할 때 자동으로 구성 할 수 있습니다. 이것은 우리가 admin.initializeApp();

이제 사용자가 채팅 앱에 처음 로그인 할 때 실행되는 함수를 추가하고 사용자를 환영하는 채팅 메시지를 추가하겠습니다.

채팅 메시지 구조

FriendlyChat 채팅 피드에 게시 된 메시지는 Cloud Firestore에 저장됩니다. 메시지에 사용하는 데이터 구조를 살펴 보겠습니다. 이렇게하려면 "Hello World"라는 새 메시지를 채팅에 게시합니다.

11f5a676fbb1a69a.png

다음과 같이 나타납니다.

fe6d1c020d0744cf.png

Firebase 앱 콘솔에서 개발 섹션 아래의 데이터베이스를 클릭합니다. 메시지 컬렉션과 작성한 메시지가 포함 된 문서가 표시되어야합니다.

442c9c10b5e2b245.png

보시다시피 채팅 메시지는 messages 컬렉션에 추가 된 name , profilePicUrl , texttimestamp 속성이있는 문서로 Cloud Firestore에 저장됩니다.

환영 메시지 추가

첫 번째 Cloud 함수는 채팅에 새로운 사용자 를 환영하는 메시지를 추가합니다. 이를 위해 사용자가 Firebase 앱에 처음으로 로그인 할 때마다 함수를 실행하는 functions.auth().onCreate 트리거를 사용할 수 있습니다. index.js 파일에 addWelcomeMessages 함수를 추가합니다.

index.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  console.log('A new user signed in for the first time.');
  const fullName = user.displayName || 'Anonymous';

  // Saves the new welcome message into the database
  // which then displays it in the FriendlyChat clients.
  await admin.firestore().collection('messages').add({
    name: 'Firebase Bot',
    profilePicUrl: '/images/firebase-logo.png', // Firebase logo
    text: `${fullName} signed in for the first time! Welcome!`,
    timestamp: admin.firestore.FieldValue.serverTimestamp(),
  });
  console.log('Welcome message written to database.');
});

이 함수를 특수 exports 객체에 추가하는 것은 Node가 현재 파일 외부에서 함수에 액세스 할 수 있도록하는 방법이며 Cloud Functions에 필요합니다.

위의 기능에서 "Firebase Bot"이 게시 한 새로운 환영 메시지를 채팅 메시지 목록에 추가합니다. 채팅 메시지가 저장되는 Cloud Firestore의 messages 컬렉션에 대한 add 메서드를 사용하여이를 수행합니다.

이 작업은 비동기 작업이므로 함수가 너무 일찍 실행을 종료하지 않도록 Cloud Firestore 쓰기가 완료된시기를 나타내는 Promise 를 반환해야합니다.

함수 배포

함수는 배포 한 후에 만 ​​활성화됩니다. 명령 줄에서 firebase deploy --only functions 실행 firebase deploy --only functions .

firebase deploy --only functions

다음은 표시되어야하는 콘솔 출력입니다.

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
⚠  functions: missing necessary APIs. Enabling now...
i  env: ensuring necessary APIs are enabled...
⚠  env: missing necessary APIs. Enabling now...
i  functions: waiting for APIs to activate...
i  env: waiting for APIs to activate...
✔  env: all necessary APIs are enabled
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: creating function addWelcomeMessages...
✔  functions[addWelcomeMessages]: Successful create operation. 
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlypchat-1234/overview

기능 테스트

함수가 성공적으로 배포되면 처음으로 로그인하는 사용자가 있어야합니다.

  1. 호스팅 URL ( https://<project-id>.firebaseapp.com 형식)을 사용하여 브라우저에서 앱을 엽니 다.
  2. 새 사용자로 로그인 버튼을 사용하여 앱에서 처음으로 로그인 합니다.
  • 이미 앱에 로그인 한 경우 Firebase 콘솔 인증 섹션을 열고 사용자 목록에서 계정을 삭제할 수 있습니다. 그런 다음 다시 로그인하십시오.

262535d1b1223c65.png

  1. 로그인하면 환영 메시지가 자동으로 표시됩니다.

1c70e0d64b23525b.png

사용자는 채팅에서 모든 유형의 이미지를 업로드 할 수 있으며, 특히 공개 소셜 플랫폼에서 불쾌감을주는 이미지를 조정하는 것이 항상 중요합니다. FriendlyChat에서 채팅에 게시되는 이미지는 Google Cloud Storage에 저장 됩니다.

Cloud Functions를 사용하면 functions.storage().onFinalize 트리거를 사용하여 새 이미지 업로드를 감지 할 수 있습니다. Cloud Storage에서 새 파일이 업로드되거나 수정 될 때마다 실행됩니다.

이미지를 조정하기 위해 다음 프로세스를 거칩니다.

  1. Cloud Vision API를 사용하여 이미지가 성인 또는 폭력으로 신고되었는지 확인
  2. 이미지에 플래그가 지정된 경우 실행중인 Functions 인스턴스에 다운로드하십시오.
  3. ImageMagick을 사용하여 이미지 흐림
  4. 흐린 이미지를 Cloud Storage에 업로드

Cloud Vision API 사용

이 함수에서 Google Cloud Vision API를 사용할 것이므로 Firebase 프로젝트에서 API를 사용 설정해야합니다. 이 링크 를 따라 Firebase 프로젝트를 선택하고 API를 활성화하십시오.

5c77fee51ec5de49.png

종속성 설치

이미지를 조정하려면 몇 가지 Node.js 패키지가 필요합니다.

  • Node.js 용 Google Cloud Vision 클라이언트 라이브러리 : @ google-cloud / vision 은 부적절한 이미지를 감지하기 위해 Cloud Vision API를 통해 이미지를 실행합니다.
  • 프로세스를 실행할 수있는 Node.js 라이브러리 : ImageMagick 명령 줄 도구가 모든 Functions 인스턴스에 사전 설치되어 있으므로 ImageMagick을 실행할 자식 프로세스 약속 .

이 두 패키지를 Cloud Functions 앱에 npm install --save 다음 npm install --save 명령을 실행하십시오. functions 디렉토리에서이 작업을 수행해야합니다.

npm install --save @google-cloud/vision@0.12.0 child-process-promise@2.2.1

이렇게하면 두 패키지가 로컬에 설치되고 package.json 파일에 선언 된 종속성으로 추가됩니다.

종속성 가져 오기 및 구성

설치된 두 개의 종속성과이 섹션에서 필요한 일부 Node.js 핵심 모듈 ( path , osfs )을 가져 오려면 index.js 파일의 맨 위에 다음 행을 추가하십시오.

index.js

const Vision = require('@google-cloud/vision');
const vision = new Vision();
const spawn = require('child-process-promise').spawn;

const path = require('path');
const os = require('os');
const fs = require('fs');

함수는 Google Cloud 환경 내에서 실행되므로 Cloud Storage 및 Cloud Vision 라이브러리를 구성 할 필요가 없습니다. 프로젝트를 사용하도록 자동으로 구성됩니다.

부적절한 이미지 감지

Cloud Storage 버킷에서 파일 또는 폴더가 생성되거나 수정되는 즉시 코드를 실행하는 functions.storage.onChange Cloud Functions 트리거를 사용하게됩니다. blurOffensiveImages 함수를 index.js 파일에 추가하십시오.

index.js

// Checks if uploaded images are flagged as Adult or Violence and if so blurs them.
exports.blurOffensiveImages = functions.runWith({memory: '2GB'}).storage.object().onFinalize(
    async (object) => {
      const image = {
        source: {imageUri: `gs://${object.bucket}/${object.name}`},
      };

      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(image);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.types.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        console.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      console.log('The image', object.name, 'has been detected as OK.');
    });

함수를 실행할 Cloud Functions 인스턴스의 일부 구성을 추가했습니다 .runWith({memory: '2GB'}) 기능은 메모리 집약적입니다.

함수가 트리거되면 이미지가 Cloud Vision API를 통해 실행되어 성인 또는 폭력으로 신고되었는지 감지합니다. 이 기준에 따라 이미지가 부적절한 것으로 감지되면 다음에 보게 될 blurImage 함수에서 수행되는 이미지를 흐리게 처리합니다.

이미지 흐리게하기

index.js 파일에 다음 blurImage 함수를 추가하십시오.

index.js

// Blurs the given image located in the given bucket using ImageMagick.
async function blurImage(filePath) {
  const tempLocalFile = path.join(os.tmpdir(), path.basename(filePath));
  const messageId = filePath.split(path.sep)[1];
  const bucket = admin.storage().bucket();

  // Download file from bucket.
  await bucket.file(filePath).download({destination: tempLocalFile});
  console.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await spawn('convert', [tempLocalFile, '-channel', 'RGBA', '-blur', '0x24', tempLocalFile]);
  console.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  console.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  console.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  console.log('Marked the image as moderated in the database.');
}

위의 기능에서 이미지 바이너리는 Cloud Storage에서 다운로드됩니다. 그런 다음 ImageMagick의 convert 도구를 사용하여 이미지를 흐리게 처리하고 흐리게 처리 된 버전을 Storage Bucket에 다시 업로드합니다. 그런 다음 Cloud Functions 인스턴스에서 파일을 삭제하여 일부 디스크 공간을 확보합니다. 동일한 Cloud Functions 인스턴스가 재사용 될 수 있고 파일이 정리되지 않으면 디스크가 부족할 수 있기 때문에 이렇게합니다. 마지막으로 이미지가 조정되었음을 나타내는 부울을 채팅 메시지에 추가하면 클라이언트에서 메시지 새로 고침이 트리거됩니다.

함수 배포

함수는 배포 한 후에 만 ​​활성화됩니다. 명령 줄에서 firebase deploy --only functions 실행 firebase deploy --only functions .

firebase deploy --only functions

다음은 표시되어야하는 콘솔 출력입니다.

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: creating function blurOffensiveImages...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

기능 테스트

함수가 성공적으로 배포되면 :

  1. 호스팅 URL ( https://<project-id>.firebaseapp.com 형식)을 사용하여 브라우저에서 앱을 엽니 다.
  2. 로그인하면 앱에서 이미지를 업로드합니다. 4db9fdab56703e4a.png
  3. 업로드 할 가장 공격적인 이미지를 선택하십시오 (또는이 육식 좀비를 사용할 수 있습니다!). 잠시 후 이미지의 흐린 버전으로 게시물이 새로 고쳐 져야합니다. 83dd904fbaf97d2b.png

이 섹션에서는 새 메시지가 게시 될 때 채팅 참가자에게 알림을 보내는 Cloud 함수를 추가합니다.

Firebase 클라우드 메시징 (FCM)을 사용하면 플랫폼 간 안정적인 방식으로 사용자에게 알림을 보낼 수 있습니다. 사용자에게 알림을 보내려면 FCM 기기 토큰이 필요합니다. 우리가 사용하고있는 채팅 웹 앱은 사용자가 새 브라우저 또는 장치에서 처음으로 앱을 열 때 이미 사용자로부터 장치 토큰을 수집합니다. 이러한 토큰은 fcmTokens 컬렉션의 Cloud Firestore에 저장됩니다.

웹 앱에서 FCM 기기 토큰을 얻는 방법을 배우고 싶다면 Firebase Web Codelab을 참조 하세요.

알림 보내기

새 메시지가 게시되는시기를 감지하기 위해 Cloud Firestore의 지정된 경로에서 새 객체가 생성 될 때 코드를 실행하는 functions.firestore.document().onCreate Cloud Functions 트리거를 사용합니다. index.js 파일에 sendNotifications 함수를 추가합니다.

index.js

// Sends a notifications to all users when a new message is posted.
exports.sendNotifications = functions.firestore.document('messages/{messageId}').onCreate(
  async (snapshot) => {
    // Notification details.
    const text = snapshot.data().text;
    const payload = {
      notification: {
        title: `${snapshot.data().name} posted ${text ? 'a message' : 'an image'}`,
        body: text ? (text.length <= 100 ? text : text.substring(0, 97) + '...') : '',
        icon: snapshot.data().profilePicUrl || '/images/profile_placeholder.png',
        click_action: `https://${process.env.GCLOUD_PROJECT}.firebaseapp.com`,
      }
    };

    // Get the list of device tokens.
    const allTokens = await admin.firestore().collection('fcmTokens').get();
    const tokens = [];
    allTokens.forEach((tokenDoc) => {
      tokens.push(tokenDoc.id);
    });

    if (tokens.length > 0) {
      // Send notifications to all tokens.
      const response = await admin.messaging().sendToDevice(tokens, payload);
      await cleanupTokens(response, tokens);
      console.log('Notifications have been sent and tokens cleaned up.');
    }
  });

위의 함수에서는 Cloud Firestore 데이터베이스에서 모든 사용자의 기기 토큰을 수집하고 admin.messaging().sendToDevice 함수를 사용하여 각 사용자에게 알림을 admin.messaging().sendToDevice .

토큰 정리

마지막으로 더 이상 유효하지 않은 토큰을 제거하고 싶습니다. 이는 사용자로부터받은 토큰이 더 이상 브라우저 나 장치에서 사용되지 않을 때 발생합니다. 예를 들어, 사용자가 브라우저 세션에 대한 알림 권한을 취소 한 경우에 발생합니다. 이를 위해 index.js 파일에 다음 cleanupTokens 함수를 추가합니다.

index.js

// Cleans up the tokens that are no longer valid.
function cleanupTokens(response, tokens) {
 // For each notification we check if there was an error.
 const tokensDelete = [];
 response.results.forEach((result, index) => {
   const error = result.error;
   if (error) {
     console.error('Failure sending notification to', tokens[index], error);
     // Cleanup the tokens who are not registered anymore.
     if (error.code === 'messaging/invalid-registration-token' ||
         error.code === 'messaging/registration-token-not-registered') {
       const deleteTask = admin.firestore().collection('fcmTokens').doc(tokens[index]).delete();
       tokensDelete.push(deleteTask);
     }
   }
 });
 return Promise.all(tokensDelete);
}

함수 배포

함수는 배포 한 후에 만 ​​활성화됩니다. 명령 줄에서 firebase deploy --only functions 실행 firebase deploy --only functions .

firebase deploy --only functions

다음은 표시되어야하는 콘솔 출력입니다.

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: updating function blurOffensiveImages...
i  functions: creating function sendNotifications...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful updating operation.
✔  functions[sendNotifications]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

기능 테스트

  1. 함수가 성공적으로 배포되면 호스팅 URL ( https://<project-id>.firebaseapp.com 형식)을 사용하여 브라우저에서 앱을 엽니 다.
  2. 앱에 처음 로그인하는 경우 메시지가 표시 될 때 알림을 허용해야합니다. 8b9d0c66dc36153d.png
  3. 채팅 앱 탭을 닫거나 다른 탭 표시 : 앱이 백그라운드에있는 경우에만 알림이 표시됩니다. 앱이 포 그라운드에있는 동안 메시지를받는 방법을 배우려면 설명서를 참조하십시오 .
  4. 다른 브라우저 (또는 시크릿 창)를 사용하여 앱에 로그인하고 메시지를 게시합니다. 첫 번째 브라우저에 알림이 표시되어야합니다. 45282ab12b28b926.png

Cloud Functions 용 Firebase SDK를 사용하고 채팅 앱에 서버 측 구성 요소를 추가했습니다.

우리가 다룬 내용

  • Cloud Functions 용 Firebase SDK를 사용하여 Cloud Functions를 작성합니다.
  • 인증, Cloud Storage 및 Cloud Firestore 이벤트를 기반으로 Cloud Functions를 트리거합니다.
  • 웹 앱에 Firebase 클라우드 메시징 지원을 추가합니다.
  • Firebase CLI를 사용하여 Cloud Functions를 배포했습니다.

다음 단계

더 알아보기