Laravel+vue.jsでサービス開発する際の一連の流れ(1)〜環境構築編〜

LaravelとVue.jsを使ってサービスを開発しました。その過程でやったことと、参考にした記事などを書いていきます。備忘録兼、私と同じような初心者の道標になるような記事になれば良いなと思います。

環境
・Laravel(5.8.38)
・Vue.js
・MAMP

プロジェクト作成

開発に必要なファイル一式が揃ったフォルダを作成します。プロジェクト作成には２種類の方法があります。

• laravel new
• composerコマンド

laravel newを使うと最新バージョンのLaravelがインストールされるようです。僕は5.8系を使いたかったので、composerコマンドを使いました。

ターミナル

% composer create-project "laravel/laravel=(Laravelのバージョン)" (プロジェクト名)

僕の場合、実際のコマンドは下のようになりました。
MAMPを使用しているので、cd /Applications/MAMP/htdocsでhtdocsディレクトリに移動し、実行します。プロジェクト名は、laravel_exampleとします。

ターミナル

% composer create-project "laravel/laravel=5.8.*" laravel_example

すると、パッケージがズラーッとインストールされ、laravel_exampleディレクトリが作成されました。
laravel_exampleディレクトリに移り、Laravelのバージョンを確認します。

ターミナル

% php artisan -v
Laravel Framework 5.8.38

ちゃんと5.8系のLaravelがインストールされました。

参考記事：【Laravel入門】プロジェクト作成から起動まで

ディレクトリ構造

先ほどインストールしたディレクトリの配下に、appディレクトリとかconfigディレクトリとか、いろいろ入ってます。
最初はあまり気にしなくていいと思うし、覚える必要もないと思います。開発をしていくと勝手にこの辺には何が入ってる、というのはわかってきます。一応、公式の解説ページを載せときます。
Laravel 5.8 ディレクトリ構造
ちなみに、この公式のドキュメント、開発するにあたってめちゃくちゃお世話になります。簡潔にまとまっている分初心者にはちょっと難しく感じられ、読むのを避けがちです。
しかし、ググっても解決できず、気が進まないながらも公式ドキュメントを読んだら簡単に解決できた、ということが少なからずありました。

データベース(mysql)の設定

データベースの作成

まず、今回の開発で使うデータベースを作成しましょう。
プロジェクトのrootディレクトリ直下にて(ここでなくても良いかもしれないが)

ターミナル

% mysql -u root -p
Enter password: 

すると、パスワードの入力を求められます。僕の場合、特に何も設定していなかってのでパスワードはrootです(ユーザー名もroot)。入力するとmysqlが起動し、ターミナルの表示が%からmysql>に変わります。

(追記)

MAMPのサーバーを起動し忘れたまま上記のコマンドを入力したところ、エラーが出ました。サーバーはちゃんと起動しときましょう

ターミナル

% mysql -u root -p
Enter password: 
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/Applications/MAMP/tmp/mysql/mysql.sock'
・・・

既に存在するデータベース一覧はSHOW DATABASES;で表示できます。最後の「 ; 」を忘れないようにしましょう。

ターミナル

mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| performance_schema |
| mysql              |
| php_sample01       |
| sample             |
| sample2            |
| sys                |
| wordpress          |
+--------------------+
8 rows in set (0.03 sec)

データベースを作成するコマンドは

ターミナル

mysql> CREATE DATABASE (データベース名);

僕の場合、下のようになりました。データベース名もlaravel_exampleにしました。なんでも良いと思います。

ターミナル

mysql> CREATE DATABASE laravel_example;
Query OK, 1 row affected (0.00 sec)

もう一度データベースの一覧を見てみると、laravel_exampleが作成されていることが確認できます。

ターミナル

mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| laravel_example    |
| mysql              |
| performance_schema |
| php_sample01       |
| sample             |
| sample2            |
| sys                |
| wordpress          |
+--------------------+
9 rows in set (0.00 sec)

参考記事：MySQLをMacのターミナルで操作するときのメモ

Laravelのデータベース設定

作成したデータベースをLaravelで使えるように設定します。先ほど作ったディレクトリ(僕ならlaravel_exampleディレクトリ)の中にあるファイルを修正します。

• .env (プロジェクトのルートディレクトリ直下にあります。)
• database.php (configディレクトリにあります。)

.env

.envファイルとは？

.envファイルを使って開発環境と本番環境を切り替えたり、データベースなどの接続情報の変更を行うことができます。つまりLaravelにとって重要な設定変更このは.envファイルを介することで簡単に行うことができます。例えば開発環境では簡易に利用できるsqliteのデータベースに接続し、本番環境ではmysqlのDBに接続といった変更が可能です。
参考記事：入門者のためのLaravel .envファイルの基礎と理解

とりあえずは、この.envファイルに情報を入力していけば、開発環境の設定ができます。
.envの中でデータベースに関わる部分は以下の通りです。

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel  (データベース名)
DB_USERNAME=root     (ユーザー名)
DB_PASSWORD=         (パスワード)

これを修正していきましょう。
DB_CONNECTION、DB_HOST等の項目の意味は下の記事を参考に。
参考記事：保存版！Laravelの.envでできること大全

僕の場合、mysqlの設定は変更していないので、ユーザー名もパスワードもrootのままでした。一応、MAMPを使っている場合はサーバーをオンにした後に自動で表示されるページにも載っています。(下の画像の赤枠で囲んだところです)
データベース名はさっきCREATE DATABASEで作成したものを記入します。

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_example
DB_USERNAME=root
DB_PASSWORD=root

画像をよく見ると、Socket /Applications/MAMP/tmp/mysql/mysql.sockとも書いてありますね。これも.envに追加しておきましょう。
ちなみに、下記のsqlコマンドを打っても、socketを取得できます。

ターミナル

mysql> SHOW VARIABLES LIKE '%sock%';
+-----------------------------------------+-----------------------------------------+
| Variable_name                           | Value                                   |
+-----------------------------------------+-----------------------------------------+
| performance_schema_max_socket_classes   | 10                                      |
| performance_schema_max_socket_instances | -1                                      |
| socket                                  | /Applications/MAMP/tmp/mysql/mysql.sock |
+-----------------------------------------+-----------------------------------------+
3 rows in set (0.00 sec)

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_example
DB_USERNAME=root
DB_PASSWORD=root
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock

これで.envファイルの設定、つまり、開発環境の設定がほぼ完了しました。

database.php

開発環境の設定が「ほぼ」完了した、と言いましたが、それは.envに設定した内容をLaravelに反映させる必要があるからです。
configディレクトリ内にあるdatabase.phpファイルで、.envに書いたデータベース情報を読み込んでいます。

※ちなみに、database.phpが.envのデータベース情報を読み込んでいるのと同様に、mail.phpではメールの情報を、cache.phpではキャッシュの情報を.envから読み込むといった感じになっています。

今回使うのはmysqlなので、database.php内のmysqlの部分を修正していきましょう。

database.php

'connections' => [

        'mysql' => [
            'driver' => 'mysql',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],

env()はヘルパ関数(Laravelが用意してくれている便利メソッド)で、第１引数で.envの値を取得、第2引数は.env内に値がなかった場合のデフォルトの値を設定します。

個人的には、第２引数は全て''で良いのでは？と思います。
なぜなら、サービスを作り終えてサーバーにデプロイする際（開発環境から本番環境に切り替える際)、デフォルト値を下手に設定していたせいでエラー地獄に陥ったからです。

具体的には、本番環境ではunix_socketを設定する必要がなかったのですが、

database.php

'unix_socket' => env('DB_SOCKET', '/Applications/MAMP/tmp/mysql/mysql.sock'),

と書いていたためにデフォルト値の/Applications/MAMP/tmp/mysql/mysql.sockが設定されてしまいエラーになるなど。
デプロイ時にこうなることを避けるために、僕はデフォルト値(第２引数)は全部空にしておこうと思います。
(複数人で開発する際には、環境を合わせるためにデフォルト値を設定しておいた方が良いのかも？)

database.php

'connections' => [

        'mysql' => [
            'driver' => 'mysql',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', ''),
            'port' => env('DB_PORT', ''),
            'database' => env('DB_DATABASE', ''),
            'username' => env('DB_USERNAME', ''),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],

これで開発環境の設定は完了です。

動作確認

実際に正しくテーブルが作成できるか試してみましょう。
プロジェクトのルートディレクトリに移動し、

ターミナル

% php artisan migrate

Laravelはusersテーブルとpassword_resetsテーブルを作成するためのファイルを予め準備してくれており、このコマンドを打つことでテーブルが作成されます。

ターミナル

laravel_example % php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (0.03 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (0.03 seconds)

mysqlを確認しましょう。
use (データベース名); で使用するデータベースを選択し、show tables;でそのデータベースに登録されているテーブルを表示できます。

ターミナル

mysql>use laravel_example;
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed

mysql> show tables;
+---------------------------+
| Tables_in_laravel_example |
+---------------------------+
| migrations                |
| password_resets           |
| users                     |
+---------------------------+
3 rows in set (0.00 sec)

usersテーブルとpassword_resetsテーブルがしっかり作成されています！

ちなみに、Laravelにはテーブル作成の巻き戻しをするコマンドもあります。

ターミナル

php artisan migrate:rollback

php artisan migrateとphp artisan migrate:rollbackはセットで覚えときましょう。後々たくさん使います。

ターミナル

laravel_example % php artisan migrate:rollback
Rolling back: 2014_10_12_100000_create_password_resets_table
Rolled back:  2014_10_12_100000_create_password_resets_table (0.02 seconds)
Rolling back: 2014_10_12_000000_create_users_table
Rolled back:  2014_10_12_000000_create_users_table (0 seconds)

コマンド入力後、テーブルを確認してみると・・・

ターミナル

mysql> show tables;
+---------------------------+
| Tables_in_laravel_example |
+---------------------------+
| migrations                |
+---------------------------+
1 row in set (0.00 sec)

usersテーブルとpassword_resetsテーブルが削除されています。
ちゃんとデータベースを操作できているようですね。

デバッグ

最後にデバッグの設定です。LarabelではデバッグのON,OFFも簡単に設定できます。
デバッグをONにするには.envファイルにて

.env

APP_DEBUG=true

とするだけです。これはconfigディレクトリのapp.phpで読み込まれています。

app.php

/*
    |--------------------------------------------------------------------------
    | Application Debug Mode
    |--------------------------------------------------------------------------
    |
    | When your application is in debug mode, detailed error messages with
    | stack traces will be shown on every error that occurs within your
    | application. If disabled, a simple generic error page is shown.
    |
    */

    'debug' => env('APP_DEBUG', false),

ここに書かれている通りで、APP_DEBUGがtrueなら、作成中のアプリケーションでエラーが起きると、エラーが起きるまでの過程とエラーメッセージを画面に表示してくれます。
falseなら、シンプルなエラーページが表示されるだけです。
サービスを公開する時には、falseにするのを忘れないようにしましょう。

スタックトレース (stack trace)とは

APP_DEBUG=trueの場合

APP_DEBUG=falseの場合

以上で環境構築編は終了です。あとはジャンジャン開発していきましょう！
続く