【GCP/CloudFunctions】OGP生成は学べることがいーーーっぱい

12289 ワード
cloudfunctions gcp gcp テキストリンク

内容

  • Cloud Functions
  • 画像と文字の結合
  • 暗号化したい値を取り扱う
  • ローカル環境でのOGPテスト

Cloud Functions

ローカル環境での動作確認

サーバーレスをどうやってローカルでテストするねんという話です。
下記のように実施していけばローカル環境で動作確認することができます。
【Cloud Functions】ローカルで動作確認しましょ。 - Qiita

また、フロントエンドとバックエンドでサーバーを立ち上げている場合、PORTを変えなければいけないので、その場合は下記を参考に node を実行しましょう。
create-react-app の npm start のポート番号を変える - Qiita

これでもデバッグできそうですが、試していません。
HTTP トリガー  |  Google Cloud Functions に関するドキュメント

デプロイ

実行コマンドのサンプル

gcloud functions deploy generateOgp --runtime nodejs10 --trigger-http --allow-unauthenticated --service-account=cloud-functions@production.iam.gserviceaccount.com --source .

ローカルマシンからのデプロイ  |  Google Cloud Functions に関するドキュメント

サービスアカウントの指定

ここで重要なのが、--service-account=[email protected] の箇所です。
シークレットマネージャーの値を取り出す場合に使用します。

バージョンの切り替え

Cloud Functionsが推奨している Node のバージョンが 8 なので、自分の環境のバージョンと合わない場合があるので、切り替えように使用します。
【Node】nodebrewでnodeのバージョンを瞬時に切り替え！ - Qiita

画像と文字の結合

単に画像と文字を結合する場合を考えます。
下記のような実装で、文字と画像を結合しました。

const { spawn } = require('child_process');

convert = spawn('convert',[
  "-size", "320x320",
  "-font", "font/NotoSansCJKjp-Medium.otf",       // フォント
  "-pointsize", "50",                             // フォントサイズ
  "-fill", "black",                               // 文字色
  "-gravity", "Center",                           // 位置の基準
  "-annotate", "+0+0",                            // +0+0は位置の基準からの相対位置
  "question",                                     // 合成に使用する文字
  "image.png",                                    // 入力画像
  "output.png"                                    // 出力画像
]);

Cloud Functions + ImageMagickでOPG画像の動的生成してCloud Storageにアップロードする - くらげになりたい。
ImageMagick のチュートリアル  |  Google Cloud Functions に関するドキュメント

convertコマンド

convert以降が ImageMagick のコマンドになっています。
どんなコマンドが使用できるかは下記が参考になります。
画像の合成は convertコマンドを実際に使用してアウトプットを確認してから実装に落とす方が早かったです。

ImageMagick 画像中に文字を入れる - Qiita
Text Handling -- IM v6 ExamplesZ

spawn

spawn を定義することで、ImageMagick のコマンドが使えるようになります。

spawn は node で、OS のコマンドを node から実行したい場合に使われるもので、新しい子プロセスを生成してコマンドを実行するメソッドの一部だ。
node の spawn に関して調べてみた - Qiita より引用

Cloud Functions では特に何もインストール必要がなく使用できるの非常に便利です。
Node.js｜シェルコマンドを実行する方法(child_process) - わくわくBank

暗号化したい値を取り扱う

Cloud Functions では環境変数は設定できるのですが、暗号化したいものが取り扱えません。
その場合にシークレットマネージャーが非常に有効です。

シークレットマネージャー

使い方は記載しませんが、下記記事見ればわかります。
シークレット管理  |  Google Cloud
GCPのSecret Managerを試した - Qiita
Secret Managerを使ってみる＠Cloud Functions編 | apps-gcp.com

作成したら下記のように表示されます。

シークレットマネージャーの値を取り出す

実装は下記のようになります。

async function accessSecretVersion() {
  const [version] = await client.accessSecretVersion({
    name: 'projects/926234705398/secrets/aws-s3-key/versions/1',
  });

  let payload = version.payload.data.toString('utf-8');
}

payload にシークレットマネージャーで定義した値が入ってきます。

AWSの認証

仮にS3に保存したい場合とかは、aws-configが便利です。

const awsConfig = require('aws-config');

const s3 = new AWS.S3(awsConfig({accessKeyId: AWS_ACCESS_KEY_ID, secretAccessKey: AWS_SECRET_ACCESS_KEY}));

AWS_ACCESS_KEY_IDと AWS_SECRET_ACCESS_KEYを定義することで認証を通すことができます。
aws-config - npm

OGPのテスト

ローカル環境でのテスト

localhostでOGPをテストする方法です。

これらのバリデーターは、提供各社のサーバーがURLにアクセスしスクレイピングを行ってテストするため、当然ローカル環境（localhost）でのOGPの実装をテストすることはできません。
localhostの状態でOGPのテストを開発環境で行う - Qiita より引用

なので、下記の拡張機能を追加してテストしていくことになります。
Localhost OGP チェッカー - Chrome ウェブストア

Twitter

【2020年版】Twitterカードとは？使い方と設定方法まとめ
card-validator

Facebook

シェアデバッガー - Facebook for Developers
ウェブ管理者 - シェア機能 - ドキュメンテーション - Facebook for Developers

nuxtでのmeta値設定

nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい - Qiita

終わりに

次回は、Cloudinary もしくは html2canvasでOGP生成してみようと思います。

Cloudinaryで動的にOGP画像を生成する方法 | Cat Knows
【Rails】動的にOGP画像が生成されるようにする実装【Cloudinaryを使用】 - Qiita
画像生成してOGPに設定する - Qiita