ラズパイにLaravel × Nuxt.jsのWebアプリ開発環境構築

自宅NAS内のDockerへのLaravel × Nuxt開発環境構築でしっかりつまづいたおかげで、ラズパイへの同環境の構築はわりとすんなりいった✌

ラズパイは「買ってみたものの使い道が・・・」と唸ってる方には、今回のアプリ開発環境構築はラズパイ有効利用法としておすすめかと＾＾ラズパイもSSDで稼働すれば、個人開発用サーバーとして申し分ない速度が出ると感じてます。

前提条件

本記事内容の前提条件は以下の通りです。

• ラズパイのセットアップは完了している
• ラズパイへはSSHでクライアントPCよりログインしている
• ラズパイはSSDブートしている
• LaravelはバックエンドAPIとして利用

Laravelのインストール～プロジェクト作成手順

クライアントPCよりSSHでラズパイにログインしているため、コマンドに sudo が付いています。直接ラズパイ上でコマンドを叩く場合は、適宜読み替えてください。

１．ラズパイにPHPのインストール

sudo apt update //最新のパッケージリストのチェック
sudo apt upgrade //チェックしたパッケージリストに更新

sudo apt install php //PHPのインストール

インストール完了後に

php -v

でphpのバージョンが表示されれば、インストール成功です。

２．composerのインストール

下記コマンドにて、curlコマンドで落としてきたcomposerのインストーラーをphpで実行し、composerの実行ファイルを生成します。

curl -sS https://getcomposer.org/installer | php

つづいて、composerのpathを通しちゃいましょう。

sudo mv composer.phar /usr/local/bin/composer

このように、composer.pharというcomposerの実行ファイルを、/usr/local/binディレクトリに「composer」という名前に変更＆移動することで、

composer -v

などと打つだけで、composerが起動できるようになります。

pathを通す方法はいくつかありますが、pathを通しておかないと、composerを起動するたびに

php composer.phar ～

と長いコマンドを打つことになり面倒＆タイプミスが起きやすいです。

３．Laravelインストーラーのダウンロード

ラズパイ（Raspbian）でLaravelをインストールする場合、高確率でライブラリ不足のエラーが出ると思われます。

先に下記のライブラリをインストールしてしまいましょう。

sudo apt install git
sudo apt install unzip

その後、Laravelインストーラーを入手します。

composer global require "laravel/installer"

４．Laravelプロジェクトの作成

Laravelプロジェクトは５～８まで様々なバージョンを選んで入れられますが、今回は安定板の「６」を入れていきます。

まず、インストール時にエラーが出る可能性が高い「PHPの足りないextension（追加機能）」を入れちゃいます。

sudo apt install php7.3-mbstring
sudo apt install php7.3-dom
composer global require phpunit/phpunit

ラズパイにインストールされているPHPのバージョンを指定してextensionをインストールする

Laravel6の最新バージョンのプロジェクトを作成します。

composer create-project --prefer-dist laravel/laravel <project> "6.*"

<project>のところには、好きな名前を入れます。(例：testapp）この名前のディレクトリがLaravelプロジェクトとして作られます。

ちなみに、、、Laravelの最新バージョンを使いたい場合は

composer create-project laravel/laravel <project>

このようなコマンドになり、’21/4時点ではLaravel8が入ります。Laravel8はまだまだ情報が少なく、安定板ではないので個人的には使ってません。

５．開発サーバーの起動テスト

Laravelプロジェクトの作成が完了したら、Laravel自身が機能として持つ開発用サーバーを立ち上げて、ブラウザで確認します。

cd <project>
php artisan key:generate --ansi //初回のみapplication keyをセット

次のコマンドで開発サーバーが立ち上がります。

php artisan serve --host=0.0.0.0

オプションの–host=0.0.0.0は、ラズパイ上に立ち上がったlaravelを、外部のクライアントPCのブラウザから見るのに必要。

これでLaravelサーバーが問題なく立ち上がれば、SSHで接続しているクライアントPCなどのブラウザからも下記のLaravelトップ画面が見られるはずです。一旦、お疲れさまでした！

ブラウザに打ち込むアドレス「http://ラズパイのIPアドレス:8000」

raspberrypi.localなどのホスト名でSSH接続している場合はブラウザに「raspberrypi.local:8000」でもLaravelトップページが表示できるかもしれません。たぶんできる・・・。

MariaDBのインストール～設定手順

Laravelプロジェクトのインストールの次は、データベースのインストールです。

Laravelで使えるデータベースは多岐にわたりますが、今回はMriaDB（Mysql）を入れていきましょう！

ラズパイへのMariaDBインストール方法は下記のサイトがめっちゃわかりやすく、おすすめです。

【ラズパイ】MariaDBをインストールして初期セットアップする【MariaDB】

私も、ほとんど上記サイトの案内通りでMariaDBのインストールがうまくいきました。ありがたい記事です。

が、若干コマンドの違いやLaravelで使用するのに追加が必要な設定がありましたので紹介します。

１．MariaDBのクライアント及びサーバーのインストール

インストールのコマンドが変更されているようです。以下でインストールできました。

sudo apt install mariadb-client-10.0 mariadb-server-10.0

２．作成したユーザーに権限付与

以下コマンドでMariaDBのコンソール画面に入り、（設定したパスワードを聞かれます）

sudo mysql -u root -p

下記SQLを直打ちし、作成したユーザーに権限を付与します。

GRANT ALL ON *.* TO <user_name>@localhost

新たに作成したユーザーでは、権限付与しておかないとテーブルを作成したり諸々できません。

上記のSQLはすべての権限を新しいユーザーに付与する内容なので、rootユーザーでアクセスするようなものなんですが・・・。できれば権限は適正に設定したいですね。勉強中です。

３．アプリ用データベース作成

アプリ用のデータベースをSQLでサクッと作っちゃいましょう！

 CREATE DATABASE `laravel` CHARACTER SET 'utf8mb4' COLLATE 'utf8mb4_general_ci';

laravelは好きなデータベース名。そのほかはおまじないみたいなもの・・・という認識です。データベースで日本語を扱う場合はこの設定で良いのではないでしょうか。

念のため一度MariaDBを再起動しておきます。

sudo systemctl restart mysql

４．LaravelーMariaDB間の接続設定

Laravelプロジェクトのトップ階層にある「.env」ファイルに以下の設定をします。

 DB_CONNECTION=mysql
 DB_HOST=127.0.0.1
 DB_PORT=3306
 DB_DATABASE=laravel //該当DBに変更
 DB_USERNAME=user //ユーザー名変更
 DB_PASSWORD=pass //パスワード変更

以上でLaravelとデータベース間の設定が終わりました。

データベースといえばSQLですが、LaravelにはORMというSQLを書かなくてもデータベースとのやりとりができる仕組みがあります。

私、SQLはほとんどわかりませんし、データベースの中身いじったりするのはUIのツール（Navicat）使っちゃうので、必要が出た時に調べる・・・程度でなんとかなっちゃってます。まぁ、趣味のプログラミングだからですが(笑)

Nuxt.jsのインストール～プロジェクトの作成

さて次はフロント部分のNuxt.jsの環境構築です。

１．Node.jsインストール

Qiitaのこちらの超優秀な記事「ラズベリーパイ4にNode.jsをインストールするまで」を参考にラズパイにNode.js（npm）をインストールします。

sudo apt install npm
sudo apt install nodejs
sudo npm install n -g
sudo n stable
sudo apt purge -y nodejs npm
sudo n 14 //好きなバージョン
node -v

nodeのバージョンは選べますが、公式サイトでのNuxt.jsインストールの前提条件は、

 v10.13 以上 最新の LTS バージョン

とされています。

２．Yarnインストール

npmを使う場合はyarnのインストールは不要ですが、個人的に好きなので。

sudo npm install --global yarn
yarn -v

３．Nuxtプロジェクト作成

いよいよNuxtプロジェクトを作ります。

インストールの場所が肝心で、Laravelと同一リポジトリ（モノレポ）構成で開発環境を整える場合は、Laravelプロジェクトの/resourcesディレクトリ内にNuxtプロジェクトを作成します。

cd resources
sudo yarn create nuxt-app <project>

これでNuxtプロジェクトのテンプレートのようなプロジェクトが自動で作成されます。

上記コマンドを実行すると、インストールに必要な情報を色々聞かれますが、「Axios」というフロントからLaravelのAPIを叩くためのモジュールを忘れずに選択します。（もちろん後からでも手動で入れられますが）

４．Nuxtプロジェクトのアクセス権限変更

面倒ですが、コレやっとかないとエディター（VSCodeなど）上からLaravelプロジェクト内のファイルやNuxtプロジェクト内のファイルの編集・上書きができません。

Nuxtプロジェクトの一階層上（/resources）に戻り

sudo chown -R pi:pi <project>

を実行します。

<project>は作成したNuxtプロジェクトのディレクトリ名です。

このコマンドを実行することで、ログインしているpiユーザーにNuxtプロジェクトを編集・上書きする権限が付与されます。（ログインユーザーがpiではない場合は適宜ユーザー名を変更してください）

５．nuxt.config.jsの設定（CORS対策）

正常にNuxtプロジェクトの作成が終わったらさっそく yarn devしてNuxtのトップページを拝みたい！！

と気持ちは焦りませすが、そのままではラズパイと同じネットワークにある他のPCなどからNuxtプロジェクトのトップページは見られません。チロっと設定が必要ですので、Axiosを使った時のCORSエラー対策も合わせてやっちゃいます。

編集するファイルは、Nuxtプロジェクトのトップ階層にある「nuxt.config.js」です

 export default {
   server: {
     host: '0.0.0.0', // デフォルト: localhost,
   },
   axios: {
     proxy: true,
     baseURL: 'http://localhost:8000/api'
   },
 
   proxy :{
     '/api': {
       target: 'http://localhost:8000'
     }
   },
 }

nuxt.config.jsに上記のような設定を追記することで、ラズパイ上に立ち上がったNuxtプロジェクトを、同一ネットワークに居るPCなどのブラウザから見られるようになります。（server:のくだり）

また、NuxtからAxiosを使ってLaravelのAPIを叩くときに起こるCORSエラーも回避できます。（axios:とproxy:のくだり）

この辺りの詳しい仕様は公式ドキュメントにあります。

Nuxt　https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-server/

nuxtjs@axios　https://axios.nuxtjs.org/options

実際のアプリ運用ではbaseURLやproxy:targetなどの定数はnuxt.config.js内に直書きせず、envファイルに外出しして読み込んで使うのが定石のようです。私はwebサービスをデプロイしたことがないので面倒なので直書きですが(笑)

こちらの記事が参考になります：dotenvはもう古い！最新Nuxtの環境変数管理方法

６．Nuxt開発サーバーの起動

ここまで設定してようやくNuxtプロジェクトの開発サーバーを起動です。

Nuxtプロジェクトのディレクトリに移り

sudo yarn dev

そしてクライアントPC等のブラウザから「ラズパイのIPアドレス:3000」を叩けばNuxtプロジェクトのトップページが表示されるはず。

いかがでしょうか？

つまづかなければ、ラズパイ上のLaravel × Nuxtの環境構築は2時間程度で終わると思います。つまづくと何週間もハマるのが環境構築。。。

ネット上の情報も環境が違うため、

• コマンドが違う
• エラーメッセージが違う
• 必要なライブラリやバージョンが違う

など、つまづきポイントも人の数だけあります。

その点、「ラズパイ」という同じ個体（と同じOS）を準備できれば、本記事と同様の操作で同様の環境が作れると思います。

ほとんど自分の備忘録のために書きましたが、どなたかの参考になれば幸いです。プログラミング初心者はこういった”環境構築ノウハウ”をアウトプットとしてBlog等で発信すると良いと思っています。

私もまだまだ初心者の下の下ですが。

おすすめ記事：初心者のプログラミング学習は何をアウトプットすべきか【失敗談】

７．（オマケ）AxiosでのAPIの叩き方

上記のようにnuxt.config.jsにaxios、proxyの設定を追記すると、フロントからのAPIの叩き方が少し変わります。

 <script>
 import axios from 'axios'
 export default {
   data: () => ({
     users: []
   }),
   methods: {
     async getUsers () {
       const users = await axios.get('api/getusers') //注：エンドポイントはフルパスで書かない
       return (this.users = users.data)
     }
   }
 }
 </script>

注目すべき点は、エンドポイントをフルパスで書かないということです。

普通なら

http://localhost:8000/api/getusers

などと書くところを、nuxt.config.jsのproxy設定が有効になっていることで「/api」以降のパスを書くようになります。

アプリ開発環境をなぜラズパイに？？

個人的になんでもかんでもPCに詰め込むという使い方が好きじゃなく、母艦となるPCはできるだけクリーンな状態を保っておきたいという思いがあります。

アプリ開発はDocker使えばいいんですが、PCのストレージ容量もひっ迫する中で、開発に関わる部分を外出しできるのあれば、ラズパイやNASをうまく使っていきたいな～というところです。

また、ラズパイなどのLinux機を使えば、クライントとなるPCはmacでもwinでもlinuxでも関係ないというのも好きです。Windowsにxampp入れてlaravel立ち上げてごにょごにょ・・・もいいんですが、やってみたらなかなか厳しかったので（モノレポなのにCORSエラーが解消できなかった・・・）

おすすめの記事：

個人使用のラズパイ、使いどころに苦慮。みんな一体何に使ってるの？？