イケてるbootstrapのダッシュボードをEC2上で動かす

手順メモ IoT

ご無沙汰しております。

このたび、センサーモジュールから値を取得して、クラウドでごにょごにょして管理コンソールから確認するといった、いわゆるIoTの基本みたいなことをする機会があったのでそれについて書きます。

既に、クラウドでごにょごにょしてREST APIで値を引っ張ってくるところまではできているので今回は管理コンソールまわり。

ゼロから作るのには時間がないので、ありものでよさそうなものないかなと探していると、以下のページを発見。かっこいい！しかも無料！

uxmilk.jp

直感的に良いと思ったやつ

Blur Admin　←でもページ

これを使わない手はないと思い早速インストールしようと手を動かしてみたのですが、なにしろフロントの知識が全くないものですから一苦労しました。

今回はブラウザで表示するまでのインストール手順。

前提条件

  • AWS EC2を利用。
  • OSはAmazon Linux 201603
  • インスタンスタイプはt2.micro
  • ディスク容量は8GiB
  • セキュリティグループは22, 3000, 3001を開けておく

インストール手順

ほとんど意味がわかっていないので解説しません。（できません。今後の課題！）
このコマンドの通りにやれば動くはず！

teratermでSSHログイン。

$ sudo su -

# yum -y update

# curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.1/install.sh | bash

# source ~/.bashrc

# nvm install stable

# node -v
v6.3.1

# nvm alias default stable

# npm -v
3.10.3

# yum install -y git

# git clone https://github.com/akveo/blur-admin.git

# cd blur-admin

# npm install

# npm install -g gulp

# gulp -v
[14:33:40] CLI version 3.9.1
[14:33:40] Local version 3.9.1

# npm install -g bower

# bower install --allow-root

# gulp serve

（ここに色々なログがでてくる。）
[BS] [BrowserSync SPA] Running...
[BS] Access URLs:
 -----------------------------------
       Local: http://localhost:3000/
    External: http://10.0.0.4:3000/
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.0.4:3001
 -----------------------------------
[BS] Serving files from: .tmp/serve
[BS] Serving files from: src

起動完了。ブラウザ確認

これで起動完了。あとはブラウザで http://EC2のグローバルIP:3000

にアクセスすればページが見れる。

f:id:ykarakita:20160804233914j:plain

ページをカスタマイズ

ページをカスタマイズしようといろいろいじってたら何となくわかってきたので、もう少し理解したらまたご報告したいと思います。