Docker で clasp 環境を構築する

✏️ 編集

clasp 環境を Docker で作ってみたので、そのときの作業ログを以下に示す。

Clasp とは

GAS をローカルで開発するためのツール。

公式リポジトリ: google/clasp: 🔗 Command Line Apps Script Projects

前準備: GAS API を有効化する

ここから有効化できる: https://script.google.com/home/usersettings

用意するファイルとディレクトリ構造

ディレクトリ構造:

1
2
3
4
.
|-- .gitignore
|-- .env
|-- docker-compose.yml

用意するファイル:

.gitignore

1
2
3
4
5
6
7
.*
.*/
node_modules/
dist/Code.gs

!.gitignore
!.*.sample

補足:

Code.gs はビルド結果なので gitignore しておく

.env

1
2
WORKING_DIR=/usr/src/app
HOME=$WORKING_DIR

補足:

clasp はログインの credential 情報をコンテナ内のユーザの $HOME 直下に作成する（ → 参考）ので、 $HOME を $WORKING_DIR にするよう設定している
- docker-compose.yml によってカレントディレクトリが $WORKING_DIR にマウントされる＝カレントディレクトリに credential 情報が書かれたドットファイルが置かれるが、 .gitignore で指定したドットファイル以外は gitignore するようにすることで誤 push を防いでいる

docker-compose.yml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
version: "3"

services:
  app:
    image: node:20
    container_name: docker_clasp_container
    env_file:
      - .env
    volumes:
      - ./:$WORKING_DIR
    working_dir: $WORKING_DIR
    tty: true

環境構築手順

コンテナを起動して中に入る・

1
2
$ docker compose up -d
$ docker exec -it <CONTAINER_ID> bash

yarn init し、Clasp と TypeScript をインストールする。

1
2
[In the container]# yarn init -y
[In the container]# yarn add -D @google/clasp @types/google-apps-script typescript ts-loader

clasp にログインする。

1
2
3
4
5
6
[In the container]# yarn clasp login
① 出てきた URL にアクセス
② Google アカウントでログイン
③ localhost:*** という無効な URL に遷移すれば OK
④ 別ターミナルでコンテナ内に入り、 curl 'さっきの無効な URL'
⑤ ターミナルにログイン成功の旨が出ていればOK

補足: なぜ別ターミナルで curl する必要があるのか？

どうやら clasp login の --no-localhost オプションがうまく機能しないらしいため。

その回避策として別ターミナルで curl を叩く方法が紹介されていた（ → 参考）。

今回、 --no-localhost オプションは使用していないが、同じ方法でログインできた。

今回はスクリプト ID が <GAS_SCRIPT_ID> の GAS プロジェクトのソースコードを src/ ディレクトリに配置することにする。

そのため、まず src/ ディレクトリを作成する。

1
[In the container]# mkdir src

指定したスクリプト ID の GAS プロジェクトのコードをローカルへ clone する。

1
[In the container]# yarn clasp clone <GAS_SCRIPT_ID>

clone 後、次の 3 ファイルが生成される。

1
2
3
4
5
.
|-- src/
|-- .clasp.json
|-- appsscript.json
|-- <YOUR_GAS_SCRIPT>.js

このうち、次の 2 ファイルを src/ へ移動させる。

1
[In the container]# mv appsscript.json <YOUR_GAS_SCRIPT>.js src/

.clasp.json の rootDir を次のように変更する。

1
2
-     "rootDir": "/usr/src/app"
+     "rootDir": "/usr/src/app/src"

clasp push で、ローカルのコードを GAS 上へ反映させる。

1
[In the container]# yarn clasp push

Web 上の GAS エディタのページをリロードすると、ローカルのコードが反映されているはず。

ES modules の利用

2024/03/18 現在、 GAS は ES modules に対応しておらず、 import などが使えない。

使えるようにする方法はいくつかあるようだが、今回は gas-webpack-plugin を使ってみる。

Webpack と gas-webpack-plugin をインストール。

1
[In the container]# yarn add -D gas-webpack-plugin webpack webpack-cli

今回は src/ のソースコードをビルドして dist/ に置くことにする。

そのため、まず dist/ を作成する。

1
[In the container]# mkdir dist/

続いて、 appsscript.json を dist/ へ移動させる。

1
[In the container]# mv src/appsscript.json dist/

併せて、 .clasp.json の rootDir を次のように変更する。

1
2
-     "rootDir": "/usr/src/app/src"
+     "rootDir": "/usr/src/app/dist"

webpack.config.json を作成し、次の内容を設定する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const path = require("path");
const GasPlugin = require("gas-webpack-plugin");

module.exports = {
  context: __dirname,
  entry: "./src/index.ts",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "Code.gs",
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.[tj]s$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [new GasPlugin()],
};

この時点で、次のようなディレクトリ構造になっているはず。

1
2
3
4
5
6
7
.
|-- /dist
|   |-- appsscript.json
|-- src/
|   |-- <YOUR_GAS_SCRIPT>.js
|-- .clasp.json
|-- webpack.config.js

yarn webpack でコードをビルドした後、 clasp push で、ローカルのコードを GAS 上へ反映させる。

1
2
[In the container]# yarn webpack --mode production
[In the container]# yarn clasp push

Web 上でローカルのコードが確認できたら OK 。

サンプルコード

clasp create 等の際の動作確認用サンプルコードを以下に示す。

ディレクトリ構造:

1
2
3
4
.
|-- src/
|-- index.ts
|   |-- main.ts

index.ts

1
2
3
4
5
import { mainFunc } from "./main";

declare const global: any;

global.mainFunc = mainFunc;

main.ts

1
export const mainFunc = () => console.log("Hello World");

TIPS

こんな感じで Makefile に clasp push 用コマンドを登録しておくと、 make push で GAS へ push できて楽。

Makefile

1
2
3
.PHONY: push
push:
	docker compose run --rm app bash -c "yarn webpack --mode production && yarn clasp push"