[clasp] アカウントを切り替えてGoogle Apps Scriptをデプロイする[GAS]

Introduction

Google Apps Script（以下GAS）は、
Googleが提供するランタイム環境（スクリプトを記述する環境も含む）です。
他にGoogleが提供するGmailやスプレッドシートなどの
サービスと組み合わせて使うこともできます。
GASはJgvaScriptをベースに作られているので、おぼえるのは比較的容易です。　　

簡単に使いはじめることができ、コードを修正すればそのまま反映されて便利ですが、
ある程度の規模になるとコードの管理やデプロイが面倒になります。
GAS自体はコード管理機能を持っていないので
自分でなんとかするしかありません。

先日GASをつかったツールを作る機会があり、
その際にソース管理やデプロイが面倒だったので試してみました。

今回のケース

今回は複数のファイルからなるGASが対象です。
本番用・開発用でそれぞれアカウントが別になっています。

GASはclaspを使ってローカル（vscode)で記述、
デプロイも行います。

Clasp?

claspはGAS用のCLIです。
これを使うと、ローカルでの開発やデプロイが可能になります。
※コード管理は別途githubなどで行う

claspはnode上で動くので、インストールしておきましょう。
使い方についてはここにありますので参照してください。

Environment

• MacBook Pro (13-inch, M1, 2020)
• OS : MacOS 12.4
• Node : v18.15.0

GAS用のGoogleアカウントおよび関連するサービスは有効化されていると仮定。

Try

claspのインストールなど

まずはnpmでclaspのインストールをしておきます。

% npm install -g @google/clasp

そしてここでGASを有効化。

対象となるプロジェクトの作成

claspで操作するGASのサンプルをつくります。
それぞれのアカウントでログインし、Google Formsのスクリプトエディタを起動します。
「プロジェクトの設定」にあるスクリプトIDをおぼえておきましょう。

claspでclone

さきほどのGASをローカルへ持ってきます。
今回は本番用と開発用のアカウントをつかいわけるので、それぞれでログインしてcloneします。

まずは開発用のGASをｃloneでもってきます。

% mkdir test-gas && cd test-gas

% mkdir -p deploy/dev && cd deploy/dev
% clasp login #開発アカウントでログイン
% clasp clone <開発用GASのスクリプトID>

このままだとアカウント切り替え時にいちいちclasp　loginしなければいけないので、
アカウント切り替え方法はここを参考に設定します。

claspログインすると、ホームディレクトリの下に認証用のファイルが生成されるので、
このファイルをrenameしておきます。

#開発用認証ファイル
% mv ~/.clasprc.json ~/.clasprc-dev.json

なお、↑のようにrenameした場合claspでpushする場合はAオプションを使います。

% clasp push -A ~/.clasprc-dev.json

そして本場用のGASもｃlone。

% cd /path/your/test-gas
% mkdir -p  deploy/prd && cd deploy/prd
% clasp login #本場用アカウントでログイン
% clasp clone <本番用GASのスクリプトID>

再度.clasprc.json をrenameします。

#本番用認証ファイル
% mv ~/.clasprc.json ~/.clasprc-prd.json

ここでcloneしてきたディレクトリの中身をみてみます。
それぞれ.clasp.jsonというファイルがあり、
「scriptId」と「rootDir」が指定してあります。
このファイルがあれば、claspで対象のscriptIdに対して
コードをpushすることができます。

% ls -a /path/your/test-clasp/deploy/dev

.clasp.json  ・・・・・

そして、ソースコード用ディレクトリを作成。

% cd /path/your/test-clasp
% mkdir src
% touch stc/hoge.js

srcのファイルがそれぞれの環境にデプロイされるファイルとなるので、
devやprdにある.clasp.json以外のファイルはいったん削除します。

この時点でのディレクトリ構成は↓のようになっています。

.
├── deploy
│   ├── dev
│   │    └── .clasp.json
│   └── prd
│        └── .clasp.json
└── src
    └── hoge.js

デプロイする

あとは適当なタスクランナーでsrcの中身をコピーしてpushすればOK。
そういえば昔gulpとか使ってたわ、と思い出したので
ひさしぶりにつかってみます。
別にwebpackでもviteでもよし。

gulpをグローバルインストールします。

% cd /path/your/test-clasp
% npm install -g -D gulp

gulpfile.jsを記述。
開発用デプロイタスクと本番用デプロイタスクを定義します。

const gulp = require('gulp');
const run = require('gulp-run');

// deploy to dev 
gulp.task('dev-deploy', function () {
  return gulp.src('./src/**')
    .pipe(gulp.dest('./deploy/dev'))
    .on('end', function () {
      run('cd ./deploy/dev && clasp push -A ~/.clasprc-dev.json').exec();
    });
});

// deploy to production 
gulp.task('prd-deploy', function () {
    return gulp.src('./src/**')
      .pipe(gulp.dest('./deploy/prd'))
      .on('end', function () {
        run('cd ./deploy/prd && clasp push -A ~/.clasprc-prd.json').exec();
      });
  });

もっとスマートにかけるはずだけど気にしない。

デプロイ実行

gulpで開発環境へデプロイ。

# 開発環境にデプロイ
%gulp dev-deploy

[13:12:15] Using gulpfile ~/・・・/gulpfile.js
[13:12:15] Starting 'dev-deploy'...
[13:12:15] Finished 'dev-deploy' after 30 ms
$ cd ./deploy/dev && clasp push -A ~/.clasprc-dev.json
- Pushing files…
└─ ~/deploy/dev/appsscript.json
└─ ~/deploy/dev/hoge.js
Pushed 2 files.

本番環境へはprd-deployでデプロイ。

# 本番環境にデプロイ
$ gulp prd-deploy

・・・

srcの内容がそれぞれの環境に反映されていることがわかります。
コマンド１つでアカウントが違うGAS環境にデプロイできました。
あとはこのディレクトリをgitで管理すればコード管理＆デプロイ管理の準備は完了です。

Summary

今回はclasp&gulpでアカウント別GASのデプロイを試してみました。
ちなみに、GASで環境依存パラメータを使うには↓のように
PropertiesServiceをつかって スクリプトプロパティに設定した値を使います。

const envParam = PropertiesService.getScriptProperties().getProperty('ENV_PARAM');

これでGASのコード管理＆デプロイが少しでも楽になれば幸いです。

References

• 【Clasp】いちいちclasp loginせずに複数アカウントを切り替えたい（Google Apps Script）
• claspを使ってGoogle Apps Scriptの開発環境を構築してみた