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

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

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

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

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

[ソース](https://github.com/hibohiboo/todo-app-with-spreadsheet/tree/b42dafdf9f62a430f15aa1a47a67d2640b921b43/api)

## 作業メモ

### サービスアカウントの作成とスプレッドシートの許可
[サービスアカウントを作る手順はリンク先を参照。](https://qiita.com/howdy39/items/22068b3f768f0f9a757d#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%8B%E3%82%89sheets%E3%81%AE%E4%B8%AD%E3%82%92%E8%A6%8B%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%89%8B%E9%A0%86)

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

```json:keyFile.json
{
  "type": "service_account",
  "project_id": "プロジェクトID",
  "private_key_id": "省略",
  "private_key": "-----BEGIN PRIVATE KEY-----\n省略\n-----END PRIVATE KEY-----\n",
  "client_email": "hoge@fuga.iam.gserviceaccount.com",
  "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の共有許可
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/aa32f6f6-20fa-4443-e101-27f844cf9e9b.png)

* Credentialsの`client_email`に書かれているメールアドレスを入力すると、サービスアカウントが出てくるはず。共有設定をしてやる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/5cdbb201-61b7-eaf6-4e96-25bcfaffa880.png)


### 環境変数の設定
構成から設定できる。が、そのままやると、はまる。はまった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/840ce45a-32d9-e480-3f17-7064dbf45a82.png)

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

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

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

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

高度な編集で、JSONを見られるので見てみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/366152bf-d47a-2a26-5dc9-65220fc23000.png)

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

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

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

```diff
+ 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][*1]
[スプレッドシートをWebAPI化するサービスの作り方][*2]
[Googleスプレッドシートをプログラムから操作][*3]

[*1]:https://docs.microsoft.com/ja-jp/azure/static-web-apps/overview
[*2]:https://qiita.com/howdy39/items/22068b3f768f0f9a757d
[*3]:https://qiita.com/howdy39/items/ca719537bba676dce1c