ラズパイをプログラミングの開発環境用途に使うメリットはズバリ「自分のPCのローカル環境を汚さずに済むこと」です。
プログラムを組むたびにパッケージやモジュール等を入れてローカルのストレージを消費すると、SSDなら速度が遅くなりますし、仮にDockerのような仮想環境をローカルに立ち上げたとしてもメモリの消費も激しいでしょう。
そこで私は、ラズパイやNASを有効的に使い、自分のPCの環境をほぼ汚さずにプログラミング学習環境を築いています。今回は、安価なマイクロPC「ラズパイ」上にVue-CLIによるWeb開発環境を構築する方法を紹介します。ラズパイは本番環境のWebサーバーとして動かすには非力かもしれませんが、学習用途で開発環境を構築するにはうってつけのマシンです。
今回構築した環境は以下の通りです。
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]
本体：ラズパイ3B+
OS：2019-04-08-raspbian-stretch-lite
Node：ｖ12.4.0
npm：6.9.0
vue-cli：3.8.4
[/st-mybox]
ラズパイ等のARM製CPUにVue-CLI開発環境を作る
ラズパイのようなLinuxマシンに開発環境を構築する際に気を付けなければならないポイントはOSの違いとCPUの違いです。
OSといってもLinux自体は同じでも、「ディストリビューション」と言われるバージョンの違いがあります。Redhat系やDebian系などと呼ばれる種類の違いに応じた環境構築が必要です。
CPUの違いについてはあまり取り沙汰されることの無い内容ですが、実はここも大きなポイントで、たとえばIntelのCPUに入ったLinuxなのか、AMRのCPUに入ったLinuxなのかで、Nodeが依存するパッケージにてエラーやワーニングが出ます。具体的に言うと「apt」などのパッケージマネージャのインストールコマンドひとつでは、最新のNodeなでのパッケージが入らないことがあるのです。
そこで、今回利用するラズパイには、ARM製CPUで、OSはお決まりのRaspbianですので、この組み合わせでのVue-CLIインストール方法の解説になります。Nodeなどのパッケージは、最新版かそれに準ずる新しいバージョンをインストールしなければ、Vue自体のインストールもできませんので、下記のインストール方法が大切になってきます。
Vue-CLIによるWeb開発環境を構築するには一定以上のバージョンのNode.jsが必要ですので、下記手順にて進めます。
- Nodeのインストール
- Vue-CLIのインストール
- Vueプロジェクト作成
という作業が必要になりますので、順を追って解説します。
１．ラズパイ（ARM製CPU）へのNode.jsインストール
ラズパイをメインに解説しますが、ARM製のCPUを使ったLinuxマシン（例えばQNAP NASなど）では同様の手順で、インストール可能です。QNAP TS-231Pでは実証済みです。
ラズパイのパッケージマネージャ「apt」や「apt-get」などのinstallコマンドでは、現状では最新バージョンのNodeが入りません。そこで、下記の記事を参考に、直接ARM CPU用のNodeインストールしていきます。
[st-cmemo fontawesome=”fa-external-link” iconcolor=”#BDBDBD” bgcolor=”#fafafa” color=”#757575″ iconsize=”100″]Raspberry Pi 3 Model Bに最新のNode.jsとnpmをインストールする[公式準拠][/st-cmemo]
１－１．ラズパイ（Raspbian）用のNodeインストールパッケージのダウンロード
ターミナルから下記コマンドを実行します。このコマンドでは、指定の版数（12.xなど）のNodeインストール用パッケージを現在のディレクトリにダウンロードしてきます。（12.xのxマイナーバージョンを指定せず、xまま入力してもパッケージをダウンロード出来ます。）
>curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
↑setup_12.xのところを推奨版（安定版）や最新版の版数にしたほうが Vue-Cliとの相性問題が出ない可能性が高いと思われます。
１－２．Node.jsのインストール
下記コマンドにてダウンロードしてきたNodeインストールパッケージにてインストールが実行されます。オプションの「-y」はインストール中に質問される内容にすべて「Yes」と回答する、というオプションになります。質問にそれぞれ応えたい場合や、質問内容を確認したい場合はこの引数は外してください。
>sudo apt-get install -y nodejs
これで、Node.jsとnpmが一緒にインストールされます。
２．ラズパイへのVue-CLIインストール
次はラズパイにvue-cliの環境インストールになります。
>sudo npm install -g @vue/cli
下記のようなワーニングがいくつか出ると思います。
notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”linux”,”arch”:”arm”})
あなたのOSやCPUでは〇〇の機能がサポートされていませんよ。って感じでしょうか？
でもまぁインストールはできました。
一応npmのパッケージをアップデートしておくと良いかもしれませんが、この辺は今までどういう環境で使ってきたかにもよりますので、必須ではありません。（これまでにNode（npm）を使っていたのなら、依存関係が壊れるかもしれないので、むやみなアップデートは非推奨かと）
npmアップデートコマンドはこちら
>sudo npm update -g npm
３．Vueプロジェクト作成
次はいよいよvue-cliのインストールです。コマンドを1行打つだけですが、注意があります。
下記のコマンドで気を付けたいのは「sudo」を付けないことです。ラズパイの「pi」などの一般ユーザーでは、Linuxコマンドをsudoを付けて実行することが多いものですが、ここでsudoを付けてしまうと、下記コマンドで作ったプロジェクトの所有者や所有グループがrootになってしまい、ファイルの編集やディレクトリの操作で非常にやっかいな問題が出ます。
たとえば、プロジェクト内にファイルやディレクトリを作ったり消したりするだけでもsudoが必要ですし、そもそものvueファイルの編集（上書き）で「権限がありません」とエラーが出てしまいます。これを回避するために、sudoを付けず、一般ユーザー（例えばラズパイデフォルトの「pi」）などのユーザーの状態でvueプロジェクトを作る必要があります。説明が長くなりましたが、私はここでハマったので忘備録のつもりで記しました。
>vue create my-app
※my-appは適当なフォルダ名です。ご自身のプロジェクト名に変更してください。
また、Linuxのファイル権限について詳しく知りたい方は下記を参照してみてください。ファイルの権限への理解が深まると、権限でトラブったときに解決が早くなります。
[st-card id=1374 label=”” name=”” bgcolor=”” color=”” readmore=”on”]
いくつか環境設定に関する質問があって、Vue-cliのインストールが始まります。おそらくエラーをいくつか吐くと思います。これは、前述の通りCPUの関係やパッケージの依存関係でワーニングが出ています。ただ、ワーニングは出るものの、最後までインストールが進めば、vue-cliによる開発はできます。
エラーのせいか、ラズパイの能力のせいか、プロジェクト作るのに20分くらいかかりました。同じARM系CPUのQNAP NASで同じことやったときはもっと早かったんですが・・。
以上でラズパイへのVue-cli環境構築は終わりです。あとはリモートでラズパイにSSHログインして、快適にかつ自PCを汚さず開発してみてください！！最終的にはWebサイトもWebアプリもWebサーバに上げるものですので、開発の段階からラズパイというサーバで開発するのも勉強の一つだと思っています。
それでは、がんばってください！！
さいごに
2020年以降になると言われていたラズパイ４のリリースも今年（2019年6月）に発表され、日本に入ってくるのもあと少しでしょう。今度のラズパイは大幅に性能アップし、価格はほとんど変わらず（日本円では５～６千円台）アップデートされました。
もう下手なWindowsの中古PCを買うより安く早く快適な環境が手に入るんですね。
しかし、性能アップと引き換えに、「発熱」という大きな問題も膨れ上がってきました。海外のラズパイ４ユーザーは、ラズパイに大きなファンをつけたり、氷で直接冷やしたり、苦労しながら運用しているようです。
ラズパイ３にも当然「熱問題」はありました。しかし、小型のファンで対応できる場合も多く、よほどの負荷で長時間運用というケースでもなければ熱による暴走・破損という話は聞いたことが無いです。
ラズパイも過去のバージョンは絶版もしくは入手性が著しく悪くなってきていますので、開発環境用に安定稼働のラズパイ３を今のうちに入手しておくのもありかもしれませんね。
コメント