すべてのデバイスをあなたのサイト

今日の主題はニッチな使用例であるかもしれません、しかし、私には信じない理由があります.
あなたがあなたのウェブサイトを開発していると言いましょう.他のオペレーティングシステムでもおかしなことを確認したいので、仮想マシンのどちらかを使うことができますParallels Desktop , 適切なVMWare 製品VirtualBox ) または1つ以上の異なるOSSを実行している実際の第2のコンピュータ.または、その問題については、サイトがどのように携帯電話やタブレット上でどのように見えるかについても同様に心配しています.そして、それを決定するために、ブラウザのエミュレーションモードに依存しないでください.
要するに、devモードでは、devのマシン以上でローカルにテストしたいです.
このような場合には、他のデバイスがdevマシン上で動作するウェブサイトのローカルdevサーバを「見る」ことができるようにする必要がありますlocalhost インスタンス.どうするか

そのアドレスを見つける

答えはあなたのLAN上のdevマシンのIPアドレスにあなたの他のデバイスを指すことです.それは、それらのデバイスがあなたのマシンのlocalhost 次の形式のURLを使用したインスタンス

http://[IP address]:[port number]

例えば、あなたのdevマシンのIPアドレスが192.168.254.10で、選択されたdevメソッドがポート3000を使用するなら、あなたのデバイスはhttp://192.168.254.10:3000 . 港については、それぞれ以下のようにしますstatic site generator ( SSG )または他のプロジェクトタイプについて議論します.
さて、どのようにそのアドレスを発見を歩いてみましょう.

MacOS

Macで、あなたの選択した端末のアプリに入ると入力します.

ifconfig | grep broadcast

.○○.一つ以上の行が表示されます.

inet 192.168.254.10 netmask 0xffffff00 broadcast 192.168.254.255

The address you want すぐ後のinet . (複数可ならばinet 行、次の任意のアドレスをすぐに使用することができますinet 行では

Windows

Windowsでコマンドプロンプトを開き、結果画面に入力します.

ipconfig

インthe resulting display , あなたが始まる行から希望のアドレスを取得しますIPv4 Address , このように:

IPv4 Address. . . . . . . . . . . : 192.168.1.49

Linux

Linuxでは、multiple choices どうでしょう?しかし、最も簡単なことは、端末アプリケーションでこれを入力することです.

hostname -I

.○○.IPアドレスを報告します.

どこへ行くかを教えてください

さて、プロジェクトのdevサーバを設定するだけではなくlocalhost . プラットフォームが既にdevアドレスで実行するときに、プラットフォームが既にIPアドレス(あなたの便宜のためにそれを表示している)を使用しても、何らかの理由でポートを変更したいかもしれません.

エレベーター

前バージョン2を使用している場合.のバージョンEleventy SSG , ITSBrowsersync dependency デフォルトでは、devモードで「HERUTHERN」を実行すると、正しいIPアドレスが表示されます.を参照してください.Xと上記では、組み込みのdevサーバはデフォルトでは動作しませんが、edit its settings に.eleventy.js 行を追加することによってshowAllHosts: true (the showAllHosts デフォルト設定はfalse ).
デフォルトでは、EureMenのdevサーバはポート8080を使用します.別のポートを使いたいなら、.eleventy.js ( 2 . x +の組み込みサーバとのBrowserSyncで、またはeleventy コマンドを使う--port ここではポート3000を指定しています.

npx @11ty/eleventy --serve --port=3000

(The --serve フラグはプロジェクト中に変更を監視し続けます.

ヒューゴ

とHugo SSGは、あなたがしたいと思うよadd the --bind and --baseURL flags いつものhugo server コマンド.例として、IPアドレス( hugoのデフォルトdev port 1313 )を使用します.

hugo server --bind=0.0.0.0 --baseURL=http://192.168.254.10:1313

ポート番号をデフォルトから変更するにはadd a -p or --port flag そして、--baseURL フラグに応じて.ポート1313よりポート3000を使うには、次のように入力します.

hugo server --port 3000 --bind=0.0.0.0 --baseURL=http://192.168.254.10:3000

(ポートを変更することはできません--baseURL 値また、-p or --port フラグ)

アストロ

とAstro SSGuse the --host flag with astro dev ; 例えば:

astro dev --host 192.168.254.10

デフォルトではポート3000を使いますが、adding the --port flag . あなたもset these parameters プロジェクトの中でastro.config.mjs ファイル.

次。js

あなたが走っているならばNext.js , use the -H flag with npx next dev ホスト名を目的のIPアドレスに設定します.別のポートをデフォルトの3000から使用するにはuse either the -p flag or the PORT environment variable — PORT=3000 , 例えば、後者はプロジェクトの中では設定できません.env ファイル.また、これらのパラメータをプロジェクトのnext.config.js ファイル.

ギャツビー

使用する場合Gatsby , use the -H or --host flag with gatsby serve ホスト名を目的のIPアドレスに設定します.ポートをデフォルト値9000から変更するにはuse the -p or --port flag .

Nuxtjs

With Nuxt.js , use the HOST and (if desired) PORT environment variables with npm run dev 上の例を使用します(ここでポートを変更するのは、デフォルトでは3000です).

HOST=192.168.254.10 PORT=8000 npm run dev

ドキュメントはこれらの設定を扱うためにサイトの設定ファイルを使用することに対して助言します.

ジキル

使用Jekyll ? 用途either the -H or --host flag with jekyll serve ホスト名を目的のIPアドレスに設定します.ポートをデフォルトの4000から変更するには-P or --port フラグ.あなたもset these parameters プロジェクトの設定ファイルで_config.yml or _config.toml ).

ライブコードサーバーで

SSGSから助けを借りずに手のコードを好む人々のために、ここではどのように人気のある上記の設定を行いますLive Server Visual Studioコードの拡張機能:

To set the hostname to the desired IP address , 用途liveServer.settings.host (デフォルトは127.0.0.1 ).

To set the port , 用途liveServer.settings.port (デフォルトは5500 ).

スクリプトに固執する

最後に、SSGについては、これらの変更をshell scripts . 私は、私が彼らなしでこのものをしないとあなたに保証することができます.例えば、ここではstart Hugoで開発したシェルスクリプト

#!/bin/sh

rm -rf public
hugo server --port 3000 --bind=0.0.0.0 --baseURL=http://192.168.254.10:3000 --buildFuture --panicOnWarning --disableFastRender --forceSyncStatic --gc

ジャスト・インプット./start.sh 私の端末のアプリには常に簡単には、タブを適切にオープンhugo server 私が走らせるたびに、すべてのそのジャズを再入力するhugo server .
もちろん、スクリプトを使用するプロジェクトでpackage.json , それは、使用を覚えているのと同じくらい単純かもしれませんnpm run start or npm run dev , あなたが編集したと仮定してくださいstart or dev 我々がこのポストで議論した仕様を含むスクリプト.それでもあなたがプロジェクトの間で行ったり来たりするならばpackage.json , あなたはいつもあなたの筋肉の記憶を最大限に活用することができますstart シェルのスクリプトを各プロジェクトの場合でもpackage.json -プロジェクトを使用して、スクリプトの唯一のコンテンツはnpm run start . 1
イメージ信用:Fotis Fotopoulos ; Unsplash
さらに、あなたの端末アプリはとにかく、それを覚えておくべきです.確かに、また、私が言及した孤独なコマンドのうちの1つを再実行することもできましたが、私はまだシェルスクリプトを使用することを奨励しています.畝↩