balenaOSをRaspberry Pi3にインストールする方法

以前に [balena Dashとラズパイ3でWebフレームを作る](https://qiita.com/ikemura23/items/3608cc3793bd72cac1e0) という記事を書いたが、
久々にbalenaOSをラズパイ3にインストールしたら、完全に忘れてたので記録しておく。

## 参考url
https://www.balena.io/blog/make-a-web-frame-with-raspberry-pi-in-30-minutes

## 準備
### 必要なデバイス
- ラズパイ3
- SDカード 16GB以上
- HDMIモニタ

### 必要なソフトウェア
- balenaEtcher
- Docker
- balena CLI

### 注意
ラズパイzeroなどのデバイス（1GB未満のRAM）ではbalenaCloudが動かない
ラズパイ3がオススメ

# ラズベリーパイのセットアップ
## ステップ1 - 無料のbalenaCloudアカウントにサインアップする

ここからbalenaCloudアカウントを作成しておく。
GitHubまたはGoogleアカウントで簡単に作成できる。
https://dashboard.balena-cloud.com/signup

## ステップ2 - balenaCloudにアプリケーションを作成する
balenaCloudダッシュボードに移動する
Create applicationからデバイスを追加する
Raspberry Pi3を選ぶ

## ステップ3 - balenaCloudにデバイスを追加してOSをダウンロードする

アプリケーションが作成されたら、[Add Device]ボタンからデバイスを追加する。

SELECT DEVICE TYPE はRaspberry Pi3
SELECT BALENAOS VERSION は 最新っぽい v2.36+rev2(reccomended) を選択した。

ここでダウンロードされるのが balenaOS である。

## ステップ4 - SDカードにOSをフラッシュしてインストールする
OSイメージがダウンロードされたら、SDカードにフラッシュする。
これにはbalenaEtcherが便利に使える

### SDカードをRaspberry Piに挿入する前にやること

実はこのままラズパイを起動してもうまく動作しないため、
GPUにメモリを多く割り当てるための記述をconfig.txtに追加しなければならない。

<img width="880" alt="スクリーンショット 2019-06-15 15.16.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/6566a829-0c75-ef3f-3f17-f32b292d436e.png">

config.txt にこの行を追加する。

`gpu_mem_512=128`

理由は本家のドキュメントを抜粋

> WPEプロジェクトはRaspberry PiのハードウェアGPUアクセラレーションを利用するため、balenaDashを実行するには、デフォルトで設定されているよりも少し多くのメモリをGPUに割り当てる必要があります。balenaCloudでデバイスを起動して実行しているので、このように設定値をリモートで設定できるという利点が/boot/config.txtありますが、SDカードのファイルを直接編集して指定することも同様に可能です。

### つまりどういうことか？

デフォルトだとGPUメモリは`16`になっており、そのままだと少なすぎるらしい。

GPUメモリ`16`のまま起動すると、balenaCloudの管理画面には以下のエラーログが出まくる。

```
wpe  * failed to add service - already in use?
wpe  WARNING: WebProcess crashed: restarting it
```

これを回避するため、Raspberry Pi3用にGPUメモリを`128`と指定してGPUメモリを確保しておく。

ちなみに、balenaCloud管理画面からリモートで変更できるようだが、試しても効果がなく延々と上記エラーログが出ていた。
sdカードを直接書き換えるのがよい。

デバイスが初めて起動した後に、balenaCloudのダッシュボードを表示する。
しばらくすると、ダッシュボードにデバイスがオンラインとして表示される。

## ステップ5 - コードをデプロイする

ここまでRaspberry Piを起動して、balenaCloudに接続されたのをダッシュボードから確認できた。
この後は、アプリケーションコードをプッシュして機能させる必要がある。
これはbalena CLIツールを使って行う

### balena CLIツールをインストールする

balena CLIをつかって、balenaCloud経由でRaspberry Piにコードを送ることができる。

インストール手順はこちら
https://github.com/balena-io/balena-cli/blob/master/INSTALL.md

公式手順にはnpmでインストールするようだが、Macならbrewでもインストールできるようだ

```
brew install balena-cli
```

balena CLIをインストールしたら、`balena login`でbalenaCloudにloginする

```
$ balena login
 _            _
| |__   __ _ | |  ____  _ __    __ _
| '_ \ / _` || | / __ \| '_ \  / _` |
| |_) | (_) || ||  ___/| | | || (_) |
|_.__/ \__,_||_| \____/|_| |_| \__,_|


Logging in to balena-cloud.com
? How would you like to login? (Use arrow keys)
❯ Web authorization (recommended)
  Credentials
  Authentication token
  I don't have a balena account!
```

Webブラウザでログインボタンが表示されるので押す

GithubからbalenaDashプロジェクトをダウンロードする

まず以下にアクセス
https://github.com/balena-io-projects/balena-dash

### balena-dashをgit cloneする

balena Cloudにデプロイするコードを取得するため、以下をcloneする。

```
git clone https://github.com/balena-io-projects/balena-dash.git
```

cloneしたらディレクトリに移動して、balena cliでインストールした`balena`コマンドでpushする。

```
$ cd balena-dash

$ balena push ikemura
```

※この時、Dockerがインストールされてる必要がある

以下の画面のように馬？ペガサス？がターミナルに表示されたらデプロイ成功している。

<img width="1136" alt="スクリーンショット 2019-06-15 13.05.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/e04f4b03-cddc-02c7-aee4-910d62da06a6.png">

ここまでくるとラズパイ側の作業は完了

あとはbalenaCloudのダッシュボード画面で操作する。

# balenaCloudのダッシュボードでWPE_URLパラメータを追加

サイドメニューのDEVICE VARIABLESを表示させ、[Add variable]ボタンから以下を設定する。
NAME：`WPE_URL`
VALUE：`https://www.yout-ube.com/watch?v=dQw4w9WgXcQ`

<img width="1552" alt="スクリーンショット 2019-06-16 19.27.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/039a5021-3e5c-0cf8-0f03-71c9e4b047ef.png">

追加するとbalenaCloud側で自動的に処理が始まり、ラズパイ3にYouTubeの動画が再生される。

## 出来上がったもの
小型モニタをつないで、デジタルサイネージとしてCO2濃度を表示させている。
![20190626_172913.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/69b51d0a-d618-556d-2c7d-282a8005aad2.jpeg)
![20190626_173419.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/24269d6a-090e-f616-3825-3ab6c31ac0a8.jpeg)