GW：Last Day - サーバーレス関数に向き合ってみた

どうしても複雑な動きをするカスタムフォームを作りたくて、今日はサーバーレス関数に挑戦してみました。

フォーム自体は順調で、HTMLとJavaScriptの部分は問題なく進んで、午前中にはフォームが完成✨いい感じ！

と思いきや…サーバーレス関数が立ちはだかりました。
実は、以前一度だけ触れたことがあったのですが、説明を受けて「分かった！」と思ったものの
結局知識は 頭に残っていませんでした。そんなダメな自分を脱却すべく、今回は理解することを目的にゆっくり進めてみました。

今回の目標は、フォームからの情報をパスすることで CMS関連のため、こちらのドキュメントを参考にしながら進めました。

大体こんな流れで進めました。

▍1: CLIのインストール

今日はすでにインストール済みでした。

▍2: CLIにポータルの連携

これもすでに完了してます。

▍3: 開発者プロジェクトの作成

昨日のプロジェクトとは別件で試したかったので、新しくプロジェクトを作成しました。

▍4:APIのアクセストークンを発行するための非公開アプリの作成

APIのアクセストークンを発行するための非公開アプリの作成
アクセストークンは、APIでポータルを操作するための「パスワード」のようなものです。

非公開アプリの場合、後でapp.jsonにセンシティブなプロパティを記載すると、
プロジェクトをアップロードできないエラーが出るので注意が必要です。

CLIにシークレットとして登録

▍:Functionの作成

ドキュメントでは、appフォルダーにサンプルをコピーして修正する流れでしたが、私はCLIのドキュメントに従い、hs create functionを使って作成しました。

自動作成された際にパスがなくて少し迷ったので、Serverless.jsonの記入例を共有します：

json
Copy
{
  "appFunctions": {
    "quote-function": {
      "file": "upsert.js",
      "secrets": ["LifeTrackerForm"],
      "endpoint": {
        "path": "search",
        "method": ["POST", "PATCH", "GET"]
      }
    }
  }
}
app.jsonの記入
HubSpotのAPIを使用する場合、scopesを記載する必要があります。

構成を確認したくて、function.jsは開発者ドキュメントを丸パクリして進めました。

▍:プロジェクトをポータルにアップロード

問題がなければ、ブラウザからhttps://portalID.hs-sites.com/hs/serverless/fetch-quoteにアクセスします。

ちゃんとコンテンツが表示されたことを確認した後、
ファイル名やパス、メソッドを実際に使用するものに変えて再度アップロードしてアクセスしました。

実際のJSコードをfunction.jsに入れてテストする段階で、完全に沼にはまってしまいました。

エラーメッセージ：
{"status":"error","message":"Couldn't find the requested GET search. Make sure your path is correct and that the function for GET search is deployed, and then try again.","correlationId":"40478c04-dec9-0bf8-9f14-26750eca514b","context":{"PATH":["search"],"METHOD":["GET"]},"category":"OBJECT_NOT_FOUND","subCategory":"ServerlessGatewayErrorType.GATEWAY_NOT_FOUND"}

どうやら、GETメソッドのテストしかできないようです…。
POSTMANでPostしてみましたが、うまくいかず…。また今度試してみます！

<draft>
どうしても複雑な動きをするカスタムフォームを作成したくて
今日はサーバーレス関数に手を出してみました。

フォーム自体は結構順調で、HTMLとJavaScriptは結構順調に進んでいき
フォーム自体は午前中に出来上がりました✨いい感じ！

と思いきや、、、サーバーレス関数が立ちはだかります。
実は前に一度かすったことはあったのですが、説明を受けて わかった気持ちになって
知識は頭の中に定着しなかったのです。そんなダメな社会人を脱すべく進めました。

今回、フォームからの情報をパスするので CMS関連のため こちらのドキュメントを見て進めます。

大体こんな感じで進めました。

1. CLIのインストール
   1. 今日はすでに済んでいた
2. CLIにポータルの連携
   1. ここも既に済んでました
3. 開発者プロジェクトの作成
   1. 昨日のとは別件について試したかったため、新しくプロジェクトを作成しました
4. APIのアクセストークンを発行するための非公開アプリの作成
   1. アクセストークンとは、APIでポータルを操作する際に使用するパスワードみたいなものです。
   2. 非公開アプリの場合、後で記入するapp.jsonにセンシティブなプロパティーを使用すると
      プロジェクトがアップロードできないエラーが帰ってくるので おきをつけください
   3. CLIにシークレットとして登録
5. Functionの作成
   1. ドキュメントではappフォルダー配下にサンプルをコピーして修正するみたいな流れになっていましたが
      私は、cdコマンドでappフォルダーを開き、CLIの方のドキュメントに従ってhs create functionしました。
   2. 自動作成された際には Pathがなくてちょっと迷ったので、Serverless.jsonの記入例を共有します：
   1. 1. {

         "appFunctions": {

         "quote-function": {

         "file": "upsert.js",

         "secrets": ["LifeTrackerForm"],

         "endpoint": {

         "path": "search",

         "method": ["POST", "PATCH", "GET"]

         }

         }

         }

         }
   2. app.jsonでは、HubSpotのAPIを使用する場合、scopesを記入する必要があります。
      
      
   3. 一旦、構成などが間違えないかを確認したいので、function.jsは開発者ドキュメントを丸パクリしました。
6. プロジェクトをポータルにアップロード
7. 問題なければ、https://portalID.hs-sites.com/hs/serverless/fetch-quoteにブラウザーからします。
8. ファイルの名前やpathをメソッドを実際に使用するものに変えたら、もう一度アップロードして再度アクセスします。
9. ここまでは良かったのです。
10. が、実際のコードをテストする部分で、すっかり沼にハマってしまいました
    
11. さっきまでは、アクセスできていのに、エラーになってしまいます。。
    {"status":"error","message":"Couldn't find the requested GET search. Make sure your path is correct and that the function for GET search is deployed, and then try again.","correlationId":"40478c04-dec9-0bf8-9f14-26750eca514b","context":{"PATH":["search"],"METHOD":["GET"]},"category":"OBJECT_NOT_FOUND","subCategory":"ServerlessGatewayErrorType.GATEWAY_NOT_FOUND"}
    
    
12. どうやら、GETのテストしかできないようです。。。POSTMANで Postしてみましたがうまくいかない。。
13. また、今後試そうと思います！