初めてwebpack-dev-server を起動してみる。

こんにちは、@yasuです。

前回の記事「Steemit API資料を試してみる」で、webpack-dev-server を起動しても、アクセスできなかった件について、頂いたアドバイスをもとに試してみました。

webpack-dev-server については、こちらウェブサイトを参考にしてください。
https://webpack.js.org/configuration/dev-server/

• 前回と同じ方法で起動
• すべてのインターフェースをリッスンする

前回と同じ方法で起動

package.jsonファイルのscriptの要素を確認します。

cat package.json

現状のオプションでwebpack-dev-server を起動してみます。

./node_modules/.bin/webpack-dev-server --mode development --content-base ./public --port 3000

起動しました。

ブラウザからアクセスしてみますが、

予定通りの画面が開きました。「このサイトにアクセスできません」

すべてのインターフェースをリッスンする

0:0:0:0で待ち受ける。

webpack-dev-server を起動するときのオプションに--host "0.0.0.0"を指定する。

./node_modules/.bin/webpack-dev-server --mode development --content-base ./public --port 3000 --host "0.0.0.0"

アクセスはできているようですが、まだ問題が残っているようです。

おまじないする^^

--disableHostCheck true

これは、webpackバージョン4用で、非奨励のオプションです。webpackバージョン5では、--allowedHosts allで対応できるらしいですが、環境がないので未確認です。

./node_modules/.bin/webpack-dev-server --mode development --content-base ./public --port 3000 --host "0.0.0.0" --disableHostCheck true

正常に表示しました。

最後に

解決のヒントを与えてくださった@rexthetech さんに感謝します。
https://steemit.com/hive-161179/@rexthetech/rjjhk3

ありがとうございました。

いらすとや
steemit サインアップ
steemit 知識
日本語 Steemit Discord (超初心者～誰でも)

Vote for @yasu.witness !
私がSTEEMの成長を助け、Steemiansの成功と繁栄を助けることができると思いましたら、@yasu.witnessに30票の1つを与えてくださると嬉しいです。
Simply go to the Steemit Wallet Witness list, scroll to the bottom, and fill in the form: