Front End Programming
  1. ホーム
  2. ブログ一覧
  3. Gatsbyホットリロード中他のディバイスからアクセスする方法

Gatsbyホットリロード中他のディバイスからアクセスする方法

Gatsbynpm

GatsbyJSでサイト構築中、iPhoneやAndoroidでもチェックしたいですよね?

同じWiFi繋がっているのなら、browser syncみたいにExternalアドレスが使えるはず!

やり方を調べていたら、見つかったのでそのやり方をメモしておきます。

この記事を書いた人

かみーゆ/フロントエンドエンジニア

セブ島在住の気ままなフリーランスエンジニア。テクニカルディレクター・エンジニア講師・ブリッジSEを経て今に至る。CMS concrete5エバンジェリスト。テックブログ以外も「磨耗しない人生の選択」や「海外生活」のライフスタイルについて発信。好きなものは肉とビール。

Read More

PCのIPを指定するだけ

カンタンです。
PCのIPアドレスを指定するだけです。

gatsby develop -H ×××.×××.×××.××× -p 8000

PCのIPに当たる×××.×××.×××.×××の部分はMacだと「システム環境設定」>「ネットワーク」から調べることができます。

Mac「システム環境設定」

Mac「システム環境設定」>「ネットワーク」

IPアドレスをコピーします最後の.(ドット)は不要です。

面倒なので、package.jsonのscriptに登録しておきましょう

毎回コード打ち込むのは面倒なので、package.jsonのscriptにコマンドを登録しておきます。

パソコンのIPは場所が変わったりなどしたら変わります。

気をつけてください。

"dev-m": "gatsby develop -H ×××.×××.×××.××× -p 8000",

あとは以下のコマンドで起動してください。

npm run dev-m

まとめ

これでGatsbyでのサイト構築が楽になりますね!

ちなみに私はラップトップで一度記事を書き、ゴロゴロしながらiPhoneで記事の誤字脱字などをチェックしています。

記事のチェックが終わった後に、GitHubにプッシュし、Netlifyにデプロイしています。

Netlifyは基本無料ですが使用量やビルド数に制約があります

今月頭にNetlifyへ移行しましたが、すでにこんなにBuildしてしまいヒヤヒヤしております。

Mac「システム環境設定」>「ネットワーク」

スマホのゲームで課金する大人の気持ちが少しわかります。。。

最初はこのIP指定の仕方を知らなかったのでエライ目にあってしまいました。

残り105分を大事に使います。

皆さんのコーディングライフの一助となれば幸いです。

最後までお読みいただきありがとうございました。

関連記事もあわせてお読みください

Web制作に関する人気の記事

海外移住・ライフスタイルに関する人気の記事

キャリアアップ・転職に関する人気の記事