トップ > Viteで作ったWebアプリをClaspでGASにデプロイするまで

Viteで作ったWebアプリをClaspでGASにデプロイするまで

Web アプリケーションを無料でホストする必要が生まれた。非プログラマが運用できる且つ Google Drive に保存された画像を参照することが要件であるためGASを使うことにした。ここにはメモも兼ねてその手順を残しておく。

Setup

volta install node
volta install yarn@3.5.0
volta install vite
yarn create vite
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: Done with warnings in 0s 113ms

✔ Project name: … gas
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Scaffolding project in /Users/***/work/tmp/gas...

Done. Now run:

  cd gas
  yarn
  yarn dev

vite を使ってプロジェクトを作成する。VSCode で開いてみると下記のようにエラーが多く表示される。

PnP

これは yarn PnP という機能によるものである。node_modules 配下にライブラリを展開せず仮想的にロードするというものらしい。

yarnpkg.com

www.wantedly.com

qiita.com

VSCode はデフォルトで node_modules を参照してしまうのでこのようなエラーが発生する。公式ドキュメントを読むと sdk を入れる方法が記載されていた。

yarnpkg.com

yarn add -D @yarnpkg/sdks
yarn sdks vscode

実際にsdk入れてみるとエラーは解消された。

Clasp

GAS にデプロイする上では下記の記事が非常に参考になった。現在でも記載されたとおりに進めれば何も問題なくデプロイすることができた。

engineer.retty.me

記事中に記載のコマンドを自分の環境では一部変更した。

  • npm i vite-plugin-singlefile -> yarn add -D vite-plugin-singlefile
  • npm i -g @google/clasp -> yarn add -D @google/clasp
    • これにより以降 clasp は yarn clasp と読み換えて実行する

Google Drive の画像を参照する

Google Drive に保存されている画像を開き、「新しいウィンドウで開く」とすると https://drive.google.com/file/d/${id}/view というURLで画像が開かれる。このURLを https://drive.google.com/uc?export=view&id=${id} と変更して画像を読み込むように実装を変更する。

簡単な社内ツールならこれですぐ作れちゃいそう。