Zenn
🥰

Cloud Function×TypeScriptをCloud Buildでデプロイする

2022/05/27に公開
TypeScript
Cloud Functions
Cloud Build
tech

きっかけ

Cloud FunctionとTypeScriptをCloud Buildでデプロイするシステムを作っていたのですが、意外と参考にできるサイトがなかったり、途中で引っかかったりするところがあったので記事書くことにしました。

githubはこちら！
記事では説明してませんが、基本的なESLintやNodeのバージョン指定などの初期設定はしてあるのでよかったら使ってみてください!!
https://github.com/yugomarui/cloud-function-cloud-build-typescript-example-app

Cloud Functionの開発

npm i

まずGoogleお手製のfunctionフレームワーク、環境変数を読み込んでくれるやつなどなどをインストールします。

npm install --save-dev @google-cloud/functions-framework env-cmd tsc-watch typescript

package.json

main

ローカルで開発する際に、@google-cloud/functions-frameworkを使うのですがビルドされているものを読み込む必要があるので、package.jsonにmainの設定をします。
scriptと同じ第一階層に設定します。

package.json
"main": "dist/index.js",

script

ビルドコマンドとローカル開発用のstartコマンド、デプロイコマンドを定義します。

package.json
"scripts": {
    "build": "tsc",
    "start": "npx tsc-watch --onSuccess 'env-cmd -r ./.env.json npx @google-cloud/functions-framework --target=helloWorld'",
    "deploy": "npx tsc && gcloud functions deploy helloWorld --runtime nodejs16 --trigger-http --region asia-northeast1 --project [your_project_id]"
  },

src/index.ts

helloWorldメソッドを定義します。

export const helloWorld = async (req: any, res: any) => {
  res.send('Hello World');
};

開発環境起動!!

npm run startを叩いて、http://localhost:8080/にアクセスして、HelloWorldが出てくれば完了です！
tsc-watchしているので、コードを変更すれば自動で更新してくれます！

Cloud Buildの開発

cloudbuild.yaml

cloudbuild.yamlを作成します。
内容は、npmインストールを行い、ビルドして、デプロイしてるだけです。

cloudbuild.yaml
steps:
  - name: node:$_NODE_VERSION
    entrypoint: npm
    args: ['install']
  - name: node:$_NODE_VERSION
    entrypoint: npm
    args: ['run', 'build']
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
    args:
      - gcloud
      - functions
      - deploy
      - helloWorld
      - --region=asia-northeast1
      - --source=.
      - --trigger-topic=signed_contract
      - --runtime=nodejs16
substitutions:
  _NODE_VERSION: 16.14.2

Cloud Buildに権限付与

Cloud BuildにCloud Functionの権限を付与しましょう。

トリガーの作成

リージョンはグローバル[1]を設定しましょう。

そして、デプロイしたいリポジトリとブランチを設定すれば完了です！

最後に

デプロイされたfunctionは、呼び出し元が未承認だとデフォルトで403エラーを返すようになっているので、適切に権限を割り振ってあげてください。

参考サイト
https://qiita.com/toshiaki_takase/items/ce65cd5582a80917b52f

脚注

  1. 請求まわりでグローバルに設定しないといけない?っぽいのですが、正確な理由はわかりませんでした。どなたかわかる方いたらコメントしてもらえるとありがたいですorz
    https://superuser.com/questions/1716674/error-by-trying-to-build-instance-via-ova-gc-sdk-genericfailed-precondition ↩︎

Discussion