👀

ローカルサーバーでお手軽に実機確認をする

2021/10/10に公開

Webサイトの制作の中でモバイルの表示を確認する際、ディベロッパーモードだけでなく実機でも確認したい！でも何回もサーバーにアップロードし直すのはダルい！という場面があると思います。

そんな時に使える簡単テクニック。Macを使用しているという前提で書きます。

①ターミナルで該当フォルダのディレクトリに移動

cd フォルダのパス

ターミナルにドラッグ&ドロップでパスを自動で入力できます。

python3 -m http.server 8000

でローカルサーバーを立ち上げます。

ローカルサーバーにアクセスするにはIPアドレスが必要なので、調べます。

システム環境設定-->ネットワーク

で調べることができます。

あとはモバイル端末で

http://IPアドレス:8000/ファイルのパス

にアクセスすればOKです。

モバイルがApple製品ならHandoffを有効にしておくことで、クリップボードが共有され（例えばMacでコピーした内容をモバイルでペーストできる）シームレスに確認作業ができて便利です。

ローカルサーバーにアップロードされたファイルは変更内容が即座に反映されるのでディベロッパーモードで見るのと同じような感覚で確認できます。

作業が終わったらローカルサーバーを停止しないと次から起動できなくなるので、必ず停止させます。

control + c で停止できます。

以上ローカルサーバーで実機確認をする手順でした。
誰かに確認してもらう時などに便利かも。