Laravelとngrokを併用するとhttpsでアクセスした時にエラーが発生する【Laravel Mix】

みなさん、こんにちは。どんぶラッコでうs。

今日はちょっとニッチなお話です。

みなさんはngrokを使っているでしょうか？

ローカル上で仮URLを発行して、HTTPS通信のテストができる頼もしいやつです。

どんぶラッコ

例えば、 `ngrok http 8080` と入力すると、上記のようなURLが生成されます。赤枠内の https://**毎回変わる**.ngrok.io にアクセスすると、 localhost:8080 にトンネルしてくれる、というわけです

LIFFアプリ(LINE用ミニアプリ)を開発する時に使ったりしますね。

本ブログでも、LIFFアプリを作るご紹介をした時にngrokをご紹介しています。

私は今回、Laravelで作ったシステムをngrokで試してみたかったので早速laravelを php artisan serve で起動して、ngrokコマンドでトンネルしました。

…しかし、読み込みエラーが発生。CSSレイアウトが崩れる崩れる。

The page at https://*** was loaded over HTTPS, but requested an insecure script http://***. This request has been blocked; the content must be served over HTTPS.

どうやら、Laravel Mix で生成した部分が全て http 通信になってしまっており、「お前HTTPSのコンテンツ内にHTTPで通信してる部分があるやんけ！あかんよ！」と言われているようです。

APP_ENV 環境変数によってHTTPS通信を強制する

解決方法としては、 .env ファイル内に記述されている APP_ENV によって条件分岐を作る方法です。

例えば、

• APP_ENV=dev だったらHTTP通信のままでOK
• APP_ENV=prod ( Production の略です ) だったらHTTPS通信を矯正する

などです。

今回は、仮に APP_ENV=ngrok だったら HTTPS通信するように書いてみましょう。

ということで、まずは .env を編集します。

# APP_ENV=dev
APP_ENV=ngrok

次に、条件処理を記述する箇所です。

これについては検索したところ、2通りの対応方法がありました。いずれの方法でも動作することを確認しています(2020年8月25日現在)。

1. AppServiceProviderに記述する方法

app/Providers/AppServiceProvider.php を編集します。

どんぶラッコ

configure/app.php 内の providers 配列をみると、 AppServiceProvider が呼び出されていることがわかりますね。

<?php

namespace App\Providers;

// 追加
use Illuminate\Routing\UrlGenerator;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    // ...省略
    public function boot(UrlGenerator $url)
    {
        if(env('APP_ENV') === 'ngrok')
        {
            $url->forceScheme('https');
        }
    }
}

参考: https://laracasts.com/discuss/channels/laravel/mixed-content-issue-content-must-be-served-as-https#reply=130444

※参考サイトでは forceSchema と記載されていますが、現在の文法では廃止されています。

2. web.php に記述する方法

web.phpに書いてしまう方法もありました。

参考: laravel5.5でhttpsへ変更したら、asset()やurl()がhttpのままだったので、 URL::forceScheme(‘https’);でhttpsに一括変更してみた。 – メサイアワークス

routes/web.php の上部にHTTPSの条件分岐を追加する

if(config('app.env') === 'ngrok'){
    URL::forceScheme('https');
}

Laravelは自由にレイアウトできるところが特徴なので、好きな方を使えばいいです。

ストラクチャ的にはサービスプロバイダとして登録する方が最適解のように思えます。

と言いつつ、今回のプロジェクトは1人開発だったので2の方法を採用しましたが笑

悩んでいる方の解決策になれば嬉しいです！