未熟学生エンジニアのブログ

TetsuFeの個人開発ブログ

TetsuFeはテツエフイー と読みます。FlutterやWeb周り全般、チーム開発について語るブログ

ポート関連でつまづいた話と、何かを知る・覚えるためにはつまづく必要があるよねという話

僕は液晶タブレットを持っているという話

絵も描かないのに。しかしモニターとしても使えるので、普通にモニターとして使用しています。 HUION Kamvas GT-191 5万円台で買える液タブなので安くて買いました。

閑話休題、表面上の問題

表面上の問題はVSCode拡張機能で起こりました。

僕は、VSCode拡張機能Preview on Web Serverを使っています。

これは、HTMLのリアルタイムプレビューを表示できる拡張機能で、いちいちブラウザを更新しなくていいので便利です。

いつものようにこれを使っていたのですが、いきなりプレビューが表示されなくなりました。

本当にいきなり?

実は、この問題が起こる前に、一回macカーネルパニックを起こし、再起動しました。 これが起こった時、「あ、液タブ繋いでるからだな。」と思いました。 これを思い出して、「多分、変に再起動したからだろう。もう一回再起動すれば治るはず」と思い、再起動。でも、残念ながら治らず。

じゃあ、原因は何か?

きっと、サーバーが閉じてるんだろう。そう思って、サーバーを再起動してみました(Preview on Web Serverは、ローカルサーバーを起動、停止させることができ、そのサーバーにアクセスしてプレビューを表示しています)

$ lsof -I :8000 をすると、やはり何も表示されません。サーバーが起動してないらしい。

  • ウイルスバスターの設定確認(結局どうするかわからず諦めた)
  • Preview on Web ServerのGitHubでコード確認(意味がわからなかったので諦めた)

などしてみましたが、 なんとなく「液タブが原因では?」と気づきました。それしかもう考えられない。

解決法:液タブとの接続を切る

液タブとの接続を切ったところ、正常にサーバーが起動し、HTMLプレビューが表示されました!

ちなみにもう一度液タブをつなぎなおしたところ、そのままプレビューは表示されました。

しかし、なぜ液タブが繋がっていたらサーバーが起動できなかったのか? それは、ポートの仕組みが関係していると考えられます。なぜかというと、液タブに接続すると、イヤホンから音がでなくなるという問題も発生しているからです。(イヤホンジャックもディスプレイも、ポート接続。イヤホンを何回か抜き差しすると治る)これと同じような理屈で、液タブが他のポートにも影響を与えていると考えられそうです。
でもなぜかはよくわからない・・・

終わりに

サーバーが起動しない!という時に、ポートの確認をするということは、実際にサーバーを起動するという機会があって、かつそこでハマらなければ身につかない知識だと思います。

最近では、dockerを使った時に複数コンテナが同じポートを使おうとして干渉していて、ポートの問題にぶち当たりましたが、dockerはそういう意味もいい機会を与えてくれるのかもしれません。ポートの衝突とか、普通一つしかサーバー起動しないのであまり遭遇しない問題だと思うので。特に個人開発では。