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番ポートにアクセスするとサンプルが実行されているのが確認できました。
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サーバーにアクセスできます。