GASのローカル環境開発 ~その1. コンテナでの環境開発編

 はじめまして、新入社員のせしょうです！


今回、研修中にGASを触る機会があり、せっかくなのでブログにまとめてみました！
よろしくお願いします。

本記事とこれ以降に投稿する2つの計3つの記事を通して、GASのコードをローカルで管理(実行、デプロイ)できるようにすることを目的とします。
3つの記事の構成は、以下のようにしていく予定です。

1. コンテナでの環境開発　←本記事

よろしくおねがいします！！

1. 概要

GASをローカルで管理するための前段階。
ローカルの環境を汚したくないので、VS Code + Dockerでコンテナを作成してみました。

2. 必要なツールと拡張機能

  • VS Code
    • Remote Container
  • Docker Desktop
動作確認済み環境
Mac
  • MacOS : Big Sur ver:11.6
  • vscode : 1.61.2
  • docker Engine : 20.10.8
Windows
  • Windows 10
  • vscode : 1.61.2
  • Docker Desktop: 4.0.1
  • docker Engine : 20.10.8
※ Windowsの場合はwsl2の環境を作成しておく
WSL2の環境構築については、以下を参照

3. 目標とするディレクトリ構成

4. 今回の記事で作られるディレクトリの構成出

5. devcontainer.jsonの作成

  1. vs codeでコンテナを作成するディレクトリを開く
  2. devcontainer.jsonを作成
    1. F1キー or Ctrl(⌘Cmd) + Shift + P
    2. Remote-Containers:Rebuild and Reopen in Container
    3. Select a container configuration definition
      • Node.js
    4. Node.js version
      • 16-bullseye
    5. Select additional features to install
      • 選択なし
上記のステップを終えると、Dockerfileが自動で作成され、buildが行われる。

build終了後、左下の >< Dev Container: Node.js を選択し,
Reopen Folder Locally(in WSL) を選択して、元のディレクトリに戻る


ディレクトリ構造を確認してみると、ディレクトリ配下に .devcontainer が作成される。

すると以下のような、ディレクトリ構成となる。

6. Dockerfileの編集

最終行に、 RUN npm install @google/clasp -g を追加
※やらなくても可
ファイル名を Dockerfile → node.dockerfile に変更

7. docker-compose.ymlの作成

docker-compose.ymlを作成する

※ Dockerfileの名前を変更していない場合は ./.devcontainer/node.dockerfile を ./.devcontainer/Dockerfile に変更

現在のディレクトリ構成
ここで、本記事の今回の記事で作られるディレクトリの構成が完成

8. devcontainer.jsonの編集

1. docker-compose.ymlのサービス名を元にコンテナを作成するように編集する。
5-12行目を以下のように編集
差分
  • dockerComposeFile
    • 参照するdocker-compose.ymlを指定
  • service
    • docker-compose.ymlに記載しているサービス名を指定
  • workspaceFolder
    • docker-compose.ymlのworking_dirの値を指定
2. コンテナ内で使用する、VS codeの拡張機能を指定する
下は、個人的にオススメの拡張機能
（オススメの理由）
  • "mhutchie.git-graph"
    • gitのネットワークが見れる
  • “yzhang.markdown-all-in-one”
    • markdownの保管機能が働く
    • 今後README.mdを書くときに便利
※拡張機能のセットアップ方法は以下の通り

方法1
拡張機能>(追加する拡張機能)>⚙マーク > 拡張機能のIDをコピー
を選択し、上記のように"extentions"に記述する。

方法2
(.devcontainerディレクトリを開いている状態という条件のもと)

拡張機能>(追加する拡張機能)>⚙マーク > Add to devcontainer.json
で自動的に指定した拡張機能が devcontainer.json に追加される。

9. コンテナのビルド

  1. VS Codeでコンテナを作成するディレクトリを開く
  2. コンテナのビルド
    1. F1キー or Ctrl + Shift + P
    2. Remote-Containers:Rebuild and Reopen in Container

上記のステップでコンテナが立ち上がり、以下のようにコンテナ内へ移動する。

10. 確認

clasp commandが使用できるかの確認
claspコマンドが入っているかを確認。
ターミナルにてclasp --helpを入力後、以下のように出力されればOK


拡張機能の確認
devcontainer.jsonのextentionsに記述した、拡張機能が入っているかを確認。
DEV CONTAINERに指定した、拡張機能が入っていることが確認できればOK

次回

今回は、VS Code + Dockerでコンテナを作成してみました。
GASをローカルから実行を行うには、GCPとの連携が必須のため、次回は、GCPとGASとの連携を行います。
ここまで読んでいただき、ありがとうございます。　それでは、また次回の記事でお会いしましょう。
せしょう