はじめに
祝！🎉
2022年5月18日にGitHub Codespacesのウェイトリストから解除された旨のメールを受け取り、ようやく利用できるようになったので、さっそく使ってみました。
Codespacesの環境でNode-REDを動かして、編集したフローをGitHubへプッシュしてみました。
結論から言うと、ブラウザのVS Code内でNode-REDの立ち上げ、フローの編集、GitHubレポジトリへの登録(プッシュ)の一連の操作が全て完結するので、とても便利でした。
Codespacesの立ち上げ
Codespacesへアクセス、ログインします。
Repository、Branch、Dev container configuration、Region、Machine typeを設定して「Create codespace」ボタンを押します。
無料アカウントは
Dev container configuration →Default Codespaces configurationのみ
Region →US East、Southeast Asia、Europe West、US Westの中から選択
Machine type →4-core、8GB RAM、32GB storageのみ
でした。
セットアップが開始され、しばらくするとブラウザ内で見慣れたVS Codeが立ち上がります。
環境は
/workspaces/{レポジトリ名} →GitHubレポジトリのルート
/home/codespace →ホームディレクトリ
になっています。
複数のCodespaceの立ち上げ
管理画面で「New codespace」ボタンを押して、複数のCodespaceを立ち上げることが可能です。
Node-REDの立ち上げ
dockerコマンドでNode-REDを実行します。
$ cd
$ mkdir .node-red
$ docker run -d -p 1880:1880 -p 1883:1883 -v /home/codespace/.node-red:/data nodered/node-red:latest
Node-REDが起動すると、右下にポップアップが表示されるので、「Open in Browser」ボタンを押します。
Node-REDのフローエディタが別のタブで開きます。
VS CodeのPORTSタブを押すと開いているポート番号の一覧を確認できます。
ここでは、ポート番号:1880がNode-REDのフローエディタで、ポート番号:1883がMQTTで使用するポートです。
(MQTTを利用するにはngrokコマンドでポート転送機能を使用する必要があります)
デフォルトでは外部から匿名アクセスはできません。(VisibilityがPrivateになっています)
右クリック(macOSの場合は、Ctrl + クリック) → Port Visibility → Publicを選択することで匿名アクセスが可能になります。
例えば、Node-REDフローでダッシュボードを外部へ公開したい場合は、この設定変更が必要です。
GitHubレポジトリへのプッシュ
$ cd .node-red/
$ cp flows.json /workspaces/{レポジトリ名}/
メニューでSource Controlを選択し、Commit (✅マーク) を押します。
コメントを入力してEnterを押すとCommitが実行されます。
メニューでExplorerを選択し、GitHubレポジトリに反映されていることを確認します。
GitHubページにも反映されていることを確認できます。
