Raspberry Piをデスクトップコンピュータとして使う！

Raspberry PiをデスクトップRaspberry Piをデスクトップコンピュータとして使う！として使う！

Raspberry Pi の一番シンプルな利用方法として、PC 代わりに利用する事ができます。この記事では、Web 開発で Raspberry Pi を利用する場合の例を紹介します。

Web 開発に Raspberry Pi を利用する

Raspberry Pi で Linux 系の OS が動作するので、デスクトップ PC として、Web 開発などに利用する事ができます。 既に、Ubuntu のデスクトップ版の OS（21.04 64-bit ARM64）をインストールしているので、さらに開発に必要なパッケージをインストールすれば、開発用の PC 代わりに利用できます。既に開発用の PC を持っている場合には、あまり魅力的ではないかもしれません。しかし、Raspberry Pi ならば OS を完全に入れ替えるのもそれほど大変ではないので、実験用やお試し用で利用しても便利です。

Web 開発で必要なパッケージは、プログラムの入力に必要なエディタ、インターネットで公開されている各種パッケージを取り込んだりするのに利用するパッケージ管理アプリがあれば基本的な開発が可能です。

今回インストールするのは、

＊　VSCODE (エディタ)

＊　Node .js(パッケージ管理アプリの npm も含まれています)

今回の例で利用している OS は、Ubuntu デスクトップ　（21.04 64-bit ARM64）です。

VSCODE のインストール

プログラムなどの入力に利用するエディタはマイクロソフトの VSCODE をインストールします。 いろいろなプログラミング言語に対応していて、プラグインも豊富で利用者が多いエディタです。 ATOM など他のエディタの方が使い慣れている場合は、好みのエディタをインストールして利用すれば問題ありません。

アプリはインターネットからダウンロードできます。

「.deb 64-bit ARM64」をダウンロードします。

$ dpkg -i [file name]

これでエディタが使えるようになります。

Node.js のインストール

Node.js は、「sudo apt install nodejs」でもインストールできますが、特定のバージョンをインストールしたい場合は、バイナリーの配布パッケージをインストールすることもできます。

従って簡単な方法は

$ sudo apt install nodejs

バイナリー配布パッケージ(v14.x LTS)を利用する場合は、

$ sudo apt install curl

$ curl -fsSL h t t p s://deb.nodesource.com/setup_14.x | sudo -E bash -

$ sudo apt-get install -y nodejs

で特定バージョンのインストールができます。

詳細は、NodeSource Node.js Binary Distributionsで解説されています。

Web 開発の例

Web 開発を行う場合、フロントエンドのフレームワークとしてReactやVueを利用するのが便利です。

Reactを利用する場合は、Reactのサンプルプロジェクトを作成してくれる、「create-react-app」を入れておくと便利です。

$ sudo npm install -g create-react-app

でインストールできます。「-g」オプションをつけることで、どのフォルダからでもこのスクリプトを実行できるようになります。 サンプルプロジェクトの作成は、

$ npx create-react-app [プロジェクト名]

で作成できます。

Vueを利用する場合には、「vue cli」を入れると便利です。これは、Vue のプロジェクトを管理するパッケージでサンプルのプロジェクトの作成もできます。

$ sudo npm install -g ＠vue/cli

でインストールできます。Web ブラウザを利用した UI も利用可能で

$ vue ui

で起動すると、Web ブラウザの UI が立ち上がって初めてでも簡単に Vue のプロジェクトの管理ができます。

Git 利用の勧め

既に利用されている方も多いと思いますが、Git を利用されることをお勧めします。 Git はソフトウエアなどの開発で、プロジェクトの管理をするアプリです。GitHub と組み合わせて利用すると、複数のコンピュータや複数のメンバーで開発を行う際にとても便利です。

Raspberry Pi の場合、実験用という利用の仕方が多いと思いますので、OS を入れ替えたりする機会も多くなることが予想されます。 その場合、GigHub にプロジェクトフォルダを置いておけば、簡単に同じプロジェクトフォルダを複製する事ができるので便利です。

最初は、GitHub をオンラインバックアップ代わりに利用するだけでも十分価値があります。まだ利用したことがない方はこれを機に利用されることをお勧めします。

Git のインストールは

$ sudo apt install git

で簡単にできます。

GitHub のアカンウトはGitHub の Web サイトから簡単にできます。サイトの「Sign up」を選択します。

React のサンプルプロジェクトを作成してみる

簡単な実施例として、React のサンプルプロジェクトを作成して、GigHub に保存してみます。

まずは、プロジェクトのフォルダを作成するフォルダに移動します。特に決まっていない場合は、ホームホルダの下の「Documents」に移動します。その上で「sample_project」というプロジェクトを作成します。

$ cd ~/Documents

$ npx create-react-app sample_project

作成したら、プロジェクトフォルダに移動して、サンプルプロジェクトを実行してみます。

$ cd sample_project

$ npm start

これで、開発用のテストサーバーを使って作成したサンプルプロジェクトが実行されます。

これを GitHub に保存するには

まずは、GitHub のサイトに行ってログインします。

その上で、新しいレポジトリ（保存場所です）を作成します。「New」のボタンが左上の方にあると思いますので、クリックすると新しいレポジトリが作成できます。レポジトリの名前を入れて、公開（public）か非公開（private）を選択して「Create repository」のボタンを押せば完了です。

レポジトリのパス（URL）は、「h t t p s://github.com/[GitHubのユーザー名]/[プロジェクト名（リポジトリ名）]」になります。GitHubのユーザー「userxxxx」がレポジトリ「sample_project」で作成した場合は、 「h t t p s://github.com/uesrxxxx/sample_project」のようになります。

create-react-appのスクリプトでサンプルプロジェクトを作成した場合には、「.gitignore」というファイルが作成されていると思いますが、このファイルで指定されているファイルは、Git のリポジトリには保存されません。例えば、アプリで、API キーなどを利用している場合には、セキュリティ上公開した場合には問題になるので、API キーのファイルなどは、「.gitignore」で指定して、レポジトリには入れないようにする事ができます。

GitHub にレポジトリができたので、GitHub に保存してみます。

まずは、基本設定をします。プロジェクトフォルダで以下のコマンドを実行します

$ git config user.email "[e-mail]"

$ git config user.name "xxxx"

$ git remote add origin h t t p s://github.com/userxxxx/sample_project

これで、基本的な準備ができたので以下のコマンドを実行して GitHub に保存します。

$ git add *

$ git commit -m "Reactサンプルプロジェクト　Git練習用"

$ git push origin master

これで、GitHub にプロジェクトフォルダが保存されます。 GitHub のサイトからもみられるようになっているはずです。また、別のコンピュータでこのプロジェクトフォルダを利用したい場合には、

$ git clone h t t p s://github.com/userxxxx/sampoe_project

とすると、.gitignore で指定されているファイルを除いて全てのフォルダの内容がコピーされます。

Git は他にもいろいろな利用の仕方がありますが、この基本機能をまずはカバーしておけば、Raspberry Pi で利用するのに最低限の機能は使えます。

まとめ

この記事では、Raspberry Pi を Web 開発用の PC として設定する例を紹介しました。 エディタと Node.js を入れれば、基本的に Web 開発を行うための最低限のパッケージは揃います。 VSCODE や Node.js は、Windows や Mac でも利用可能で多くの方が利用しているパッケージです。

Raspberry Pi でも導入が可能なので、他の開発用の PC と同じアプリを利用する事が可能になります。 Git /GitHub と組み合わせると、開発情報（プロジェクトフォルダ）の共有も可能になるのでさらに便利になります。

特に、Raspberry Pi では OS を入れ替えたりなど、実験的な使い方になる場合が多いので、GitHub で簡単に必要な環境が複製できるとこうした置き換えもスムーズに行う事ができます。