Github Codespaces を用いた開発環境および検証環境構築（Node-REDを例に）

Owned by Kohei Nishikawa
Last updated: Jun 20, 2023
2 min read

目次

概要

パブリッククラウドとしてホストされた開発環境の「Github Codespaces」に使って、開発および検証環境を構築するハンズオンを行います。Githubの無料プランを使うことでクレジットカードなしで取り組むことができます。Webブラウザ上で直接操作ができますので、iPad 等のタブレット端末からWebブラウザ（SafariやGoogle Chrome等）さえあれば、開発や検証をスタートすることができます。

iPadを使っている場合は、キーボードを接続することを推奨します。

家にデスクトップパソコン（もしくはノートパソコン）があり、外出先や学校で、iPadを使う場合は、何かあればiPadから自宅のパソコンにリモート接続すれば良いですが、まだパソコンを持っていないのであれば、iPad等を買うよりも、最優先でパソコンを買いましょう。Dell , Lenovo , HPあたりのメーカーであれば、通販で安く高性能なパソコンが手に入ります。

環境構築手順

Node-REDの場合

例として、ローコードプラットフォームのNode-REDを起動します。リポジトリに記述するファイル次第で、Node-RED以外を起動することも可能です。

Githubにサインイン

https://github.co.jp/ にアクセスし、画面右上の「サインイン」をクリックします。もし、Githubアカウントを未取得の場合は、無料プランで良いのでGithubアカウントを取得しましょう。https://github.co.jp/ にアクセスし、「Githubに登録する」をクリックします。

Githubs Codespace対応のリポジトリからNode-REDを起動

ここでは、例として、https://github.com/kolinz/node-red-codespaces にアクセスします。Githubリポジトリで、「Code」>>「Create codespace on main」をクリックします。

Githubリポジトリ内の「package.json」と「.devcontainerディレクトリ下のdevcontainer.json」の２つのファイルをもとに、Node-RED環境が起動します。Github Codespacesの実態はコンテナで、今回のNode-REDでは、Node.js のコンテナを起動し、起動したNode.js のコンテナに、「package.json」に書かれたNode-RED関係のノードをインストールすることで、以下ノードが入った状態でNode-RED環境が起動します。

  • node-red

  • node-red-contrib-obniz

    • obniz BoardをNode-RED経由で制御するために必要。

  • node-red-contrib-mongodb-aleph

  • node-red-dashboard

  • node-red-node-watson

  • node-red-contrib-simple-chatgpt

    • ChatGPTを使う場合に役立つ

  • node-red-contrib-play-sound

    • 音声ファイルの再生に役立つ

起動中の画面

「Setting up your codespace」の画面が表示され、コンテナをビルドしようとしていることがわかります。

自動で起動準備が進められ、下図のように表示されれば、Node-RED環境が作成され、起動したことになります。

WebブラウザでNode-RED環境にアクセス

「ブラウザで開く」が表示されたらクリックすることで、起動したNode-RED環境にアクセスできます。

もしくは、「ポート」タブに切り替え、「ブラウザで開く」のアイコンをクリックしても良いでしょう。

Node-REDが起動します。デフォルトでは、GithubにログインしていないとNode-REDの操作ができないようになっています。

Node-REDの画面左側のパレットに、「package.json」に記載したobnizやChatGPT、Google スプレッドシート(GSheet)、Teachable Machine、IBM Watson等のIoTやAI関連ノードがインストール済みであることがわかります。

起動中の仮想マシンを確認する

Github Codespacesの画面に戻り、画面左上の「三」>>「My Codespaces」の順にクリックすることで、起動中の仮想ましんをを表示することができます。

「My Codespaces」では、起動中のコンテナを「Stop codespace」で停止することや、「Delete」で不要なコンテナを削除することができます。また、「Open in…」をクリックすることで、Webブラウザ等で開くこともできます。

Githubの無料プランでは、コンテナのスペック（machine-type）として、CPUのコア数が2コアと4コアを切り替えることができます。

但し、コンテナの稼働時間は、1ヶ月あたりコア時間が120時間になっています。
つまり、2コアであれば、毎月60時間まで利用でき、4コアであれば毎月30時間使える計算になります。従って、Github Codespacesは、開発および検証環境として用いることが良いでしょう。不要になったCodespaces（コンテナ）はDeleteしましょう。Deleteする前に、作業したフローやコード等はバックアップすることを忘れずに実施しましょう。

参考資料