VS Code(Cloud Code)を利用したGC環境へのCloud Functions のデプロイ

# はじめに
Cloud Functionsを使いたいことがたまにあり、デプロイの待機時間がきになっていました。
頻度は少ないので、いいかと思ってたのですが、だんだん待機時間を少なくしたいと思い、VS Codeからのデプロイを試してみました

# 概要
以下にあるCloud Code を使ってDeployする内容となります。

https://cloud.google.com/code?hl=ja

## 手順
### Cloud Code インストールまで
gcloud CLIとVS Code及び事前に必要なツールをインストールします
1. gcloud CLI をインストールする 
https://cloud.google.com/sdk/docs/install?hl=ja

2. 以下を参考にVS Code 、Docker Client、Gitをインストールする
https://cloud.google.com/code/docs/vscode/install?hl=ja

3. VS Code の拡張機能からCloud Codeをインストールします、成功すると以下のように左ペインにCloud Codeのメニュが表示されます
![スクリーンショット 2023-01-31 20.17.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1720034/a9059add-7a61-d55d-8b47-a9d5d0933897.png)

### 対象プロジェクトを閲覧する
Google Cloudにログインしプロジェクトをスイッチできる状態か確認し、リソース情報が表示されることを確認します。

1. 最下部の青い枠内(ステータスバー)の[Cloud Code]の横の [Connect to Google Cloud]を選択します
![スクリーンショット 2023-01-31 18.05.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1720034/901552c0-9468-487b-c9ce-b3a1de3b137e.png)
2. ログインが求められ、その後承認画面になりますので、承認します
![スクリーンショット 2023-01-31 18.06.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1720034/d7ca3e35-231f-d6c0-625f-be54dbeff87b.png)
3. 承認すると先程[Connect to Google Cloud]だった場所からプロジェクトをスイッチすることができますので、試しにプロジェクトを選択してみてください。
4. プロジェクト選択後、Cloud Functionsなどを開くと(権限がある場合は)当該プロジェクトのFunctionsが一覧で確認できます
![スクリーンショット 2023-01-31 19.40.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1720034/297ed6a9-8eae-4876-f34f-f2c688141386.png)

### Cloud Functions を編集する
Cloud Functionsの作成ではなく編集となります。
作成自体は以下のリンクに手順があるのですが、
https://cloud.google.com/code/docs/vscode/create-deploy-function?hl=ja
イベントドリブンで行いたい場合などは、新規作成時に指定することができないようにみえます。
また後からメタデータ編集だと当該箇所は設定変更できないので、作成する内容い応じて新規作成時は注意が必要です。
※もし認識誤っていればご指摘ください

1. すでにCloud Functionsがある場合、以下のように対象プロジェクトを選択し、Cloud Functionsをリストすると、以下のように左ペインに各Functionsが並びます
![スクリーンショット 2023-01-31 19.40.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1720034/a9b02efc-fb53-b463-6acf-5011507c087a.png)
2. 編集対象のCloud Functionsを選ぶと以下のようにsource情報の閲覧が可能ですが、記載の通りRadOnlyとなりますので、こちらでは編集することができません
![スクリーンショット 2023-01-31 19.16.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1720034/645eb68d-e3d9-d6c3-b51e-8e9cd12239ba.png)
3. 編集する際には対象のFunctions上で雲マークをクリックしVS Code上にworkspaceを追加します
![スクリーンショット 2023-01-31 19.18.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1720034/aebc112c-737b-3b6c-b3af-3c94ad87a5c1.png)
4. 上記を行うと[WORKSPACE Local] の箇所に追加したworkspaceが表示され、source情報を確認や、編集することが可能です
5. 編集したものをデプロイしたい場合、追加したworkspaces上の対象Functionで右クリックすると[Deploy function]を選択することが可能で、そこからGC環境へデプロイできます。
![スクリーンショット 2023-01-31 19.42.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1720034/3b4f076c-2e84-b97d-d547-77c2f2f71083.png)
6. デプロイに成功すると、出力のウインドウにて結果が表示されます

### ついでの内容

上記だけではなく、Cloud Functionsの実行も可能であり、logも確認可能です。
メニュは以下のような表示です。
![スクリーンショット 2023-01-31 19.55.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1720034/d3b2c82c-fcac-9de4-5109-37ec2a5dcbce.png)

Logはこんな感じで閲覧可能ですので、確認するウインドウを切り替えずに確認できるので便利です。
![スクリーンショット 2023-01-31 20.11.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1720034/5343cfa2-0941-d398-a232-fa5f54dfb5a3.png)


# 所感
今までブラウザ上で操作しており、それから比べると効率化できた気がします。できることはまだまだいっぱいありそうなので、どんどん活用していきたいと思います。