はじめに

Webアプリ開発向けの言語やフレームワークはたくさんありますが、2018年始からハマってるLaravelを使った簡単なユーザ管理アプリの開発方法を紹介します。Laravelプロジェクトの作り方、ファイルやフォルダ構造、MVCの構造、ルーティング、VUEとの連携方法、APIの実装方法、API認証の方法がなんとなくわかるようになるかと思います。

個人的に、Authleteの認証認可との連携、Swaggerとの連携、オープンソースのAPI GatewayであるKongとの連携やマイクロサービスについて、LaravelのORマッピングであるEloquentについて、Cordovaアプリの開発、PWAアプリの開発などいろいろ別ネタも思い浮かびますがそちらは別記事で整理します。

内容

以下の順番にまとめます。
1. MacへのXAMPP+Laravelインストール ←いまここ
2. ユーザログイン機能の追加
3. MVCとルーティングの説明
4. ユーザリストの表示
5. ユーザリストのペジネーション表示
6. ユーザ管理APIの追加
7. Vue.jsとAPIベースのユーザ管理アプリの追加準備
8. Vue.jsとAPIベースのユーザ管理アプリの追加
9. Vue.jsとAPIベースのユーザ管理アプリへのペジネーション追加
10. APIへのJWTAuth認証の追加
11. Vue.jsとAPIベースのユーザ管理アプリへの認証の追加

1. MacへのXAMPP+Laravelインストール

まずは開発のために自分のPCにPHP開発環境であるXAMPP(X:Windows、Linux、macOS、Solarisのクロスプラットフォーム、A:ApacheのA、M:MariaDB（旧バージョンはMySQL）のM、P:PHPのP、P:PerlのP)をインストールします。

1.1. XAMPPのインストール

XAMPPはMacのインストーラ形式である.dmgファイルとしても配布されていますが、私の好みとしてDockerなどは必要なく、PHPとMySQLサーバが動けばLaravelの最小限の開発環境がうごくため、少しバージョンは古くなりますが、ここではhomebrewを使ったXAMPPのインストールを採用します。

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" < /dev/null 2> /dev/null ; brew install caskroom/cask/brew-cask 2> /dev/null
(途中でsudo実行のための管理者パスワードを二回ほど聞かれるため、入力してEnter)

$ brew cask install xampp

これにより、MacにXAMPPがインストールされますので、Launchpadからmanager-osxを起動します。2018年11月22日時点ではXAMPPのバージョンは7.2.7でした(下図は7.2.5ですが。。。)。

図.1 manager-osx起動後のXAMPP管理画面。

「Manage Servers」タブを選ぶと、上図の通り「Apache Web Server」はデフォルトで起動されていますので、「MySQL Database」を追加で起動します。リストから「MySQL Database」を選択して、「Start」ボタンを押下します。

参考） PerlモジュールがインストールされていないためにApache Web Serverが起動されないことがあるようです。その場合は、Apache Web Serverの構成ファイル「/Applications/XAMPP/xamppfiles/etc/extra/httpd-xampp.conf」の13行目の該当行「LoadModule perl_module modules/mod_perl.so」を下記のとおりコメントアウトしてください。

・・・
#LoadModule perl_module        modules/mod_perl.so
・・・

また、XAMPPをインストールしたら各種コマンドが実行できるよう「/Applications/XAMPP/bin」にパスを通します。「.bash_profile」を以下のとおり編集したら、「source ~/.bash_profile」を実行するのをわすれないようにしてください。

export PATH=$PATH:/Applications/XAMPP/bin

以下の通り、PHPがインストールされていることが確認できます。PHPのバージョンは7.1.19(2018/11/22時点)でした。

$ php -v
PHP 7.1.19 (cli) (built: Aug 17 2018 18:03:17) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2018 Zend Technologies

MySQL(MariaDB)のバージョンは15.1(10.1.34)(2018/11/22時点)でした。

$ mysql -V
mysql  Ver 15.1 Distrib 10.1.34-MariaDB, for osx10.10 (x86_64) using  EditLine wrapper

また、しばらくするとXAMPPのバージョンが古くなると思いますので、XAMPPをアップグレードするには以下のコマンドを実行します。

$ brew cask upgrade xampp
==> Upgrading 1 outdated package, with result:
xampp 7.2.7-0
==> Satisfying dependencies
==> Downloading https://downloadsapachefriends.global.ssl.fastly.net/xampp-files/7.2.7/xampp-osx-7.2.7-0-installer.dmg
######################################################################## 100.0%
==> Verifying checksum for Cask xampp
==> Starting upgrade for Cask xampp
==> Running uninstall process for xampp; your password may be necessary
==> Quitting application ID com.bitnami.manager
==> Removing files:
/Applications/XAMPP/
Password:
==> Running installer script 'XAMPP.app/Contents/MacOS/osx-intel'
==> Purging files for version 7.2.5-0 of Cask xampp
🍺  xampp was successfully upgraded!

1.2. PHPMyAdminの起動

ブラウザから http://localhost/phpmyadmin/ にアクセスするとログインなしでPHPMyAdminにアクセスできます。

1.3. MySQLのセキュリティ設定

上からもわかるとおり、MySQLは初期状態ではパスワードなしで接続できてしまいます。そのため、mysqladminコマンドでパスワード設定を行います。

$ mysqladmin -u root -p password
Enter password: (初回なのでパスワードなし)
New password: (パスワードを入力します)
Confirm new password: (再度上と同じパスワードを入力します)

ちなみに「brew cask upgrade xampp」を使ってXAMPPをアップグレードした場合、MySQLのセキュリティ設定がリセットされますので、再度同じことを実施してください。

再度ブラウザから http://localhost/phpmyadmin/ にアクセスするとアクセスエラーが発生することが見てとれます。

1.4. config.inc.phpの設定

XAMPPに同梱されたPHPMyAdminのconfigファイルを修正し、

...
/* Authentication type */
$cfg['Servers'][$i]['auth_type'] = 'cookie'; // cookieに変更
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = '[先程設定したパスワード]';
...

1.5. Composerのインストール

$ curl -s https://getcomposer.org/installer | php
All settings correct for using Composer
Downloading...

Composer (version 1.7.3) successfully installed to: /Users/Retina/ccyport/vmarket_oem_v2/composer.phar
Use it: php composer.phar

パスがとおった場所にcomposerというコマンド名で移動します。

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

Composerのバージョンを確認すると60日以上古いからアップデートしろといわれたので、アップデートコマンドを実行。「composer -V」を実行して何も言われなければself-updateは必要ありません。

$ composer -V
Composer version 1.7.3 2018-11-01 10:05:06

$ composer self-update
You are already using composer version 1.7.3 (stable channel).

1.6. Laravelのインストール

Composerを利用してLaravelインストーラをダウンロードします。

$ composer global require "laravel/installer"

laravelコマンドが「~/.composer/vendor/laravel/installer/laravel」に存在するため、パスを通します。「.bash_profile」を以下のとおり編集したら、「source ~/.bash_profile」を実行するのをわすれないようにしてください。

export PATH=$PATH:/Applications/XAMPP/bin:/Users/[ユーザ名]/.composer/vendor/laravel/installer

Laravelのバージョンを確認したところ2.0.1でした。(2018/11/22時点)

$ laravel -V
Laravel Installer 2.0.1

1.7. Laravelプロジェクト作成と稼働確認

以下のコマンドでLaravelプロジェクトを作成します。

$ laravel new [プロジェクト名]

ここではuseradminという名前のプロジェクトを作成します。

$ laravel new userauth
Crafting application...
Loading composer repositories with package information
(中略)
Package manifest generated successfully.
Application ready! Build something amazing.

以下稼働確認します。

$ cd userauth
$ php artisan serve
Laravel development server started: <http://127.0.0.1:8000>

8000番ポートで作成したLaravelプロジェクトが稼働するので、ブラウザから http://localhost:8000 にアクセスします。

以上、「1. MacへのXAMPP+Laravelインストール」が完了です。

次は、「2. ユーザログイン機能の追加」です。

参考URL

参考1. XAMPPのインストーラーのダウンロードページ https://www.apachefriends.org/jp/index.html
参考2. MacへのHomebrewを使ったXAMPPのインストール http://macappstore.org/xampp/
参考3. MacへのXAMPPセットアップ
http://www.koreyome.com/web/xampp-mac-setup/
参考4. ComposerでLaravelをインストールする手順https://readouble.com/laravel/5.5/ja/installation.html
参考5. MacへのComposerとLaravelのインストールhttps://qiita.com/zaburo/items/513183385b6bb67e1710