あらすじ

勉強がてらVueの開発環境を一から自分で作ってみたい！
と思い立ったある日のこと。
いろいろ調べるうちに便利そうなのあるやんと、Vue-cliを発見。

ネットサーフィンをしながら情報を集めて、いろいろ設定を進めると無事に出来上がった模様。
（立ち上げ方はネットに死ぬほど落ちてるので、本記事では割愛）

えっめっちゃ楽やん！とか思ってました。
ただ、まだこの時はどハマりするとは思っていませんでした...。

設定完了後、黒い画面(console)に

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://***.***.***.***:8080/ //<- *の部分は自分のIPだよ

ここに接続して確認するのね。と、クリックすると接続エラー画面を連発、、、
表示してくれ！と願いを込めて押すリロードボタンは空回るばかり。
どちらもダメです。
たまに時間を置くと、まぐれで画面が表示するけど、またしばらくすると接続エラー...。

不安定すぎて、開発できねーよ(T-T)、、、とか思いながらいろいろ調べたけど解消できず、半日が経過。
精気を全て奪われ、社内のインフラ担当に相談して無事に解決した件を忘備録。

原因は2つありました。

社内のセキュリティーにesetを使用していた。

まずこれ！
単にlocalhost:8080の接続を許可していなかった。
これは僕の方で設定できなかったので、権限がある人に許可できるよう追加設定してもらいました。
するとlocalじゃなくて、Networkのほうのリンクは効く！画面が表示されました。
「ほほう、新人インフラくんやるやん！」と褒めてあげます。
ただまだ肝心のhttp://localhost:8080が接続エラー。

IPv6の設定が邪魔してる？

すると新人くんまたまたファインプレー。
試したいことがあります。と言って
黒い画面を召喚。

$ sudo vi /private/etc/hosts

魔法のコマンドを発動。
sudo（アカウントの権限）でetcディレクトリのhostsファイルをviで編集するという意味のようです。
その後パスワードを求められるので、アカウントのパスワード（パソコン自体やつね）を入力。

すると！
こんな画面が表示されます。

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
***.***.***.***  localhost
***.***.***.***  broadcasthost
::1              localhost

※IPは*で隠してます。

Host Database...よくわかりません。
新人インフラくん曰く、IPアドレスに名前をつけておく管理ファイルのようです。

原因はここ。

***.***.***.***  localhost
***.***.***.***  broadcasthost
::1              localhost

この部分の3行目が悪さしてました。
あんまりよく理解してないので、間違っていたらご指摘・補足を。

1行目のlocalhostはIPv4です。
3行名のlocalhostはIPv6です。

簡単に説明するとIPV4は0〜255を.で4つ繋いだもので、よく見るIPアドレス。
これが枯渇してきている問題があるので、新しいIPフォーマットを作ろう！
というので出てきたのがIPv6。

実際にはまだ使っていないのですが、使っているMacでは設定箇所が効いてる模様。

::1              localhost

これを

# ::1            localhost

このようにコメントアウトします。
（viの入力モードはaキーを押します。入力モード解除はescキー）

そのあと:wq(wは保存/qは終了)と打って元の画面に戻ります。

改めて画面を確認すると、無事にVueの画面が表示されてました。よき。
※強めのキャッシュが効いている可能性もあるので、本当に変わっているかどうかを確認するには違うブラウザで試してみるといいですよ。

Ipv6はこれから徐々に浸透していくみたいです。
でもまだ使う予定はないので、今はまだコメントアウトしておくほうがいいかもしれないですね。

ちなみにMacのシステム環境設定 -> ネットワーク画面にある右下の詳細からIPv6の設定がありますが、
ここの設定をいじっても ちゃんと表示できませんでした、、、なぜ？