Azure Static Web AppsでGoogle Spread Sheetのデータを取得して表示したメモ

7697 ワード
AzureFunctions cloudfunctions AzureStaticWebApps Node.js GoogleSpreadSheet Node.js テキストリンク

概要

スプレッドシートをWebAPI化するサービスの作り方をみて、簡単に取得できるかもと試してみた。
デプロイ先には簡単に関数をおけそうなAzureStaticWebAppsを選んだ。ベータ版だけど、無料で使えるので。

結果、そう簡単にはいかなかった。ハマリポイントは以下。

Googleのサービスアカウントの認証情報をどう渡すか

  • サンプルの通り、Credentials のJSONファイルを読み込ませようとしたが失敗。
    • → Azure FunctionsにGitHub Actionsからどうデプロイしてどう読み込ませるか分からない。gitに含めるわけにもいかんし。
  • 環境変数で読み込ませることで一応対応できた。
    • → \が\\になる仕様であった。プログラム側で置換して対応。。。

ソース

作業メモ

サービスアカウントの作成とスプレッドシートの許可

サービスアカウントを作る手順はリンク先を参照。

サービスアカウントの Credentials は以下のようなものが取得できる。

keyFile.json
{
  "type": "service_account",
  "project_id": "プロジェクトID",
  "private_key_id": "省略",
  "private_key": "-----BEGIN PRIVATE KEY-----\n省略\n-----END PRIVATE KEY-----\n",
  "client_email": "[email protected]",
  "client_id": "00000000000",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/fuga.iam.gserviceaccount.com"
}

Spread Sheetの共有許可

  • Credentialsのclient_emailに書かれているメールアドレスを入力すると、サービスアカウントが出てくるはず。共有設定をしてやる

環境変数の設定

構成から設定できる。が、そのままやると、はまる。はまった。

この画面で設定すると、以下のようなエラーが発生。
秘密鍵がちゃんとしてないぽい。
ローカルではちゃんと動いたのに。

{
    "library": "PEM routines",
    "function": "get_name",
    "reason": "no start line",
    "code": "ERR_OSSL_PEM_NO_START_LINE"
}

process.envを出力してみた。
環境変数は、以下のようになっている。\\\\ってめっちゃ多いな。

{
  "env": {
    "SERVICE_ACCOUNT_PRIVATE_KEY": "-----BEGIN PRIVATE KEY-----\\\\n省略\\\\n-----END PRIVATE KEY-----\\\\n"

高度な編集で、JSONを見られるので見てみる。

この段階で、以下のようになっていた。

{
  "SERVICE_ACCOUNT_PRIVATE_KEY": "-----BEGIN PRIVATE KEY-----\\n省略\\n-----END PRIVATE KEY-----\\n"
}

直接編集して、一つは減らすことができたが、それ以上の対応は思いつかず。
ソースコードを以下のように修正して対応した。

+ const private_key = process.env.SERVICE_ACCOUNT_PRIVATE_KEY.replace('\\\\','\\')

  const auth = await google.auth.getClient({
    credentials: {
      client_email: process.env.SERVICE_ACCOUNT_CLIENT_EMAIL,
      private_key,
    },
    scopes: SCOPES
  })

参考

Azure Static Web Apps
スプレッドシートをWebAPI化するサービスの作り方
Googleスプレッドシートをプログラムから操作