Laravel × Vue CLIを利用した環境構築案を考えてみた #PHP

はじめに

転職後、LaravelとVueを触る機会が多くなりました。
Laravelはフロントエンドの開発が行やすいようLaravel Mixの仕組みが用意されています。
今まではこちらを利用してVue、ReactなどをLaravelに組み込んでいました。
今回Vue CLIの雛形をそのまま使いたいと思いその環境を構築してみたのでまとめておきます。

今回の方法ではVue CLIの雛形を利用できる以外にも以下のようなメリットがあげられます。

・フロントエンドエンジニアがLaravelを意識せず開発できる
・Laravel Mixが対応していない為、Vue CLIの新機能が使えないという事がなくなる
・バックエンドにLaravelを利用しなくなった場合でも対応できる
今後の変化に備えてフロントエンドがLaravelに依存しないよう環境を作りたい！！~~ただの興味本位でやってみたというのもある、、、~~

目指す構成

docker-laravel/
├─ docker-compose.yml 
├─ backend/ .......... Laravelコード
│  ├─ app/
│  ├─ bootstrap/
│  ├─ config/
│  ├─ database/
│  ├─ public/
│  │  ├─ docker-laravel/
│  ├─ resources/
│  │  └─ views/ .......... spa/app.blade.phpが作成される
│  ├─ routes/
│  ├─ storage/
│  ├─ tests/
│  └─ vendor/
├─ frontend/
│  ├─ // Vue.jsのコードを格納    
└─ infra/
   └─ docker/

frontendディレクトリがVue CLIのプロジェクトです。
frontendディレクトリ内でnpm run buildを実行した結果、resources/views/spa/app.blade.phpが作成され画面が描写されます。

Laravelの準備

今回はLaravel環境の準備は本題ではない為、こちらを利用させていただきます。

この通りに進めると、backendディレクトリ以下にLaravelアプリが作成されます。
バックエンド側の準備は以上で完了です。
念の為、この段階でLaravelのwelcome画面が表示される事を確認しておきましょう。

フロント側の準備

Vue CLIのインストール

Vue.js を使う環境を準備するためのコマンドラインインタフェースをインストールします。

$ npm install -g @vue/cli

// 完了後バージョンが表示されればOK
$ vue --version
@vue/cli 4.5.13

Vue CLIでフロントエンドアプリの雛形を作成

ルートディレクトリ内でvue-cliコマンドを利用していvue3のインストールを行います。今回はVue3、TypeScriptの組み合わせで利用します。
こちらも本題ではないのでリンクを参考に準備してください。

Laravel Mixのファイルを削除

今回の環境ではLaravel Mixを利用しないの為、不要なファイルは削除しておきます。

$ cd backend
$ rm -rf package.json webpack.mix.js

VueアプリをLaravelで配信する

現在の構成だとfrontendディレクトリのVueアプリとbackendディレクトリのLaravelアプリが2つ存在する状態です。
npm run buildを実行するとbladeの出力とアセットがLaravel以下に出力されるように設定していきます。

Vue.config.jsの作成

$ cd frontend
$ touch vue.config.js

vue.config.js

module.exports = {
    // アセットはLaravelのpublic/appディレクトリ配下に作成される
    outputDir: '../backend/public/app',

    // app配下にjs, cssなどが置かれるので、publicPathを調整
    publicPath: '/app',

    pages: {
        // appのエントリポイント、テンプレート、出力先を調整
        app: {
            entry: 'src/main.ts',
            template: 'templates/base.html',
            filename: `../../resources/views/spa/app.blade.php`,
        },
    },
}

public/index.htmlをLaravel側で生成する為、Vue側のindex.htmlをbaseのテンプレートとして指定するよう変更します。

// テンプレートディレクトリの作成
$ mkdir templates
$ mv public/index.html templates/base.html

Laravel側でルートを用意する

先程のvue.config.jsの設定で、frontend側でnpm run buildを実行するとLaravelの resources/views/spa 配下にapp.blade.phpが作成されます。
そちらのbladeを呼び出すspa用のルーティングを用意していきます。

web.php

Route::get('/{any}', function () {
    return view('spa.app');
})->where('any', '.*');

これでどのURLでアクセスしてもspa/app.blade.phpが表示される事になります。
ついでに以下をgitignoreに追加しておきます。

.gitignore
/public/app
/resources/views/spa

動作を確認する

frontendディレクトリに移動して、ビルドを実行します。

$npm run build

localhostにアクセスし、Vue.jsのwelcome画面が描写されていれば完成です。

まとめ

今回は、Vue CLIとLaravelを利用した環境構築を進めていきました。
Laravelのappディレクトリ以下にfrontendディレクトリを切っている記事が多かったのですが、Laravelのディレクトリ内にVue CLIのコードが紛れている事が個人的に気持ち悪かったので今回のような構成を試してみました。
まだまだ試験的な試みではあるのでもっとこうした方がいいなどありましたらコメントいただけると幸いです。

Laravel × Vue CLIを利用した環境構築案を考えてみた