はじめに

限られたLAN内で動作するSPAを作りたかったので、サーバーをセットアップし、ReactでSPAを開発してみる。ちなみに筆者は初Reactだ。いつもならVue.jsで作ろうかって話になるんだけど、今はVue3が出たばかりでUIライブラリが整ってない。今後長く使うSPAになりそうだから、息の長そうな開発環境に手を出してみたのだ。

準備

今回は、Raspberry pi zero W をサーバーにする。Swapは大きくしておこう。

　　参考：　Raspberry Pi のスワップ領域拡張
　　https://qiita.com/nyas/items/f4d0675061ee8cdcc3e7

/etc/dphys-swapfile の CONF_SWAPSIZE はデフォルトで100となっている。1024ぐらいにしておこう。それから、nodeのバージョンは、10か12の偶数のもので。eslint-typescriptがインストールできるように（create-react-appでReact環境構築について）。npm や yarn が動いたときに、インターネット上から関連するモジュールを取得するみたいなので、インターネットに接続されていることが前提。

sshでサーバーにログインし、任意のプロジェクトフォルダを作ってそこにアプリを構築。srcファイルを書き換えて作っていこう。プロジェクトではsqlite3を使ってデータ管理できるようにしよう。あと、UIはオーソドックスでもいいからきれいなやつを使いたいな・・・、ということで今回はMaterial-UIを使う。・・・というようなざっくりとした構想でスタート。

プロジェクトの構築

公式の説明を参照。「新しいシングルページアプリケーションを作成するのに最も良い方法です。」という Create React Appに従う。

# 任意のフォルダに移動（プロジェクトフォルダの親フォルダ）

$ npx create-react-app myapp

しばらく待つ。私の環境では２０分ぐらいかかったが、マシンによってはあっという間なんだろうな・・・。

パッケージの追加

さて、プロジェクトフォルダが用意できたところで、似たようなことをすでに行っている先達の手順を参照、確認させていただく。何事も先達はあらまほしきことなり。今回の先輩はこちら。

　　Raspberry Pi Zero WでNode.js＋SQLite3を動かしてみた
　　https://qiita.com/s-suefusa/items/6f4b1df1781c82999816

私の環境では、nodebrewのインストールは不要なのでそこは省略。あくまで参考。丸パクリではない。

とりあえず、プロジェクトフォルダに入る。

$ cd myapp

sqlite3

sqlite3を使えるようにしていこう。

$ npm install sqlite3 --save

-gオプションでグローバルにインストールするか、とも悩んだが、サーバーの故障や拡張のときにプロジェクトのバックアップからのリストアを行いやすいように、--saveでプロジェクトに含める形でセットアップすることにした。

ちなみに、Raspberry Pi OS lite だったため、sqlite3 をソースからビルドしてくれて、インストールに小一時間ほどかかる。

Material-ui

アプリ開発でUI構築はラクしたい～。ポピュラーらしい Material-UI を使ってみよう。

　　ポピュラーなReact UIフレームワーク（Material-UI）
　　https://material-ui.com/ja/

　　material-uiを使ってかっこいいuiのreactアプリケーションを作ってみた
　　https://blog.takanabe.tokyo/2015/12/material-uiを使ってかっこいいuiのreactアプリケーションを作ってみた/

　　React入門～Material UI編～
　　https://zenn.dev/h_yoshikawa0724/articles/2020-09-24-react-material-ui

$ yarn add @material-ui/core

これもまた小一時間ほどかかる。

Reactアプリのディレクトリルート/package.jsonに下記の一文を追加する。

忘れないうちにやっとこう・・・。参考情報は次の通り。

　　create-react-appで作成したReactアプリをWebサーバにデプロイする手順
　　https://qiita.com/matoruru/items/04dc2a325c317e9c50ae

開発環境

開発環境としては、このサーバー上のnodejs react プロジェクトを、リモートのVSCODEで開くとかしていじっていこうと思う。

おわりに

Raspberry pi zero W では、React + sqlite3 + Material-ui のプロジェクトを準備するだけで、３時間弱の時間がかかった。Raspberry pi zero W が、今回作るWEBアプリサーバーとして実働負荷に耐えうるかどうかテストもかねて進めているプロジェクトだが・・・。気長にやろう・・・。