0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ChromeBookの仮想Linuxに入れたVScodeでLiveサーバーを起動し、同NW内の他端末からアクセスする

Posted at

やり方を忘れることはないと思うが、念のため備忘録として。
安上がりな開発環境端末としてはchromebook案外良いなと思う。

経緯

・11年前のMacbookProがとうとうポンコツになってきた
・Webとsshを使えれば何でもよく、LenovoのN100搭載ChromeBookを買ってみた
・ChromeBookの持ち運びやすさも相まって使用頻度が増え、それ単体で色々やってみたくなった
・ChromeBook内の仮想LinuxにVScodeを入れて単体で言語(JavaScriptなど)の勉強をしてみたくなった
・VScodeのLiveサーバー便利だけど、iPhoneからアクセスしたときのページの見た目とか気になる

試したこと

仮想Linux上ではlocalhost:5500/test/index.htmlへアクセスすればLiveサーバーで立ち上げたページを見ることができる状態である。
仮想Linux内のIPアドレスを見つけて、iphoneでlocalhost部分を置き換えてアクセスしようとlinuxでip addr showを叩いたところ、どう見ても家のNWのIPアドレスとは違う。
ChromeOS内で仮想Linuxを立てている関係上、内部で仮想NW作ってブリッジしたりよしなにやっているらしい
また、ChromeOSのブラウザ上でもlocalhost:5500/test/index.htmlで見ることができるので、iPhoneでChromeOSのIPアドレスで置き換えてアクセスしてみたが、それでもダメ。

対処法

ChromeOSと仮想Linuxの間でポートフォワードだけしてあげれば良いらしく、またその設定が簡単にできるようだった。

ChromeOSの「設定」を開く
設定内検索窓で「ポート」と打ち込み検索
ポートフォワード設定があるので、仮想Linuxで使用してた5500番ポートを指定
これだけで、同じNWの別端末からChromeOSのIPアドレス:5500/test/index.htmlと打つことで接続ができるようになった。
image.png

testとしか書いていないが、iPhoneからもアクセスができた。
IMG_7541.png

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?