Laravel8 Fortify Sanctum SPA認証 Vue.js3をDockerで環境構築する

概要

Laravel8.xとVue.js3を使用してSPAのサイトを作る際にログイン周りでいろいろ苦戦したので記事にしました。

今回は環境構築を行います。
Laravelの環境構築、Fortify Sanctumの設定Laravel Mixを使用した Vue.js3のインストールまでを行います。

バージョン

名称バージョン
Nginx1.19
MySQL8.0
PHP8.0
Laravel8.x
Node.js16.13.2
Vue.js3.x
Composer2.0.14

環境構築

開発環境はdockerで構築します
構成はこちらの記事を参考にさせていただきました。（というよりほぼそのまま）
下記の記事ではPHPのバージョンは7.4ですが8.0に上げています。
また、メール認証のテストをするためにMailHogを使えるようにしています。
https://yutaro-blog.net/2021/04/28/docker-laravel-vuejs-1/
https://yutaro-blog.net/2021/04/29/docker-laravel-vuejs-2/
https://yutaro-blog.net/2021/04/30/docker-laravel-vuejs-3/

ディレクトリ構成

laravel-app
├─ docker
│    ├─ php
│    │   └─ Dockerfile
│    │   └─ php.ini
│    ├─ nginx
│    │    └─ Dockerfile
│    │    └─ default.conf
│    └─ mysql
│         └─ Dockerfile
│         └─ my.cnf
│    
├─ src
│    └─ Laravelディレクトリ
│─ .env
│─ .gitignore   
└─ docker-compose.yml

MailHogを使えるように追記

version: '3.8'

volumes:
  mysql-volume:

services:
  app:
    build:
      context: .
      dockerfile: ./docker/php/Dockerfile
    volumes:
      - ./src/:/var/www/html
    environment:
      - DB_CONNECTION=mysql
      - DB_HOST=db
      - DB_PORT=3306
      - DB_DATABASE=${DB_NAME}
      - DB_USERNAME=${DB_USER}
      - DB_PASSWORD=${DB_PASSWORD}

  web:
    build:
      context: .
      dockerfile: ./docker/nginx/Dockerfile
    ports:
      - ${WEB_PORT}:80
    depends_on:
      - app
    volumes:
      - ./src/:/var/www/html

  db:
    build:
      context: .
      dockerfile: ./docker/mysql/Dockerfile
    ports:
      - ${DB_PORT}:3306
    environment:
      MYSQL_DATABASE: ${DB_NAME}
      MYSQL_USER: ${DB_USER}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
      TZ: 'Asia/Tokyo'
    volumes:
      - mysql-volume:/var/lib/mysql

  mailhog:
    image: mailhog/mailhog
    ports:
      - "1025:1025"
      - "8025:8025"

.envの以下の部分を編集

MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_FROM_ADDRESS=info@example.com

記事通りにファイルを作成したらdockerを起動

docker-compose up --build -d

appコンテナに入ります。

docker-compose exec app bash

Laravel8をインストール

composer create-project --prefer-dist "laravel/laravel=8.*" .

Vue.jsをインストール

今回使用するVue.jsのバージョンが3のため、VuexとVue Routerのバージョンは4系をインストールします。

npm install vue@next
npm install vue-loader@next -D
npm install vue-router@next
npm install vuex@next

webpack.mix.js の編集

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
        //
    ])
    .vue(); //追記

とりあえずのインストールはこれで終わりです。

Laravel Fotifyのインストール

Laravel8から認証パッケージがLaravel/uiからJetstreamというライブラリに変わりました。
Jetstreamをインストールすればフロント部分も内包された状態で認証機能を導入することができますが、今回はこれを利用せず、FortifyとSanctumという二つのパッケージを組み合わせて認証を実装します。Jetstreamのバックエンド部分はFortifyが使用されています。

composer require laravel/fortify
php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"
php artisan migrate

config/app.phpを編集

config/app.phpにFortify Service Providerクラスを登録します。

//略
        App\Providers\RouteServiceProvider::class,
        App\Providers\FortifyServiceProvider::class, //追加
//略

config/fortify.phpを編集

ルート名の先頭にapiを付与するためにprefixを指定します。

'prefix' => 'api', //変更

ログイン画面やユーザー登録画面はフロント側で用意するのでバックエンドで用意されるルートの無効化をします。

'views' => false,

Fortifyでは使用しない機能があったらfeaturesの項目を削除することで無効化することができます。

'features' => [
    Features::registration(), // 登録機能
    Features::resetPasswords(), // パスワードリセット
    // Features::emailVerification(), // メール認証
    // Features::updateProfileInformation(), // 登録情報の更新
    Features::updatePasswords(), // パスワードの更新
    // Features::twoFactorAuthentication([ // 2段階認証
    //    'confirmPassword' => true,
    // ]),
],

Laravel Sanctumのインストール

Laravel Sanctumは、SPA向けの軽い認証システムです。
今回はSPAのためAPIトークンを使わないSPA認証を採用します。
SPA認証の場合、インストール時に生成されたマイグレーションファイルは使用しないので削除します。

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

apiミドルウェアグループに\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStatefulミドルウェアを追加。

protected $middlewareGroups = [
        'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class, // 追記
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

.envを編集

Vueからリクエストを行うドメインを設定する必要があります。今回はlocalhostで問題ありません。

SANCTUM_STATEFUL_DOMAINS=localhost

アプリケーションのセッションクッキードメインを設定する。これも今回はlocalhostで問題ありません。

SESSION_DOMAIN=localhost

セッションドライバーをfileからcookieに変更。

SESSION_DRIVER=cookie //任意

config/cors.phpを編集

レスポンスヘッダーにAccess-Control-Allow-Credentialsをtrueにして追加することが必要です。

'supports_credentials' => true,

resources/js/bootstrap.jsを編集

esources/js/bootstrap.jsに以下を追記

axios.defaults.withCredentials = true;

今回はここまでで以上です。
次回はログイン、会員登録機能を実装したいと思います。

/ JavaScript Laravel PHP Vue.js / コメント数(0)

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。