Laravel SailでSSL(HTTPS)接続するには

Laraveでアプリケーションを開発しているする場合、Laravel Sailを使うと「http://～」でプロジェクトにアクセスできます。

しかし、使用する機能によっては（たとえばWebRTCを使う場合）、「https://〜」でアクセスする必要があります。

「Sail-SSL」は、Laravel SailでHTTPS接続を設定するためのプラグインです。

Sail-SSLを使うと、Laravel Sailで簡単に「https://〜」にアクセスできるようになります。

Sail-SSLの導入

すでにLaravel Sailを使ったアプリケーションが存在する場合は、次の手順で導入できます。

(1) Laravel Sailを起動します。

./vendor/bin/sail up -d

(2) 以下のコマンドを実行して、Sail-SSLをインストールします。

./vendor/bin/sail composer require ryoluo/sail-ssl --dev

「composer require ryoluo/sail-ssl –dev」は、Sail-SSLをインストールするためのコマンドです。
このコマンドを実行すると、Sail-SSLのプラグインがインストールされます。

(3) 以下のコマンドを実行して、SSLを有効にします。

./vendor/bin/sail artisan sail-ssl:install

「sail-ssl:install」は、Sail-SSLを使ってSSLを有効にするコマンドです。
このコマンドを実行すると、Nginxの設定が変更され、HTTPS接続が有効になります。

(4) 以下のコマンドを実行して、Laravel Sailを再起動します。

./vendor/bin/sail down
./vendor/bin/sail up

コンテナーが起動したら「https://localhost」でアクセスできるようになります。

リンクのURLがhttpになっています。
httpsでアクセスするように設定します。

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

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        URL::forceScheme('https');
    }

httpsでアクセスできるようになりましたが、まだViteがhttpsに対応していません。
httpsとhttpが混在するとMixed Contentのエラーになります。

「vite-plugin-basic-ssl」をインストールして、ViteをSSLに対応します。

npm i -D @vitejs/plugin-basic-ssl

インストールが完了したら、「vite.config.js」を編集します。

// vite.config.js
import basicSsl from '@vitejs/plugin-basic-ssl'

export default {
  plugins: [
    basicSsl()
  ]
}

以上で、自己証明書が作成され、httpsでアクセスできるようになります。