そごうソフトウェア研究所

SOA、開発プロセス、ITアーキテクチャなどについて書いています。Twitterやってます@rsogo

Raspberry PiにnodeとReactを入れる

冬休みの勉強でRaspberry Piにnode入れて、なんかいろいろやろうと思います。

cpuinfoでCPUの確認

pi@raspberrypi:~$ cat /proc/cpuinfo
processor   : 0
model name  : ARMv7 Processor rev 4 (v7l)
BogoMIPS    : 38.40
Features    : half thumb fastmult vfp edsp neon vfpv3 tls vfpv4 idiva idivt vfpd32 lpae evtstrm crc32 
CPU implementer : 0x41
CPU architecture: 7
CPU variant : 0x0
CPU part    : 0xd03
CPU revision    : 4

(Coreは4つありますが、同じなので省略)

Hardware    : BCM2709
Revision    : a02082
Serial      : 00000000dad0288f

ARMv7ですね。

nodeのインストール

インストールはLinuxの場合はCPUに合わせてバイナリをダウンロードして、解凍するだけでした。今回はさっき調べてARMv7と分かっているので、対応したファイルを使います。

pi@raspberrypi:~$ wget https://nodejs.org/dist/v6.9.2/node-v6.9.2-linux-armv7l.tar.xz
pi@raspberrypi:~$ tar xvf node-v6.9.2-linux-armv7l.tar.xz
pi@raspberrypi:~$ sudo su -
root@raspberrypi:~# mkdir /opt/node/
root@raspberrypi:~# cp -r /home/pi/Downloads/node-v6.9.2-linux-armv7l/* /opt/node/

バージョンの確認をします。

pi@raspberrypi:~/works$ node -v
v6.9.2
pi@raspberrypi:~/works$ npm -v
3.10.9

Reactを入れてみます

まぁここから先はnpmがよろしくやってくれるので、単なる記録です。

pi@raspberrypi:~/works$ sudo /opt/node/bin/npm install -g create-react-app
/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js
/usr/lib
└── create-react-app@1.0.2 

Create React Appでプロジェクトを作れます

pi@raspberrypi:~/works$ create-react-app hellow-world
Creating a new React app in /home/pi/works/hellow-world.

Installing packages. This might take a couple minutes.
Installing react-scripts...

npm WARN prefer global marked@0.3.6 should be installed with -g
hellow-world@0.1.0 /home/pi/works/hellow-world
└─┬ react-scripts@0.8.4 
  ├─┬ autoprefixer@6.5.1 

(中略)


Success! Created hellow-world at /home/pi/works/hellow-world
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd hellow-world
  npm start

プロジェクトのビルド

pi@raspberrypi:~/works/hellow-world$ npm run build

> hellow-world@0.1.0 build /home/pi/works/hellow-world
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  45.92 KB  build/static/js/main.4602eddc.js
  289 B     build/static/css/main.9a0fe4f1.css

The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage": "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may also serve it locally with a static server:

  npm install -g pushstate-server
  pushstate-server build
  open http://localhost:9000

プロジェクトの実行

pi@raspberrypi:~/works/hellow-world$ npm start
Compiled successfully!

The app is running at:

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

Raspberry Biのアドレスと3000番ポートにアクセスするとサンプルが実行されているのが確認できました。

f:id:begirama:20170101172810p:plain

Webサーバーを入れる

今後のことも考えて、単独で実行できるhttp-serverも入れておきます。

root@raspberrypi:~# npm install -g http-server
npm WARN npm npm does not support Node.js v0.10.29
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm You can find the latest version at https://nodejs.org/
/usr/bin/http-server -> /usr/lib/node_modules/http-server/bin/http-server
/usr/bin/hs -> /usr/lib/node_modules/http-server/bin/http-server
/usr/lib
└─┬ http-server@0.9.0 
  ├── colors@1.0.3 
  ├── corser@2.0.1 
  ├─┬ ecstatic@1.4.1 
  │ ├── he@0.5.0 
  │ ├── mime@1.3.4 
  │ ├── minimist@1.2.0 
  │ └── url-join@1.1.0 
  ├─┬ http-proxy@1.16.2 
  │ ├── eventemitter3@1.2.0 
  │ └── requires-port@1.0.0 
  ├── opener@1.4.2 
  ├─┬ optimist@0.6.1 
  │ ├── minimist@0.0.10 
  │ └── wordwrap@0.0.3 
  ├─┬ portfinder@0.4.0 
  │ ├── async@0.9.0 
  │ └─┬ mkdirp@0.5.1 
  │   └── minimist@0.0.8 
  └─┬ union@0.4.6 
    └── qs@2.3.3 

Webサーバーの起動

ドキュメントルートにしたい場所まで移動して、起動します。

pi@raspberrypi:~$ cd works/hellow-world/
pi@raspberrypi:~/works/hellow-world$ http-server 
Starting up http-server, serving ./public
Available on:
  http://127.0.0.1:8080
  http://192.168.10.11:8080
Hit CTRL-C to stop the server

これで他の端末からhttp://192.168.10.11:8080/Raspberry Pi上のWebサーバーにアクセスできます。