Firebase 를 사용해 작성중의 서비스 #오오엔 에 OGP 이미지를 표시하고 싶어졌으므로 조사해 구현해 보았으므로 그 메모.

Firebase 요금 플랜 변경

요금 플랜을 従量制로 변경합니다. 외부 서버와의 통신이 필요하기 때문에 従量制 플랜으로 할 필요가 있습니다.

Functions를 사용하는 프로젝트 만들기

firebase cli 에서 초기화 시 functions 사용

firebase init
〜
◉ Functions: Configure and deploy Cloud Functions

OGP 내용을 얻는 코드

https.onCall 프로토콜에서 구현해 본 코드

필수 모듈 설치

npm i --save request 
npm i --save request-promise

OGP 취득을 시도하는 코드

import * as rp from 'request-promise';
class Api {
    private constructor() {
    }

    public static async getSiteMeta(u: string) {
        const now = (new Date()).getTime();
        const result = {title: 'リンク', url: u, ogp: '', err: null, createDate: now};
        return rp(u)
        .then( (body: string) => {
            const t = body.match(/<title.*?>(.*?)<\/title>/);
            if (t !== null) {
            // console.log('t', t[1]);
            result.title = t[1];
            }
            const o = body.match(/<meta property="og:image" content="(.*?)"/);
            if (o !== null) {            
                result.ogp = o[1];
            }
            return Promise.resolve(result);
        })
        .catch((err: any) => {
            // console.log( 'err', err );
            result.err = err.message;
            return Promise.resolve(result);
        });
    }
};
exports.getSiteMeta = functions.https.onCall( async (data, context) => {
    return await Api.getSiteMeta(data.url);
});

OGP 내용을 쉘에서 시도

firebase functions:shell 에서 로컬로 실행할 수 있으므로 시도하십시오.
functions init시에 TypeScript를 선택한 경우는 npm run shell로 실행할 수 있다.

cd functions
npm run shell
> getSiteMeta({url: 'http://dev.ooen.me/r/WbOHbEeX'})
〜
RESPONSE RECEIVED FROM FUNCTION: 200, {
  "result": {
    "title": "コンビニプリンおすすめ4種",
    "url": "http://dev.ooen.me/r/WbOHbEeX",
    "ogp": "https://firebasestorage.googleapis.com/v0/b/ooen-dev.appspot.com/o/OfRBD4q3KpMxcBiLLAwN8a7bEav1%2Ft_furu-1585796845061.jpg?alt=media&token=e63dde4d-1530-4d64-a0d8-0ce7c8d15e76",
    "err": null,
    "createDate": 1585803379441
  }
}

호스팅에서 실행되는 코드 샘플

    public static getSiteMeta(u: string, callback: (data: any) => void) {
        const siteMeta = firebase.functions().httpsCallable('getSiteMeta');
        siteMeta({url: u}).then((result: any) => {
            // console.log('result', result);
            callback(result.data);
        });
    }

작성 중 서비스 오오엔

경험이나 행동한 일을 리스트로 해 공개하면(자), 누군가가 시도했다든가 행동했어! 가 도착하기 때문에 조금 기뻐하는 서비스. 시도하거나 행동 한 사람을 부담없이 즐겁게 응원할 수 있습니다. 흥미있는 분, 어떤 리스트 만들고 싶은지 등 사전 등록으로 가르쳐 받을 수 있으면 기쁩니다!

이런 느낌의 이미지를 Twitter에 공유하는 것으로 응답이 도착하기도합니다.
#재택근무 의 동행에 편의점 #푸딩을 먹어 비교. #미치푸 #이탈리안푸딩 #편의점푸딩추천4종 #오오엔 by @t_furu http://dev.ooen.me/r/WbOHbEeX