GitHub CodespacesでNode-REDを動かして編集したフローをプッシュしてみた。

# はじめに

祝！🎉
2022年5月18日にGitHub Codespacesのウェイトリストから解除された旨のメールを受け取り、ようやく利用できるようになったので、さっそく使ってみました。
Codespacesの環境でNode-REDを動かして、編集したフローをGitHubへプッシュしてみました。
結論から言うと、ブラウザのVS Code内でNode-REDの立ち上げ、フローの編集、GitHubレポジトリへの登録(プッシュ)の一連の操作が全て完結するので、とても便利でした。

![invitation.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/8a618fe8-aec9-a56d-83a3-83e842ccd5f6.jpeg)

# Codespacesの立ち上げ

https://github.com/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のみ
でした。

![image_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/a83b00db-aa5f-4891-8a52-33facc7dd0b8.jpeg)

![image_00.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/23269489-93a4-a8ea-75ed-804bdf335578.jpeg)

セットアップが開始され、しばらくするとブラウザ内で見慣れたVS Codeが立ち上がります。

![image_2_0.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/134dfd7d-3b2d-fb67-f6c7-dc3c44817d95.jpeg)

![image_2_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/e33e2db6-0160-9194-39ac-9bcf5c63bb71.jpeg)

環境は
/workspaces/{レポジトリ名}　→GitHubレポジトリのルート
/home/codespace　→ホームディレクトリ
になっています。

### 複数のCodespaceの立ち上げ

管理画面で「New codespace」ボタンを押して、複数のCodespaceを立ち上げることが可能です。

![image_7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/551f4d4b-9aef-5e7b-5c55-a45aaf43b77a.jpeg)


# Node-REDの立ち上げ

dockerコマンドでNode-REDを実行します。

https://qiita.com/kitazaki/items/8502f10fff3e22314d39

```bash
$ 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のフローエディタが別のタブで開きます。

![image_3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/1f6cf732-a2a5-dada-2de7-240969316944.jpeg)

VS CodeのPORTSタブを押すと開いているポート番号の一覧を確認できます。
ここでは、ポート番号:1880がNode-REDのフローエディタで、ポート番号:1883がMQTTで使用するポートです。
(MQTTを利用するにはngrokコマンドでポート転送機能を使用する必要があります)

![image_4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/12a02bfb-548e-eb4b-fcb3-204a681e88a4.jpeg)

デフォルトでは外部から匿名アクセスはできません。(VisibilityがPrivateになっています)
右クリック(macOSの場合は、Ctrl + クリック)　→ Port Visibility　→ Publicを選択することで匿名アクセスが可能になります。

![image_5_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/08adb22a-8ae7-6eb5-de2e-222ede1750b3.jpeg)

![image_5_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/e163f760-9f79-ce7e-2928-ce648cdff590.jpeg)

例えば、Node-REDフローでダッシュボードを外部へ公開したい場合は、この設定変更が必要です。

![image_6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/985dce59-932f-0157-81cf-28fd0a2d0cff.jpeg)

# GitHubレポジトリへのプッシュ

```bash
$ cd .node-red/
$ cp flows.json /workspaces/{レポジトリ名}/
```

![image_8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/eb47437c-eab2-a435-56b9-221043303941.jpeg)

メニューでSource Controlを選択し、Commit (✅マーク) を押します。

![image_9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/c2357b4e-a04e-e830-165b-d20dfccceee7.jpeg)

コメントを入力してEnterを押すとCommitが実行されます。

![commit.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/8ad494bf-6f80-9b27-b556-341a11d56669.jpeg)

メニューでExplorerを選択し、GitHubレポジトリに反映されていることを確認します。

![スクリーンショット 2022-05-29 23.59.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/14f2d290-52c4-70f0-8039-51e4e94bc026.png)

GitHubページにも反映されていることを確認できます。

![スクリーンショット 2022-05-29 23.59.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/dd5b2c1c-f6c2-1214-f50e-34d4d469b761.png)