herokuに$10/月で作るNode-Redサーバ（Postgresも付いてくるよ）【2022/12/1～お金掛かります】

# 前置き

Raspberry pi等でも登載されているNode-Redが最近プロトタイピングする中で
サクッと作れて便利で結構前からマイブームなので、いっそどこからでも使えるサーバ上に
環境を作ろうと思いますた。

**※2022/12/01～Herokuの料金体系変更により、無料で作成することができなくなりました。
  よってココに書いている無料手順は過去のものとなりましたので、ご注意下さい**

# やりたいこと

- **[1. heroku のアカウントを作る（ココは詳しくやらない） ](https://qiita.com/juicy/items/b4c97f75418d189f45a7#1-heroku%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B)**
- **[2. Node-Red をデプロイする](https://qiita.com/juicy/items/b4c97f75418d189f45a7#2node-red%E3%82%92%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B)**
- **[3. heroku の環境を整える](https://qiita.com/juicy/items/b4c97f75418d189f45a7#3heroku%E3%81%AE%E7%92%B0%E5%A2%83%E3%82%92%E6%95%B4%E3%81%88%E3%82%8B)**
  - **[3-1.自動スリープの解除](https://qiita.com/juicy/items/b4c97f75418d189f45a7#3-1%E8%87%AA%E5%8B%95%E3%82%B9%E3%83%AA%E3%83%BC%E3%83%97%E3%81%AE%E8%A7%A3%E9%99%A4)**
  - **[3-2.タイムゾーンの設定](https://qiita.com/juicy/items/b4c97f75418d189f45a7#3-2%E3%82%BF%E3%82%A4%E3%83%A0%E3%82%BE%E3%83%BC%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A)**


# はじめる前に

**今回の作業にあたっては、herokuにクレジットカードの登録が必要です。**

### プランについて
ここではherokuのプランについて詳しく説明しませんが（といいつつ）、
~~Free Dynoを使い続ければずっと無料です。~~
**こちらのもプラン変更によりEco Dyno（月5＄）を選択しないと使えなくなりました**


#### その理由
~~通常 `Free Dyno` だと `550時間/月の無料 Dyno 時間` が与えられます。~~
**こちらのもプラン変更によりEco Dyno（月5＄）を選択しないと使えなくなりました**

~~且つ、 `クレジットカード登録` を行うと `+450時間/月の無料 Dyno 時間` が `増える` ので
トータルで `1000時間/月 の Dyno 時間` が利用できるようになります。~~
**こちらのもプラン変更によりEco Dyno（月5＄）での取り扱いになります**


~~つまり、24時間ｘ31日間の利用してもひと月の最大が744時間なので、1アプリだけの利用（今回はこれ）
であれば365日稼働しても無料となるわけです。（しかも余る）~~
**Eco Dyno（月5＄）の場合も1000時間利用可能（且つ30分アクセスがないと落ちる）ということには変わりはありません**

#### ただし制限もある
herokuの~~無料プラン~~**Eco Dyno（月5＄）** に~~は~~**も**自動でスリープする機能が・・・。

30分アクセスがないと自動的にスリープモードに入ってしまいます。

なので、定期的にアクセスがない場合は次にアクセスがあるときにDynoを起こしているようで
レスポンスが落ちてしまうという事態になります。

なので、こちらの解消方法も後ほど記載します。

#1．herokuアカウントを作る
heroku上に環境を作るので、なにはなくともherokuアカウントが必要です。
詳しい作り方については

https://signup.heroku.com/jp

にも記載があるので、サクッと作っちゃいましょう。

※主な開発言語は「Node.js」で良いかと

その後、クレジットカードの登録もやっちゃっておきましょう。

#2．Node-Redをデプロイする
Node-Redなんて触ったことないって方。ご安心下さい。めっちゃ簡単です。

このボタンを押すだけで、サクッと環境が作れてしまう。
[![herokuへデプロイ](https://camo.githubusercontent.com/c0824806f5221ebb7d25e559568582dd39dd1170/68747470733a2f2f7777772e6865726f6b7563646e2e636f6d2f6465706c6f792f627574746f6e2e706e67 "ぽちっとな")](https://heroku.com/deploy?template=https://github.com/joeartsea/node-red-heroku)

ぽちっとすると、herokuのログイン画面に進みます。

**この際同時にHeroku Postgresのサービスも追加されると思いますがこちらも5＄掛かるようになってしまいました**

ログインが完了（既にログイン済み）だと、こんな画面が表示されます。

![アプリ作成画面](https://qiita-image-store.s3.amazonaws.com/0/318700/4eb3695c-0944-8a43-dae7-b24dac505c28.png)

+ **App name**
本アプリの名前です。
ここでは一旦、「sample-node-red-app」とした。

+ **Choose a region**
本アプリのリージョンですが、USでもヨーロッパと、どちらを選んでも良いです。
ここでは一旦、「United States」とした。

+ **NODE_RED_PASSWORD(必須)**
Node-Redにログインするときのパスワードです。

+ **NODE_RED_USERNAME(必須)**
Node-Redにログインするときのユーザ名です。

### 注意
**1.入力順序**
なぜかパスワード→ユーザ名の順序になっているので
よく確認してからの入力が良いです。（さっき気付いて焦った汗）
後で設定は変えられるけど、パスワード入力が１回なのも気をつけた方がよさそう

**2.ユーザ名とパスワード**
Raspberry piのようなローカルNode-Redサーバではユーザ名、パスワードを必要としないけど
オープン環境では他者から利用されることもあるので、その辺りを十分理解した上でユーザ名、パスワード設定するといいかも

### デプロイ後の確認
内容を全て入力し終えたら、`Deploy App` をクリックします。

ビルドとデプロイが始まる。

![ビルドとデプロイ](https://qiita-image-store.s3.amazonaws.com/0/318700/b0869d9d-c43d-f0e2-f03e-616960bd266f.png)

`Deploy to Heroku` に:white_check_mark:が付いたらデプロイ完了です。

![View](https://qiita-image-store.s3.amazonaws.com/0/318700/aacc0d9c-43ec-0d86-5289-616340fc81c9.png)

上のボタンが表示されたら、まずどんな感じで環境が作成されたか見たいので　`View`をクリックします。
![デプロイ成功.png](https://qiita-image-store.s3.amazonaws.com/0/318700/d7d8bf8c-fe8b-d3af-67c0-dd338860dbc6.png)

デプロイが成功していると、この画面になるので`Go to your Node-RED flow editor`をクリックします。

### ログイン
![ログイン画面.png](https://qiita-image-store.s3.amazonaws.com/0/318700/01e652ad-e9f0-7510-66b9-5c58bac2e1cc.png)

+ **ユーザ名**
さっき設定したユーザ名を入力します。

+ **パスワード**
さっき設定したパスワードを入力します。

入力が終わったらログインしてみます。
![flow editor.png](https://qiita-image-store.s3.amazonaws.com/0/318700/0631fc1f-87ab-14ea-e5b0-c7ba34dee99b.png)
フローエディターが表示されましたね。

一旦こんな感じで、サクッとプロトタイピングが開始できます。

#3.herokuの環境を整える
##3-1．自動スリープの解除
### 何が必要？
先程も無料プランで書きましたが、この無料プランにはAppに一定時間（３０分）アクセスがないと自動スリープします。
つまり、このデプロイしたNode-Redにアクセスがないと、スリープされてしまうのでスケジュール実行などを
プロトタイピングしたときにそのタスクが実行されないなどの事態が発生します。

### どうするか
* ３０分時間を空けずに使いまくる・・・・これは現実味がない（というか、寝る暇が無い）
* 定期的にこのNode-Redにアクセスする（しかも３０分）←まぁどうにかなるか・・・？

### 面倒じゃないか？
どっちにしろ面倒！と思うかも知れませんが、herokuには便利な`add-on`があるので
これを利用してスリープしないようにできる。

### Add-onを入れる
![View](https://qiita-image-store.s3.amazonaws.com/0/318700/aacc0d9c-43ec-0d86-5289-616340fc81c9.png)
さっきビルドしたあとに表示された、`Manage App`と`View`ボタンですが、
今度は押してない方の`Manage App`をクリックする。

![manage.png](https://qiita-image-store.s3.amazonaws.com/0/318700/f1f00451-fd1d-837a-b122-54c609b1d143.png)

こんな感じの、管理画面に遷移するので、この中でAdd-onを追加していきましょう。

![add-on.png](https://qiita-image-store.s3.amazonaws.com/0/318700/1c4275db-409e-aec4-f6fd-ff67f1c9f471.png)

設定画面内のこの部分の`Conｆigure Add-ons`:arrow_right:をクリックして設定画面を表示する。

![resouces.png](https://qiita-image-store.s3.amazonaws.com/0/318700/ed698780-072c-a017-c5e4-da621951bfd6.png)
Add-onとかの管理画面に移りました。

この画面で自由にAdd-onを追加することが出来ます。

※このデプロイ方法の場合、既にMongoDBのプラグインが無料で付いてきます。便利です。

### いよいよ追加
![add-ons.png](https://qiita-image-store.s3.amazonaws.com/0/318700/39950896-b165-423b-6655-5b70c62ad171.png)
さっきの画面の`Add-ons`の下に`Quickly add add-ons from Elements`と表示されているところに

`New`

と入力すると

`New Relic APM`

とサジェストが表示されるので、それを選択する.

![APM.png](https://qiita-image-store.s3.amazonaws.com/0/318700/214491ff-c763-3ae8-fb53-a760acfcb6cd.png)

このAdd-onも無料で使えるようになっているので、念のため`Plan name`が`Wayne - Free`となっていることを確認して
`Provision`をクリックする。
![add-on-done.png](https://qiita-image-store.s3.amazonaws.com/0/318700/bbd0ec70-82b9-ee61-1367-f2c0e14f6517.png)

こう表示されたら、Add-onの追加が正常に完了している。

### これで終わりじゃない
Add-onは追加できたけど、このままでは自動スリープしてしまうので、もう少し設定が必要になる。

さっきの画面の`New Relic APM　::　Newrelic`のリンクをクリックする。（新しいウィンドウが開く）
![agree.png](https://qiita-image-store.s3.amazonaws.com/0/318700/80feff36-9fae-0a5e-c57a-40a624a694f8.png)
はじめにこんな画面が表示されるので`I agree`をクリックする。
![synthetics.png](https://qiita-image-store.s3.amazonaws.com/0/318700/a329357f-23aa-d353-10e8-95dee3abb765.png)
そのあと、色々リンクが出てくるけど、この`SYSNTHETICS`をクリックする。
![synthetics2.png](https://qiita-image-store.s3.amazonaws.com/0/318700/be700862-469f-3dd0-b7a8-cab76fd43d90.png)
![schedule.png](https://qiita-image-store.s3.amazonaws.com/0/318700/f500d8e4-3a73-7ad4-3587-670bd2ed5a51.png)

###Add-on設定内容
**1．Choose your monitor type**
　これは監視用のAdd-onなので、モニタリングするサービスを選ぶ。
　ここでは一旦`Ping`のままで良いです。

**2．Enter the details**
　**i．First, name your monitor**
　　監視する時にわかりやすくする名前を入力する。
　　ここでは一旦、`sample-node-red-monitor`とした。

　**ii．Enter a URL and we\`ll generate a script for you automatically**
　　どこのURL（サイト）に対して`Ping`を送るのかを入力する。
　　ここでは自分の`Node-red`の`floweditor`の`URL`を設定する必要があるので
　　自分の場合はじめに`sample-node-red-app`としたので、URLは
　　「 [https://sample-node-red-app.herokuapp.com/red/](https://sample-node-red-app.herokuapp.com/red/) 」となるハズ。

　**iii．Add a validation string to look for in the response**
　　監視対象の画面内の特定の文字を監視するか（その文字があることによって死活監視するか）
　　今回は別に死活までの精度を求めないので、ここでは一旦入力は必要はない。

**3．Select monitoring locations**
　モニタリングしてる人のロケーションを選ぶ。
　ここでは一旦、「Tokyo,JP」とした。

**4．Set the schedule**
　監視対象URLの関しタイミングを選ぶ。
　herokuは基本的に３０分間アクセスがないとスリープするので３０分以内であればOK。
　ここでは一旦、`10min`とした。

**5．Get notified**
　何かあったら通知するメールアドレスを入力する。
　先程も書いたが、そんなメールも必要ないので、ここでは一旦入力の必要はない。

###Add-on設定完了
入力が完了したら、`Create my monitor`をクリックして設定完了。

しばらくすると、こんな感じで画面に表示される（多分今後気になるときくらいしかみることは無いけど）
![monitor.png](https://qiita-image-store.s3.amazonaws.com/0/318700/cdfe5e8f-3d9f-39f7-c0d1-621add5c32e5.png)

##3-2.タイムゾーンの設定
herokuのタイムゾーンは基本的に初期設定だと`UTC`のままなので
このままNode-Redを使うと、スケジューリング実行などのタスクを入れたい場合
９時間の時差が出てしまうので、heroku自体のタイムゾーンを`Asia/Tokyo`にしてやる必要があります。

###herokuのタイムゾーンを日本に合わせる
####まずは現在の設定の確認
heroku管理画面を確認します。
![pull down.png](https://qiita-image-store.s3.amazonaws.com/0/318700/0fc93ebd-eca4-80b5-1f29-5db07de62331.png)
画面右上の`More`から`Run console`をクリックします。
![console.png](https://qiita-image-store.s3.amazonaws.com/0/318700/d309676b-e4bf-4f15-3cc9-4817a4792559.png)
こんな感じのコンソール画面が表示されるので`heroku run`と右にそのまま`bash`と入力して`Enter` or `Run`をクリックします。

一旦コンソールで現在のタイムゾーンを確認します。

```bash:bash
~ $ date
Sun Dec  9 03:15:36 UTC 2018
```
現在の日付とタイムゾーンが表示されます。やっぱり`UTC`ですね

####環境変数の追加
![settings.png](https://qiita-image-store.s3.amazonaws.com/0/318700/9bb74e4f-9023-ab4b-a4f7-e0dded2791c1.png)
タイムゾーンの変更には、環境変数にその値を設定する必要があるので
メニューから`Settings`をクリックします。
![settings1.5.png](https://qiita-image-store.s3.amazonaws.com/0/318700/a1231766-a541-909e-d4a8-24e5a07e239f.png)
設定画面に行くと画面中央に`Veveal Config Vars`というボタンがあるのでクリックします。

![settings2.png](https://qiita-image-store.s3.amazonaws.com/0/318700/4d107830-9cf3-84eb-50b8-a8c59588382b.png)
`Config Vars`と書かれている部分がherokuの`環境変数`です。

初期表示では一番下の欄が空いていると思うので、そこに以下の内容を入力していきます。

+ KEY
　`TZ`

+ VALUE
　`Asia/Tokyo`

入力が終わったら、右側にある`Add`をクリックすると設定は完了。

### タイムゾーン設定完了と確認
さっきと同じ[タイムゾーンの確認方法](#まずは現在の設定の確認)で`JST`になっていれば正しく変更されている。

# おわりに
設定が簡単って書いた割に、こうやって書き出してみると結構ボリュームがあった。

でもまぁ、これを見ながら数をこなしていくと設定自体は５分もかからないと思うので
あとは慣れの問題かな・・・。

次から、このNode-Redを使って色々作っていこうかな。

**2022/12/2
折角無料でNode-Redサーバが作れる良い環境でしたが
このご時世、色々と費用が掛かってしまうのも仕方がないですね・・・。**