Node-REDの学習に最適！GitHub Codespacesを使った実行環境の構築法

Node-RED Ubuntu 仮想 コンピュータ イベント参加 開発 Azure

これまでNode-REDを体験するワークショップの環境をどうやって作るかを昨年ぐらいから考えていたのですが、ようやく答えが出てきたのでまとめておこうと思います。

IBM Cloudの環境でもカード登録なく無料での使用（学生にとってはかなり重要）ができなくなりました。また、その後の移行先として使用していたKataCodaも廃止となりました。そうして、いろいろな短時間のホスティングサービスを使用し、現在はenebularに行きつき満足はしていたのですが、 授業という時間の制約のある中でのNode-REDを学ぶことに加えて、enebularの説明・設定を行うことはわりと大変でもありました。（慣れている人には全く大変ではないですけど）

今回、この手段を知ったのはこちらハンズオンイベントでした。

node-red.connpass.com

このハンズオン内で使用していたの実行環境はGitHub Codespacesでした。 このサービスはGitHubのアカウントがあれば使用することができ、プログラミングを学習する側としては比較的敷居が低いというのも長所といえるでしょう。学校でGitHubを教える授業があったことも幸いしています。

GitHub Codespacesとは

GitHub Codespacesは、簡単にいうと「ウェブブラウザ上でプログラミングできる仮想の開発環境」です。

以下がGitHub Codespacesのページになります。

github.com

このホームページ内に以下のような説明があります。

GitHub Codespacesを使用すると、GitHubネイティブの完全に構成された安全なクラウド開発環境を使用して、より迅速にコーディングを開始できます。（翻訳）

こういった機能は他サービスにもありますが、個人的にいいなと感じたのは以下の2点です。

  • 事前に準備されたかなり多くのOSイメージがあること
  • ポート転送機能

OSイメージがないと環境の構築に手間がかかってしまいますが、それが環境に合わせたバリエーションがあることで準備が簡単になります。また、ポート転送機能を使用するとCodespace上の特定のポートでWebアプリケーションを実行している場合は、そのポートを転送できます。これにより、テストやデバッグのために、ローカル コンピューター上のブラウザーから開発したアプリケーションにアクセスが簡単できるようになります。

例えば、Node-REDでWebサービスを行うプログラムを作成するのであれば、この機能がないとかなり制限を受けてしまいます。

加えて、個人利用に限るなら、価格も以下のようになっています。

GitHub Codespaces を最大 60 時間まで無料でお試しいただけます。また、1か月あたり15GBのストレージもご利用いただけます。必要なコア数を決めて、ご利用ください。無料時間とストレージは毎月自動的にリセットされます。（翻訳）

月60時間の使用ができる点も学ぶにはほぼ十分かなと思います。必要ないときは停止してしまうことも可能です。（非アクティブなタイムアウトは30分なので、ブラウザのタブを閉じても30分後には停止します）

以下の内容が神内容でした🤩🤩🤩

ぜひ一読ください。

【参考】

qiita.com

頼もしいですね！

以下、サービス名はCodespace、実行環境をCodespaceコンテナと表記していきます。

Codespaceコンテナを起動する！

まずはどういうものなのか体験してみましょう。GitHubのリポジトリを作成する画面で

以下のように設定します。

  • Repository name　…　first_codespaces
  • リポジトリの種類　…　Public
  • 初期設定　…　Add a README file、License: MIT License

設定後【Create repository】ボタンをクリックすると以下のようにリポジトリが作成されます。

では、このリポジトリを使用してCodespaceコンテナを起動してみます。リポジトリの中身は空っぽでも問題はありません。画面上部の【Code】ボタンをクリックすると

開いたダイアログの【Codespaces】タブをクリックし、表示された【Create codespace on main】ボタンをクリックします。

ボタンをクリックすると、ブラウザのタブが追加され以下のような画面が表示されます。Visual Studio Code（以下VSCode）のような画面とターミナルが表示されています。この画面が開くことでリモート実行可能な環境設定が行われます。この設定には時間がかかるので、少し待ちます。

準備ができると以下のようにREADME.mdファイルがあればそれが表示され、ターミナルにもプロンプトが現れます。（環境設定に時間がかかる場合にはプロンプトが表示されても設定途中であることもあるので、しばらく様子を見るようにしててください）設定が終わると、リポジトリの内容はCodespaceコンテナの/workspacesにコピーされます。事前に必要なファイルなどはリポジトリに含めておくことで使用できます。

コンソールで環境について確認してみます。今回は起動したのはデフォルトのイメージです。デフォルトイメージ（正式にはGitHub Codespaces(Default Linux Universal)と呼ぶようです、長いので今回はデフォルトイメージ表記します）はいろいろな開発ツールがインストールされているので、バージョンを細かく問わなければ比較的使用しやすいです。

OSはunameコマンドやlsb_releaseコマンドからもわかるように、Azure上に構築されたUbuntu20.04 LTS（x86）でPython, Node.js, JavaScript, TypeScript, C++, Java, C#, F#, .NET Core, PHP, Go, Ruby, Condaに対応しているようです。

github.com

執筆時のバージョンはpythonはVersion3.10.13、pipはVersion24、また、nodeはVersion20.14.0、npmはVersion10.7.0となっていました。

デフォルトのイメージは随時更新されていくと思うので、実際に使用するときにツールのバージョン確認をするとよいでしょう。

GitHub Codespacesでコードの開発

開発環境が起動できたので、Pythonのコード開発ができるか試してみます。以下のようにpyファイル（FizzBuzzにしてみました）を作成し、コンソールから実行してみます。

pyファイル作成時を作成するとVSCodeの拡張機能をインストールするか尋ねられます。Codespaceコンテナ起動後に保存されたファイルはリポジトリと関係なくCodespaceコンテナに紐づいた形で保存されます。そのため、Codespaceコンテナを削除すると無くなってしまいます。ソースファイルなどは必ずプッシュするようにしてください。

拡張機能のインストールを促される

ソースコード

実行結果

問題なく実行できました。

Codespaceコンテナを終了させる

起動・実行とできたので、終了の方法についても説明します。

修了はウインドウの左下の部分をクリックすると、

上部のコマンドパレットが開くのでその中から【StopCurrent Codespace】を選択すると、

Codespaceコンテナが終了します。

そのままタブを閉じても30分後にはコンテナは終了するのですが、明示的に停止するのが望ましいですね。

GitHub CodespacesにNode-REDの環境を構築する

では、今回の目的であるNode-RED開発環境の構築を行ってみたいと思います。先ほどのCodespaceコンテナのターミナルからインストールコマンドを実行してもいいのですが、今回はCodespaceコンテナを新規に立ち上げたとき（立ち上げ済みのものの場合には何も行いません）に自動的にNode-REDのインストールする設定を行います。

前提

  • デフォルトのイメージ(Default Linux Universal)を使用する
  • コンテナ起動時にNode-REDをインストールするシェルを実行する

設定ファイルをリポジトリに追加

GitHub Codespacesの環境構築時の設定はリポジトリ内にある.devcontainerディレクトリにある、devcontainer.jsonを参照して行われます。新規にファイルを作成してもいいですが、先ほどの環境に設定ファイルを作成してみようと思います。

Codespaceコンテナを起動し、ウインドウ上部にある、コマンドパレットをクリックし、

以下のように入力していくと検索候補が絞られていきます。

> codespaces

検索結果が絞られるので、その候補からAdd Dev Container Configuration File ...を選択します。

続いてCreate a new configuration ...を選択します。

更にDefault Linux Universal devcontainerを選びます。その後のオプション設定に関しては今回は不要です。

するとVSCode内にレポジトリdir/.devcontainer/devcontainer.jsonの編集画面が開き、以下の様に編集します。

この編集ではpostCreateCommandを有効化するのが目的となります。postCreateCommandはcodespaceコンテナの構築直後に実行されるコマンドの登録になります。

編集後の設定ファイル（レポジトリdir/.devcontainer/devcontainer.json）

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/universal
{
    "name": "Default Linux Universal",
    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
    // ** 次の行の末尾にカンマの追加を忘れないこと！
    "image": "mcr.microsoft.com/devcontainers/universal:2-linux",

    // Features to add to the dev container. More info: https://containers.dev/features.
    // "features": {},

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [],

    // Use 'postCreateCommand' to run commands after the container is created.
    // ** インストールコマンドの実行 
    "postCreateCommand": "bash ./install.sh",

    // Configure tool-specific properties.
    // "customizations": {},

    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
    // "remoteUser": "root"
}

ファイルを保存したら、設定ファイルリポジトリ追加は終了です。

インストールシェルをリポジトリに追加

続いてインストール用のシェルファイルをレポジトリに格納します。ファイルはinstall.shとします。

install.sh（レポジトリdir/install.sh）

sudo npm install -g --unsafe-perm node-red

これで必要なファイルはそろいました。リポジトリのファイルツリーが以下のようになっていれば大丈夫です。

確認後、リポジトリにコミット＆プッシュを行います。

メニューから【ソース管理】ボタンをクリックし、コミットのメッセージを入力後、【コミットしてプッシュ】の操作を行います。

プッシュが成功したら、GitHubのリポジトリに反映されているかも念のために見ておきます。以下のようになっていれば大丈夫です。

Codespaceの再構築（コンテナのリビルト）

先ほどまでの作業で再構築のための情報が準備できたので、それを元にCodespaceコンテナの再構築を行います。画面左下をクリックして、

コマンドパレットが開くので、【Rebuild Container】を選択します。

ダイアログで確認するか尋ねられるので、【Rebuild】ボタンを確認します。

これでCodespaceコンテナの再構築が行われますが、Node-REDのインストール作業がある分時間がかかります。コンソールでも追加インストールの様子をみることができます。

インストールが完了するとコンソールは以下のように表示されます。

Node-REDを実行する

これで、Node-REDの実行環境となるCodespaceが完成しました。Node-REDの実行コマンドであるnode-redコマンドが存在を確認できます。

以下のように実行すると

$ node-red

起動プロセスが実行されます。起動後、『ポート1880で実行されているアプリケーションが使用可能』と表示されますが、このプロセスがNode-REDのフローエディタとなります。

【ブラウザで開く】ボタンをクリックするとブラウザに新しいタブが開き、Node-REDのフローエディタが起動します。

完成したリポジトリは以下となります。

github.com

こちらをブラウザで開き、Codespaceを起動させると各ユーザー毎にコンテナを立ち上げる事ができます。

演習ではとても便利ですよね。

おわりに

ようやく、Node-REDをワークショップで使用できるいい環境がそろったなというところでしょうか。制限もあまりないですし、学生であれば申請をすることで、GitHubの学生ライセンス（有料レベルのライセンス）を持つこともできるので制限はさらに緩められると思います。

今年も大学でNode-REDの授業があるのですが、こちらも演習環境にすることも検討したいと考えています。また、ハッカソンなどの短期イベントにも効果が発揮できそうです💪

/* -----codeの行番号----- */