web-dev-qa-db-ja.com

Webpack devサーバーをパブリックにアクセス可能にするためにポート80と0.0.0.0で実行するにはどうすればいいですか？

私は自分のqsがばかげて聞こえたらとても謝罪します。だから私はここでこのreactjsアプリで遊んでいます： https://github.com/bebraw/reactabular

私が "npm start"をする時はいつでもそれは常にlocalhost：8080上で走る

パブリックにアクセスできるようにするには、0.0.0.0：8080で実行するように変更するにはどうすればよいですか？上記のリポジトリでソースコードを読み込もうとしましたが、この設定を行うファイルが見つかりませんでした。

それに加えて - それが可能であるならばどのように私はそれをポート80で実行させるのですか？

ありがとう。

node.jsreactjsnpmwebpackwebpack-dev-server
156
90abyss

このようなものは私のために働いた。私はこれがあなたのために働くべきだと思います。

これを使用してwebpack-devを実行してください。

webpack-dev-server --Host 0.0.0.0 --port 80

そしてこれをwebpack.config.jsに設定します。

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
     config.paths.demo
 ]

注 ホットロードを使用している場合は、これを実行する必要があります。

これを使用してwebpack-devを実行してください。

webpack-dev-server --Host 0.0.0.0 --port 80

そしてこれをwebpack.config.jsに設定します。

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
    'webpack/hot/only-dev-server',
     config.paths.demo
 ],

....
plugins:[new webpack.HotModuleReplacementPlugin()]
199
Bhargav Ponnapalli

これが私のやり方であり、それはかなりうまくいっているようです。

Webpack.config.jsファイルに以下を追加してください。

devServer: {
    inline:true,
    port: 8008
  },

明らかにあなたは他のものと衝突していないどんなポートでも使うことができます。私は私が約4時間を費やしたという理由だけで紛争問題に言及します。私のサービスが同じポートで実行されていることを発見するためだけに問題と戦っています。

120
bkane56

次のようにwebpackを設定します（webpack.config.js内）。

devServer: {
  // ...
  Host: '0.0.0.0',
  port: 80,
  // ...
}
56
Beder Acosta Borges

私はJavaScript開発とReactJSに不慣れです。 react-scriptsコードを見ることによってそれを考え出すまで、私は私のために働く答えを見つけることができませんでした。 ReactJS 15.4.1以降でreact-scriptsを使用している場合は、環境変数を使用してカスタムのホストやポートから始めることができます。

Host='0.0.0.0' PORT=8080 npm start

うまくいけば、これは私のような新人に役立ちます。

22
Anonymous

以下は私のために働いた -

1）Package.jsonにこれを追加します。

"scripts": {
    "dev": "webpack-dev-server --progress --colors"
}

2）webpack.config.jsに、エクスポートしたconfigオブジェクトの下にこれを追加します。

devServer: {
    Host: "GACDTL001SS369k", // Your Computer Name
    port: 8080
}

3）今ターミナルタイプで：npm run dev

4）＃3がコンパイルされ準備ができたら、ブラウザに直接アクセスしてhttp://GACDTL001SS369k:8080/としてアドレスを入力してください。

あなたのアプリは、うまくいけば、他の人が同じネットワーク上でアクセスできる外部URLで動作しているはずです。

シモンズ：私のコンピューター名はGACDTL001SS369kなので、あなたのマシン上のあなたのものは何でも置き換えてください。

12
Sumeet

'create-react-app'で作成されたReactアプリケーションを使用している場合は、自分のpackage.jsonに移動して変更します。

"start": "react-scripts start",

〜（ unix ）へ

"start": "PORT=80 react-scripts start",

またはへ...（ win ）

"start": "set PORT=3005 && react-scripts start"

4
R01010010

以下はJSON設定ファイルで私のために働きました：

"scripts": {
  "start": "webpack-dev-server --Host 127.0.0.1 --port 80 ./js/index.js"
},
1
Roman

私は他のポートを簡単に使うためにこれを試しました：

PORT=80 npm run dev
0
kyrre

私は上記の解決策を試しましたが、運がありませんでした。私は自分のプロジェクトのpackage.jsonでこの行に気付きました：

 "bin": {
"webpack-dev-server": "bin/webpack-dev-server.js"

、

bin/webpack-dev-server.jsを見て、この行を見つけました：

.describe("port", "The port").default("port", 8080)

私はポートを3000に変更しました。少し力ずくのアプローチですが、それは私のために働きました。

0
Sparky1

私は他のいくつかの答えに苦労しました。 （私のセットアップは、WindowsのUbuntu 18.04仮想ボックスでnpm run devを使ってプロジェクトを作成した後、webpack 3.12.0でvue init webpackを実行しています。ポート3000をホストに転送するようにvagrantを設定しました。）

  • 残念ながらnpm run dev --Host 0.0.0.0 --port 3000を入れることはうまくいきませんでした---まだlocalhost：8080上で走っていました。
  • さらに、ファイルwebpack.config.jsは存在せず、作成しても役に立ちませんでした。
  • それから私は設定ファイルがbuild/webpack.dev.conf.js（そしてbuild/webpack.base.conf.jsとbuild/webpack.prod.conf.js）に置かれているのを見つけました。ただし、これらのファイルは実際にはprocess.envからHostとPORTを読み取るため、これらのファイルを変更することはお勧めできません。

そこで、 process.env変数の設定方法 について調べ、次のコマンドを実行して成功しました。

Host=0.0.0.0 PORT=3000 npm run dev

これを実行した後、私はついに "あなたのアプリケーションはここで実行されています： http://0.0.0.0:3000 "を得て、私はついにホストマシンからlocalhost:3000を閲覧することによってそれを見ることができます。

編集：それを行うための別の方法は、config/index.jsのdev Hostとportを編集することです。

0
krubo

私のために：リスニングホストの変更はうまくいきました：

.listen(3000, 'localhost', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

に変更されました：

.listen(3000, '0.0.0.0', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

そしてサーバは0.0.0.0でリッスンし始めました

0
Ankush