Node-RED と Svelte が連携したプロジェクトを Heroku で動かすメモです。
GitHub に基本プロジェクトを配置
1ft-seabass/heroku-starter-nodered-svelte-wip-lv01
このリポジトリは Node-RED + Svelte の仕組みを色々試していく。WIP (Work in Progress) 制作途中のものです。
使っていくにつれて得た知見がつどつど追加される可能性があります。
現状盛り込んでいるもの
- ローカルの作業データを元に Heroku で動かす Node-RED の仕組みを GitHub に公開したメモ – 1ft-seabass.jp.MEMO
- setting.js の adminAuth を設定してログインを Heroku の環境変数で設定している
- NODERED_LOGIN_ID と NODERED_LOGIN_PASSWORD でログインできるように設定済み
- 手元の Node-RED で追加インストールが反映されるように Heroku Procfile + package.json 調整済み
- setting.js の adminAuth を設定してログインを Heroku の環境変数で設定している
こちらを基礎に Node-RED に以下の Svelte の対応をしています。
- Node-RED のプロジェクト内で Svelte を動かすメモ – 1ft-seabass.jp.MEMO
- Svelte テンプレート zip ファイル解凍して Svelte のプロジェクト作成
- Node-RED の管理画面 URL の設定
- Node-RED の Svelte を表示する Web サーバー用フォルダ設定
- Node-RED と Svelte が連携したプロジェクトに Bootstrap を導入するメモ – 1ft-seabass.jp.MEMO
- Svelte の Bootstrap CDN 設定
- Node-RED と Svelte が連携したプロジェクトで axios を導入し Node-RED http ノードからデータ取得するメモ – 1ft-seabass.jp.MEMO
- Node-RED の CORS 対応
- Svelte の npm i axios で axios インストール
- Node-RED に api1 のフローを設置
- Svelte の Rollup.js を axios に対応させるため修正
これらを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 してアプリに反映します。
このようなログが出て、
Heroku にアクセスしてみると表示されました。
管理画面の ID とパスワードを設定する
ローカルの作業データを元に Heroku で動かす Node-RED の仕組みを GitHub に公開したメモ を参考にHeroku の環境変数を設定してログインの ID とパスワードを設定します。
を元に、Heroku Dashboard で、
アプリの Settings タブから、
環境変数の値でログイン ID とログインパスワード を用意します。
- NODERED_LOGIN_ID
- ログイン ID
- NODERED_LOGIN_PASSWORD
- ログインパスワード
と設定します。
Heroku で作成したアプリのドメインに /admin
でアクセスしてみると、このようにログイン画面が表示されます。
先ほど設定したログイン ID とログインパスワードでアクセスしてみると、エディタが表示されました!
これで、Svelte と Node-RED が連携するプロジェクトの基礎ができました。