Claspに代わってGoogle Asideで１分でWebアプリを作る

初めてAside使ってみて、WebアプリとしてURLを発行し、中身を更新できるまでの数ステップを紹介します

npxで初期セットアップ

npx @google/aside init

注意。この実行後に、スプシとGoogle App ScriptのURLが吐き出されます。

npx @google/aside init
✔ Project Title: … shibafu
✔ Generate package.json? … No / Yes
✔ Adding scripts...
✔ Saving package.json...
✔ Installing dependencies...
✔ Installing src template...
✔ Installing test template...
✔ Script ID (optional): …
✔ Script ID for production environment (optional): …
✔ Creating shibafu...

-> Google Sheets Link: https://drive.google.com/open?id=pheaquei0hoshohShie7taing7leeM2ahyahyeenaidohpau1o
-> Apps Script Link: https://script.google.com/d/Moke2ahx3xohbie6dus1uith7eu6ohFahceHeeMee6ohpiu9eP/edit

時差の修正

appsscript.jsonを修正します。

{
+   "timeZone": "Asia/Tokyo",
-   "timeZone": "America/New_York",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

プロジェクトのタイプとアクセス権限の設定

appsscript.jsonを修正します。

注意。これはセキュリティも絡むので自分の用途にあっているか、よくご確認ください。

{
  "timeZone": "America/New_York",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
+  "webapp": {
+    "executeAs": "USER_DEPLOYING",
+    "access": "ANYONE_ANONYMOUS"
+  }
}

テスト用のdoGet関数を追加

import { hello } from './example-module';

console.log(hello());

+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const doGet = (e: GoogleAppsScript.Events.DoGet) => {
+  console.log(e.parameter);
+  const response = JSON.stringify({ hello: 'world' });
+  return ContentService.createTextOutput(response).setMimeType(
+    ContentService.MimeType.JSON
+  );
+};

package.jsonをちょっと変えて初デプロイ

webアプリとしてはclasp pushだけしても、clasp deployが行われないと中身が変わらないので、package.jsonのコマンドに追記します。

  "scripts": {
    "clean": "rimraf build dist",
    "lint": "npm run license && eslint --fix --no-error-on-unmatched-pattern src/ test/",
    "bundle": "rollup --no-treeshake -c rollup.config.mjs",
    "build": "npm run clean && npm run bundle && ncp appsscript.json dist/appsscript.json",
    "license": "license-check-and-add add -f license-config.json",
    "test": "jest test/ --passWithNoTests --detectOpenHandles",
+    "deploy": "npm run lint && npm run test && npm run build && ncp .clasp-dev.json .clasp.json && clasp push -f && source .env && clasp deploy $DEV_DEPLOYMENT_ID",
+    "deploy:prod": "npm run lint && npm run test && npm run build && ncp .clasp-prod.json .clasp.json && clasp push && source .env && clasp deploy $PROD_DEPLOYMENT_ID"
-    "deploy": "npm run lint && npm run test && npm run build && ncp .clasp-dev.json .clasp.json && clasp push -f",
-    "deploy:prod": "npm run lint && npm run test && npm run build && ncp .clasp-prod.json .clasp.json && clasp push"
  },

clasp deployは-iでデプロイIDを指定しない限り、常に新しいバージョン（＝新しいURL）を発行してしまうので、初回だけ-i抜き、次回以降は-i有りでコマンドを実行する必要があります。よって、初回の.envファイルは以下の通り空欄です。

PROD_DEPLOYMENT_ID=""
DEV_DEPLOYMENT_ID=""

また、コマンド実行時に.envファイルにライセンス文言が追加されないように、license-config.jsonを編集しておきます。.envの.gitignoreへの追加も検討しましょう。

{
  "ignore": [
    ".claspignore",
    ".editorconfig",
    ".eslintignore",
    ".gitignore",
    ".prettierignore",
    "*.txt",
    ".github",
    "CONTRIBUTING",
    "build",
+    ".env",
    "dist"
  ],

npm run deployでデプロイを行います。

npm run deploy

> shibafu@0.0.0 clasp:deploy
> npm run lint && npm run test && npm run build && ncp .clasp-dev.json .clasp.json && clasp push -f && clasp deploy


> shibafu@0.0.0 lint
> npm run license && eslint --fix --no-error-on-unmatched-pattern src/ test/


> shibafu@0.0.0 license
> license-check-and-add add -f license-config.json

No default format specified. Using {"prepend":"/*","append":"*/"} as backup
! Inserted license into 0 file(s)
Command succeeded

> shibafu@0.0.0 test
> jest test/ --passWithNoTests --detectOpenHandles

 PASS  test/example-module.test.ts
  example-module
    hello
      ✓ Returns a hello message (3 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.792 s, estimated 2 s
Ran all test suites matching /test\//i.

> shibafu@0.0.0 build
> npm run clean && npm run bundle && ncp appsscript.json dist/appsscript.json


> shibafu@0.0.0 clean
> rimraf build dist


> shibafu@0.0.0 bundle
> rollup --no-treeshake -c rollup.config.mjs


src/index.ts → dist...
created dist in 551ms
└─ dist/appsscript.json
└─ dist/index.js
Pushed 2 files.
Created version 1.
- AKfycbxsIaEhIuMYnrirCt6KxtyoN0CMn0Xpk6kKPqNkWzZBh3r9FU6KPBaBHuaz86UP-6mwpA @1.

無事にversion 1が発行されたらIDからURLを作って叩いてみます

curl -L "https://script.google.com/macros/s/AKfycbxsIaEhIuMYnrirCt6KxtyoN0CMn0Xpk6kKPqNkWzZBh3r9FU6KPBaBHuaz86UP-6mwpA/exec"
{"hello":"world"}

無事にJSONが出力されたら完成です。

2回目のデプロイ前に.envを編集する

このままではnpm run deployをするたびに新しいURLとして新しいデプロイメントが増えていくので、.envファイルを以下の通りいじります。

PROD_DEPLOYMENT_ID=""
+ DEV_DEPLOYMENT_ID="-i AKfycbxsIaEhIuMYnrirCt6KxtyoN0CMn0Xpk6kKPqNkWzZBh3r9FU6KPBaBHuaz86UP-6mwpA"
- DEV_DEPLOYMENT_ID=""

もう一度npm run deployしても発行されるIDが変わらず、関数の挙動が代わってることを（{hello: 'fuga'}とかに改変等で）確認できたら更新作業も完成です。

本番も同じ手順でPROD_DEPLOYMENT_IDをいじります。本番のコマンドはnpm run deploy:prodです。