こんにちは。kzkohashi です。
FISM という会社でCTOをやっております。

今年4月に「Laravel + Vue.jsではじめる 実践 GraphQL入門」という技術書籍を出版しました。

前回noteでは、本誌の概要について書かせていただきました。
今回は第2弾！
GraphQL + Laravelでバックエンドを開発！（開発環境の準備〜プロジェクト作成）編です。

※今回はかなり長いですが、極めて実用的です。どうぞ！

✂︎ ---------------------

はじめに

LaravelでGraphQL APIを開発！
本誌ではツイッターライクなWebアプリケーションのAPIの実装方法を解説します。
以降ではLaravelプロジェクトの新規作成から始まり、アカウントの新規登録、ログイン、ツイートやタイムラインの表示などの機能を作成します。
順番に実装していけばすべての機能を実装できるようになっていますが、既にGraphQLについてご存知の方 は、好きなところからお読みください。

今回説明しないこと
リポジトリパターンなどの設計手法は用いません。
責務に応じたクラスの分割等もしないため、処理が重複する箇所もありますが、その点はご了承ください。

ソースコードについて
サーバサイドのソースコードはGitHubで公開していますので、必要に応じて参照ください。

開発環境の準備〜プロジェクト作成

環境構築
それではアプリケーションを実装するための環境構築を進めていきます。

プロジェクトの作成
まず最初にアプリケーションのプロジェクトを作成します。
任意のディレクトリに移動してLaravelの新規プロジェクトを作成します。

$ composer create-project laravel/laravel backend --prefer-dist "5.8.*"

Laravelプロジェクトの生成が完了したら、artisan servコマンドを使ってローカルサーバを起動できるかどうかを確認しておきましょう。

$ cd backend
$ php artisan serv

以降、サーバサイドの実装で使用しているコマンドは、基本的にbackendディレクトリでしています。

ブラウザで http://localhost:8000 にアクセスして、LaravelのWelcomeページが表示されれば成功です。
ここまでの動作が確認できたら、ローカルサーバは一旦停止(Ctrl + C)しておいてください。

環境変数(.env)の設定
.envを用意
.env.exampleをコピーして.envを作成します。

$ cp .env.example .env

APP_KEYを設定
コピーしたばかりの .env には APP_KEY が設定されていないため、artisanのkey:generateを使用してキーを生成します。

$ php artisan key:generate

DB接続
情報を設定.envにDBの接続情報を設定します。

DB_DATABASE=twitter
DB_USERNAME=root
DB_PASSWORD=pass

DBの用意
本書ではDBはDockerのMySQLコンテナを使います。MySQLコンテナの設定はdocker-compose.ymlに記載しています。
docker-composeでコンテナを起動するため、docker-composeを実行できる環境をご準備ください。

Dockerを使用しない場合は、DBの接続情報をdocker-compose.ymlに記載していますのでそちらを参照して適宜DBを用意してください。

参考）筆者は Docker Desktop version:2.0.0.3 を macOS High Sierra version:10.13.6 にインストールして使用しています。

version: '2'
services: datastore:
image: busybox volumes:
- ~/.db-data/twitter:/var/lib/mysql db:
image: mysql:5.7 command: >
--character-set-server=utf8mb4
--collation-server=utf8mb4_unicode_ci environment:
- MYSQL_DATABASE=twitter
- MYSQL_ROOT_PASSWORD=pass - MYSQL_USER=default
- MYSQL_PASSWORD=password - TZ=Asia/Tokyo
ports:
- "3306:3306" volumes_from:
- datastore

DBコンテナの起動
docker-composeコマンドが実行できるようになったら、下記のコマンドを実行してMySQLコンテナを起動してください。

# コンテナの起動
$ docker-compose up -d

DBコンテナの確認
コンテナが起動しているかどうかの確認は、docker container ls でできます(下図参照)。

# 実行中のコンテナを表示
$ docker container ls

DBコンテナの停止
コンテナを停止させるときは下記コマンドを実行ください。

# コンテナの停止
$ docker-compose stop

マイグレーションの実行
アプリケーションがDBに接続できるかどうか確認するために、マイグレーションが実行できるかどうか試しま す。 DBコンテナを停止している場合はコンテナを再起動させた上で、artisan migrateを実行してください。

$ php artisan migrate

マイグレーションの実行後、Laravelのデフォルトで用意されているマイグレーションファイルのテーブル (migrations, users, passwords)がDBに作成されます。

# MySQLに接続
$ mysql -h 127.0.0.1 -P 3306 -u root -p

mysql> use twitter;
Database changed
mysql> show tables;
+------------------------+
| Tables_in_twitter |
+------------------------+
| migrations             |
| password_resets        | 
| users                  | 
+------------------------+
3 rows in set (0.00 sec)

GraphQLライブラリのインストール
LaravelでGraphQLを扱うにあたり、公開されているライブラリを使用します。 本書で使用するライブラリは

lighthouse/nuwave
mll-lab/laravel-graphql-playground

の2つです。 それぞれcomposerを使ってインストールします。
lighthouse/nuwaveのインストール
LaravelでGraphQLを利用するためのライブラリです。LaravelでGraphQLを利用できるようにするライブラリは他にもありますので、気になる方は調べてみてください。

$ composer require nuwave/lighthouse 3.0-beta.3
$ php artisan vendor:publish --provider="Nuwave\Lighthouse\LighthouseServiceProvider"

mll-lab/laravel-graphql-playgroundのインストール
実装したGraphQL APIの動作検証に利用します。同様のツールとして、GraphiQLなどがあります。

$ composer --dev require mll-lab/laravel-graphql-playground
$ php artisan vendor:publish --provider="MLL\GraphQLPlayground\GraphQLPlaygroundServiceP rovider"

GraphQL Playgroundの設定
GraphQL Playgroundはブラウザ上でGraphQLのリクエストを送信することができる非常に便利なツールです。
GraphQL Playgroundは "artisan serv" でローカルサーバを起動するだけで使用可能になります。

$ php artisan serv

ローカルサーバを起動したら、 http://localhost:8000/graphql-playground にアクセスしてください。 GraphQL Playgroundの実行画面が表示されていればOKです。
まず画面右上の歯車アイコンをクリックして設定を表示します。
設定項目の中に "request.credentials" があるので、その値を "include" にしておきます。
その他に設定したい内容を編集した後は「SAVE SETTING」をクリックして保存します。
執筆時の設定内容を下記に記載しますので、参考にしてください。

 {
  "editor.cursorShape": "line",
  "editor.fontFamily": "'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace",
  "editor.fontSize": 14,
  "editor.reuseHeaders": true,
  "editor.theme": "light",
  "general.betaUpdates": false,
  "prettier.printWidth": 80,
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  "request.credentials": "include", 
  "schema.disableComments": true,
  "schema.polling.enable": false,
  "schema.polling.endpointFilter": "*localhost*",
  "schema.polling.interval": 2000,
  "tracing.hideTracingResponse": true,
  "schema.enablePolling": false
}

GraphQL Playgroundでtokenを送信する
本アプリケーションでは認証にJWTを使うため、リクエスト時にトークンを送信する必要があります。
GraphQL Playgroundでトークンをヘッダーに含めるには、画面左下の HTTP HEADERS を設定しなければならないことに注意してくださ い。
トークンの期限が切れたときや忘れてしまった場合はログイン処理を使って新たなトークンを取得できます。

{
  "Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9s
b2NhbGhvc3Q6ODAwMFwvZ3JhcGhxbCIsImlhdCI6MTU1Mjc0MjM4MiwiZXhwIjoxNTUyNzQ1OTgyLCJuYmYiOjE1 NTI3NDIzODIsImp0aSI6IkFkNEJQVnlVZXZaZ3hqSEwiLCJzdWIiOjQsInBydiI6ImM4ZWUxZmM4OWU3NzVlYzRj NzM4NjY3ZTViZTE3YTU5MGI2ZDQwZmMifQ.E7qGZkIi08To3lZPChrd3-8-zPNK1Tm3f2Jl4y1Ifrs"
}

ログイン状態で実行する処理については、 HTTP HEADERS を設定しなければならないことに注意してください。
トークンの期限が切れたときや忘れてしまった場合はログイン処理を使って新たなトークンを取得できます。

CORSの設定
サーバサイドで実装するGraphQL APIの動作を確認する際、本誌ではGraphQL Playgroundを使っています。
GraphQL Playgroundを使う際には問題ないのですが、フロントエンドをVue.jsで実装して、サーバサイドと通 信できるようにするためには、
CORS(Cross-Origin Resource Sharing)の設定が必要です。 CORS自体については本誌では扱いませんので、詳細が気になる方は各々お調べください。

barryvdh/laravel-cors
CORSの対応には barryvdh/laravel-cors を使用します。

$ composer require barryvdh/laravel-cors

barryvdh/laravel-cors をインストール後に app/Http/Kernel.php に下記の設定を追加します。

// ...
protected $middleware = [
    \App\Http\Middleware\CheckForMaintenanceMode::class, \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class, \App\Http\Middleware\TrimStrings::class, \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class, \App\Http\Middleware\TrustProxies::class, \Barryvdh\Cors\HandleCors::class, // この行を追加
];

protected $middlewareGroups = [
// ...
    'api' => [
        'throttle:60,1',
        'bindings',
        \Barryvdh\Cors\HandleCors::class, // この行を追加
    ],
];

app/Http/Kernel.php の編集までできたら、CORSの設定ファイルを用意します。
config/cors.php が設定ファイルです。これは次のコマンドで生成できます。

$ php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

デフォルトの設定内容は次のとおりです。本誌ではデフォルト設定を使用していますが、必要に応じて変更ください。

<?php

return [

     /*
     |--------------------------------------------------------------------------
     | Laravel CORS
     |--------------------------------------------------------------------------
     |
     | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
     | to accept any value.
     |
     */

     'supportsCredentials' => false,
     'allowedOrigins' => ['*'],
     'allowedOriginsPatterns' => [],
     'allowedHeaders' => ['*'],
     'allowedMethods' => ['*'],
     'exposedHeaders' => [],
     'maxAge' => 0,
];

JWT認証
本書ではアカウントの認証をJWTで行います。 JWTを扱うためのライブラリとして、tymon/jwt-auth を使用します。 下記のコマンドを実行してtymon/jwt-auth をインストールしてください。

$ composer require tymon/jwt-auth 1.0.0-rc.4.1

ライブラリをインストールした後、次のコマンドを実行しておきます。

$ php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"

JWT_SECRETの生成
次のコマンドを実行すると .env にJWT_SECRETがセットされます。

$ php artisan jwt:secret

アプリケーション開発

Laravelプロジェクト、DB、GraphQLライブラリの用意ができたところで、アプリケーションの実装に進みます。

✂︎ ---------------------

いかがでしたしょうか？
ここまでお読みいただき、ありがとうございます！
次回は実際の機能について書いた章になりますので、引き続きご覧くださいませ。


Fin.

この記事を書いたのは

▼ Twitterもやってます。よければフォローもお願いします🙇🏿‍♂️

▼ FISM社についてはこちら💁🏿‍♂️

▼ 現在Wantedlyにて開発メンバー募集中です！GraphQL + Laravel + Vue.js + Swift で開発しております👨🏿‍💻まずはお気軽にお話ししましょう🙋🏿‍♂️