Laravel Sailで「このサイトにアクセスできません localhostで接続が拒否されました」

環境

• Laravel 10 + Sail + React
• MacOS

起こったこと

こちらを参考に、「Hello React !」と表示されるか確認しようとすると http://localhost/:8000 で以下のようになりました。

このサイトにアクセスできません
localhost で接続が拒否されました。

コンソールには以下のwarningが出ました。

crbug/1173575, non-JS module files deprecated.

試したこと

• VSCodeのデバッグボタンからlaunch.jsonを作成したが変わらず
• 本当に8000ポートは開いているのか確認→下記で説明

本当にコンテナ内で8000ポートは開いているのか確認する方法

1.Docker コンテナ内でシェルにアクセスし、ポート番号を確認する

$ sail shell

2.コンテナ内で、netstat や ss コマンドを使用してポート番号を確認

$ netstat -tuln | grep 8000

もしくは

$ ss -tuln | grep 8000

ここでエラー

bash: netstat: command not found
bash: ss: command not found

ss コマンドも利用できない場合、おそらく ss コマンドが含まれているツールがインストールされていない可能性があります。

Laravel Sail コンテナ内で ss コマンドを使用できるようにするには、コンテナ内で必要なツールをインストールする必要があります。
コンテナ内でシェルを起動して、以下のコマンドで必要なツールをインストールしてみてください。

$ apt-get update
$ apt-get install -y iproute2

もしくは

$ apk update
$ apk add iproute2

ここでエラー

E: List directory /var/lib/apt/lists/partial is missing. - Acquire (13: Permission denied)

これは、apt-get コマンドが実行されたときにパーミッションの問題が発生していることを示しています。
通常、このエラーメッセージはroot権限がないユーザーが apt-getを実行しようとしたときに表示されることがあります。

Dockerコンテナ内では、多くの場合、デフォルトでroot権限が必要です。
問題の解決には、コンテナ内でroot権限でコマンドを実行するか、適切な権限を付与する必要があります。

コンテナ内でrootユーザーになる
コンテナ内でrootユーザーになってから apt-get コマンドを実行してみてください。

sudo su
apt-get update

ここでエラー

bash: sudo: command not found

まず自分がどのユーザーか調べる

whoami

rootユーザーではないことがわかりました。

Laravel公式より

sail root-shell

上記コマンドでrootユーザーでコンテナ内に入ることができました。

そして下記のようにして sudo コマンドを使えるようにします。

apt-get update
apt-get install -y sudo

次に ss コマンドを使えるようにします。

apt-get install -y iproute2

これでようやく ss コマンドが使えるようになりました。

ss -tuln

私の環境では以下のようになっていました。

Netid        State         Recv-Q        Send-Q               Local Address:Port                Peer Address:Port        Process        
udp          UNCONN        0             0                       127.0.0.11:44566                    0.0.0.0:*                          
tcp          LISTEN        0             4096                    127.0.0.11:44221                    0.0.0.0:*                          
tcp          LISTEN        0             4096                       0.0.0.0:80                       0.0.0.0:*                          
tcp          LISTEN        0             511                        0.0.0.0:5173                     0.0.0.0:*                          

解決方法

目的の8000ポートはありませんでしたが、80の文字があったので試しに下記のように docker-compose.yaml を書き換え、念の為 .envファイルにも追記してみました。

Before

docker-compose.yaml

services:
    laravel.test:
        ports:
            - '${APP_PORT:-80}:80'

After

docker-compose.yaml

services:
    laravel.test:
        ports:
            - '${APP_PORT:-8000}:80'

.env

APP_PORT=8000