昨晩勢いで、Laravel Vue.js のSSRについて記事を投稿したのですが、大きな失敗でした。
そもそも誰もLaravelでJSなんて必要としてない。きっとJS使いたい人はLumenを使っているはずなんです。
今回は、Lumenを使ったAPI + 静的なHTML の構成にSSRをねじ込むための方法を考えます。
そもそもPHPでHTMLページ作らない
[前回書いたLaravel Vue.js のSSR]の記事は、何故かview関数とかbladeとかを使っていて、ちょっと気がどうにかしていたんだと思う。
フロントエンドエンジニアは多分bladeとか使わないし、htmlとかjadeとかそういうのを愛しているはず。
なので今回はJadeで構築したテンプレートの中にPHPをねじ込んで…という方向性で考えてみる。
jadeの構成
doctype html
html
head
....
body
.container
include ./include/ssr.php
#app // Vue.jsのアプリになる部分
.title {{message}}
...
ポイントはPHPのinclude。書き間違いではなく普通にinclude ./include/ssr.phpします。
includeするPHPは以下の様なシンプルな形でOK。PHP拡張子なのでエディタも動く
<?php
$app = require(__DIR__."/../bootstrap/app.php");
echo app("ssr"); // SSRの結果が帰ってくる
?>
要はLumenをルーティングとして使うのではなく、ルート自体はファイルに着地させて、あくまでDIコンテナとしてのみ使いましょうという試み。
あとはサービス・プロバイダなりでSSR描画処理を登録してあげればOK
$app->singleton("ssr",function(){
$command = "node ".app()->basePath("ssr.js");
$ssr = new \Symfony\Component\Process\Process($command);
// Input読んだり値を渡したりとかそういう処理
$ssr->run();
return $ssr->getOutput();
});
OGPとかもやる場合はHEADとかもコレで部分HTML記述する形で。
普通にjadeコンパイルすると拡張子は.htmlになると思うので、gulp-renameとかで.phpに修正するか、Apacheの設定をよしなにするか。
Lumen の運用について
こんな感じで運用してみると、ルートにHTML吐くものがなくなるのでレスポンスの処理がすっきりする。
ControllerはReponse返さなくて良くなるので、エラー系はThrowableでErrorHandlerにResponse生成させて、正常系のResponse生成はMiddlewareで対応みたいな処理が取れる。
ルートのindex.php以外でLumen使ったりすると意図しない挙動になるケース多かったりするので、redirectとかurl関係の関数使う時には注意。