Contents
概要
Laravel8.xとVue.js3を使用してSPAのサイトを作る際にログイン周りでいろいろ苦戦したので記事にしました。
今回は環境構築を行います。
Laravelの環境構築、Fortify Sanctumの設定Laravel Mixを使用した Vue.js3のインストールまでを行います。
バージョン
名称 | バージョン |
---|---|
Nginx | 1.19 |
MySQL | 8.0 |
PHP | 8.0 |
Laravel | 8.x |
Node.js | 16.13.2 |
Vue.js | 3.x |
Composer | 2.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;
今回はここまでで以上です。
次回はログイン、会員登録機能を実装したいと思います。