ローカル環境でWebアプリを立ち上げたがブラウザからアクセスできません

Question

課題

以下の手順でWebアプリの立ち上げを行いました。

sudo yarn install
sudo yarn run dev

別タブで以下を叩くとそれらしい反応は得られるので、アプリが立ち上がっていること自体は間違いなさそうです。

curl http://localhost:3000/

しかしlocalhost:3000にアクセスすると、
以下のメッセージが表示されアプリが表示されません。

このサイトにアクセスできませんlocalhost で接続が拒否されました。
次をお試しください

接続を確認する
プロキシとファイアウォールを確認する
ERR_CONNECTION_REFUSED

なお、ターミナルでは下記のメッセージが表示されています。

$ sudo yarn run dev
yarn run v1.22.11
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
Failed to load ./.env.
Failed to load ./.env.
event - compiled successfully

環境

• MacBook
• 自社環境にSSH接続

別のエンジニアは接続できているので、私の環境設定が問題のようです。

試したこと

• セキュリティソフト「ESET」の設定を疑いましたが、ログを見る限りESETによるブロックではなさそうです。
• Chromeのサイト設定「安全でないコンテンツ > 許可」に変更
• ファイアウォールの解除
• Macの再起動

サポートいただけると嬉しいです。

Comments

[hoshi-takanori]

「自社環境にSSH接続」って、next dev などは ssh 接続先で動かしてるってことでしょうか？
また、普通は yarn に sudo をつける必要はないはず…。

[takhub]

next devはyarnのあとに自動実行されるコマンドですが、yarnコマンドはssh接続先で叩いています。
権限設定に不備があるのか「permission denied」になってしまうため、sudoをつけてyarnを実行している次第です。

[hoshi-takanori]

ssh 接続先ということは、そのまま curl すれば localhost が ssh 接続先ですが、Mac で動いてるブラウザにとっての localhost は Mac なので、ブラウザからは ssh 接続先のホスト名または IP アドレスでアクセスする必要があります。

[takhub]

hoshi-takanori様
返信が大変遅くなり失礼いたしました。ご指摘の通り、SSH接続先のIPアドレスでアクセスする必要がございました。また、ポートが他に利用されていたため、PORT={port num} sudo yarn run devでポート指定することで、無事にアクセスすることができました。ご教示いただきまして、大変ありがとうございました！