laravel5.7 storage配下に作成したhtmlをブラウザでプレビューしたい

Question

やりたいこと

laravelでhtmlファイルを作成、編集できるcms的なものを作成しており、

xxxx/storage/app/files/html/index.html

上のような形でstorageにディレクトリを作成し、作成したhtmlを保存していくような形にしたのですが、
このhtmlのプレビューをブラウザで表示したいです。

知りたいこと

下記実装で、表示はできたのですが、
htmlと同じくstorage/files配下に保存しているcss, js, 画像などの外部ファイルが
当然ですが読み込めません。（パス等はpreview用に書き換える処理を挟んでいます。）

public function __construct(){
    $this->middleware('auth');
}

public function preview(){
    $path = storage_path("app/files/html/index.html");
    if($file_exists($path) && is_file($path)){
         return response()->file($path);
    }else{
        return view("404");
    }
}

そこでpublicに一時的に下記のようなpreview用のディレクトリを用意して、そのパスをコントローラーに渡し、プレビュー用のウィンドウを閉じたら一時ディレクトリごと削除するような形で考えたのですが、

storage/app/publicに置くと、閲覧権限がなくてもパスがわかれば閲覧できてしまうため、
できれば一時的であってもpublicに置きたくありません。

publicに置かなくてもcss等を外部ファイルとして読み込み、正確なプレビューを表示できる方法があれば知りたいです。

storage/app
├── public
　　　　├── preview
               ├── index.html
               ├── css
               │    ├── style.css
               │
               ├── img
               │    ├── item.jpg
               │
               ├── js

Answer 1

htmlファイルに限らず、全てのファイルをpreview()経由で表示すれば良いかと思いますが、どうでしょうか。

---

例えば。

CMSで作成されたファイルが、下記のように保存されているとして

xxxx/storage/app/files/html/index.html 
xxxx/storage/app/files/html/css/style.css
xxxx/storage/app/files/html/img/item.jpg
xxxx/storage/app/files/html/js/xxxxx.js

http://ドメイン/preview/　以下のURLのパスがディレクトリ名で終わる場合は、
該当ディレクトリ直下のindex.htmlを表示したいものとします。

ルート設定はこんな感じ。

Route::get('preview/{preview_path?}', 'XXController::preview')->where('preview_path', '.*');

URLに含まれるスラッシュもパラメータとして受け取れるように、条件指定が必要です。

コントローラーのpreview()はこんな感じですね。

public function preview($preview_path = ''){
    $path = storage_path("app/files/html/".$preview_path);
    if(file_exists($path)){
         //ディレクトリなら、「index.html」を付ける
         if(is_dir($path)){
             $path .= '/index.html';
         }
         //存在しないか、ファイルじゃなければ、パスを空に
         if(!file_exists($path) || !is_file($path)){
             $path = '';
         }
    }else{
         //存在しない場合は、パスを空に
         $path = '';//空に
    }

    //return をいくつも書くのが、個人的に好きではないので、まとめちゃいます・・・
    //パスが空じゃなければ、ファイルレスポンスを返却。それ以外は404
    return $path != '' ? response()->file($path) : abort(404);
}

これで、アクセスしたURLによって、preview_pathの中身が下記のようになります。

http://ドメイン/preview/ →　$preview_path = ''
http://ドメイン/preview/index.html →　$preview_path = 'index.html'
http://ドメイン/preview/css/style.css →　$preview_path = 'css/style.css'

※　余談になりますが、
最後の404の返却は、return view("404")で返却すると、ステータスが404ではなく200（正常なページ）になってしまうので、abort(404)に変更しています。
ただ、preview()は認証付のページなので「200でnot found」でも仕様的に問題なければ、return view("404")のままでも問題と思います。

---

なお、

パス等はpreview用に書き換える処理を挟んでいます。

は、ファイルがhtmlの場合に、この処理が行われるように調整するのが良いと思います。

Comments

[mix-peach]

すみません。書き忘れましたが、コードは未検証なので、スペルミスなど不具合がありましたら、ご容赦くださいね^^;

[whawhawha]

回答ありがとうございます！
routeのみ XXController::preview → XXController@previewに変更して、
css等を読み込んだ状態でHTMLをプレビューすることができました。

まだ問題は残っており、cssがResource interpreted as Stylesheet but transferred with MIME type text/plainもしくはMIME type text/x-c++となり、読み込めているのに適用されない、一部のプロパティが適用されないかと思いきやコントローラーにdump()を入れると、
Resource interpreted as Stylesheet but transferred with MIME type text/plainとなっているcssが適用される珍妙な状態になっていますが、なんとか前に進めそうです。