Node-RED と Svelte が連携したプロジェクトを Heroku で動かすメモ

Node-RED と Svelte が連携したプロジェクトを Heroku で動かすメモです。

GitHub に基本プロジェクトを配置

image

1ft-seabass/heroku-starter-nodered-svelte-wip-lv01

このリポジトリは Node-RED + Svelte の仕組みを色々試していく。WIP (Work in Progress) 制作途中のものです。

使っていくにつれて得た知見がつどつど追加される可能性があります。

現状盛り込んでいるもの

こちらを基礎に Node-RED に以下の Svelte の対応をしています。

これらをHeroku で動かしてみます。

GitHub からクローン

git clone git@github.com:1ft-seabass/heroku-starter-nodered-svelte-wip-lv01.git

まず、こちらからクローンしてローカルに持ってきます。

Heroku にアプリ作成

プロジェクトフォルダ直下に移動します。

プロジェクトフォルダ直下Herolu CLI のコマンドを実行して Heroku にアプリ作成します。

heroku create <サーバー名>

<サーバー名> は自分の作りたい名前にしましょう。

git push heroku main

で Heroku 側に push してアプリに反映します。

image

このようなログが出て、

image

Heroku にアクセスしてみると表示されました。

管理画面の ID とパスワードを設定する

image

ローカルの作業データを元に Heroku で動かす Node-RED の仕組みを GitHub に公開したメモ を参考にHeroku の環境変数を設定してログインの ID とパスワードを設定します。

設定と環境設定 | Heroku Dev Center

を元に、Heroku Dashboard で、

image

アプリの Settings タブから、

image

環境変数の値でログイン ID とログインパスワード を用意します。

  • NODERED_LOGIN_ID
    • ログイン ID
  • NODERED_LOGIN_PASSWORD
    • ログインパスワード

と設定します。

image

Heroku で作成したアプリのドメインに /admin でアクセスしてみると、このようにログイン画面が表示されます。

image

先ほど設定したログイン ID とログインパスワードでアクセスしてみると、エディタが表示されました!

これで、Svelte と Node-RED が連携するプロジェクトの基礎ができました。