Como fazer com que o servidor de desenvolvimento webpack seja executado na porta 80 e na 0.0.0.0 para torná-lo acessível ao público?

180

Eu sou novo em todo o mundo nodejs / reactjs, então peço desculpas se minha pergunta parecer boba. Então, eu estou brincando com o reactabular.js .

Sempre que eu faço, npm startele sempre funciona localhost:8080.

Como faço para alterá-lo para ser executado 0.0.0.0:8080publicamente? Eu tenho tentado ler o código fonte no repositório acima, mas não consegui encontrar o arquivo que faz essa configuração.

Além disso, para adicionar a isso - como faço para rodar na porta, 80se isso é possível?

90abyss
fonte

Respostas:

233

Algo assim funcionou para mim. Acho que isso deve funcionar para você.

Execute o webpack-dev usando este

webpack-dev-server --host 0.0.0.0 --port 80

E defina isso em webpack.config.js

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

Nota Se você estiver usando carregamento a quente, precisará fazer isso.

Execute o webpack-dev usando este

webpack-dev-server --host 0.0.0.0 --port 80

E defina isso em 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()]
Bhargav Ponnapalli
fonte
1
Olá, sou novo nisso, mas gostaria de usar o redux para o meu script de cliente. O problema é que o aplicativo é um aplicativo .net que serve o conteúdo e os pontos de extremidade json. Então, para fazer isso durante o desenvolvimento, preciso adicionar <script src="http://localhost:8080/webpack-dev-server.js"></script>à página e instalar algum plug-in de domínio cruzado? Essas ferramentas parecem interessantes, mas parecem assumir que seu servidor também é um nó ou estou perdendo alguma coisa?
HMR
1
Talvez isso me ajude: webpack.github.io/docs/webpack-dev-server.html#proxy Eu pensaria em usar proxy para tudo, exceto pedidos de arquivos javascript e alguns pedidos feitos pelo servidor webpack, hotloader e cronograma de redux. então /data:image ..., ... .jse/sockjs-node...
HMR
Se você receber um cabeçalho de host inválido, pode ser necessário definir disableHostCheck como true no webpack.serve.config.js. Consulte github.com/webpack/webpack-dev-server/issues/882 . Dependendo da sua situação, pode ser uma falha de segurança, portanto, tenha cuidado.
Brian Deterling
131

Foi assim que eu fiz e parece funcionar muito bem.

No arquivo webpack.config.js, adicione o seguinte:

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

Obviamente, você pode usar qualquer porta que não esteja em conflito com outra. Mencionei a questão do conflito apenas porque passei cerca de 4 horas. lutando contra um problema apenas para descobrir que meus serviços estavam sendo executados na mesma porta.

bkane56
fonte
Acho que isso é, em vez de especificar o host e a porta na seção de entrada do arquivo de configuração?
precisa saber é o seguinte
2
Você poderia adicionar um link para a documentação ?
aguado
1
Simplesmente adicionar inline: true funcionou para mim. Entre o arquivo webpack que editei era 'webpack.dev.conf.js (em março de 2018).
23618 Sean O #
68

Configure o webpack (em webpack.config.js) com:

devServer: {
  // ...
  host: '0.0.0.0',
  port: 80,
  // ...
}
Beder Acosta Borges
fonte
2
não está funcionando para. devServer: {inline: true, host: '0.0.0.0', porta: 8088},
NK Chaudhary
Está funcionando para mim quando eu uso (webpack.config): devServer: {host: 'xx.xx.xx.xxx', porta: 8089},
Dijo
Isso resolveu um problema muito próximo para mim enquanto tentava seguir o curso Reagir com Redux na Udemy . Estou executando meu ambiente de desenvolvimento no Windows em uma caixa virtual do Vagrant . O curso não fornece absolutamente nenhuma orientação sobre a configuração do ambiente de desenvolvimento.
Vince
Sim, isso solucionou um problema que eu estava tendo ao executar o webpack em uma instância do Cloud9. Obrigado!
Maniaque 12/03
Consegui alterar o número da porta usando o snippet acima, mas o host ainda não foi alterado. Tentei fazer o host 0.0.0.0 para poder acessar o site pelo endereço IP, mas não funcionou. Alguma ajuda em como conseguir isso?
Rito 04/10
26

Eu sou novo no desenvolvimento de JavaScript e ReactJS. Não consegui encontrar uma resposta que funcionasse para mim, até descobrir isso visualizando o código react-scripts. Usando o ReactJS 15.4.1+ usando o react-scripts, você pode começar com um host e / ou porta personalizados usando variáveis ​​de ambiente:

HOST='0.0.0.0' PORT=8080 npm start

Espero que isso ajude os novatos como eu.

Anônimo
fonte
16

A seguir trabalhou para mim -

1) Package.jsonAdicione isto:

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

2) webpack.config.jsAdicione isto no objeto de configuração que você exporta:

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

3) Agora no tipo de terminal: npm run dev

4) Depois de # 3 compilar e pronto, vá para o navegador e digite o endereço como http://GACDTL001SS369k:8080/

Espera-se que seu aplicativo esteja trabalhando agora com um URL externo que outras pessoas possam acessar na mesma rede.

PS: GACDTL001SS369kera o nome do meu computador, então substitua pelo que for seu na sua máquina.

Sumeet
fonte
4

Se você estiver em um aplicativo React criado com 'create-react-app', vá para o seu package.jsone altere

"start": "react-scripts start",

para ... ( unix )

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

ou para ... ( vitória )

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

R01010010
fonte
ou edite node_modules / react-scripts / script / start.js e altere DEFAULT_PORT e HOST. Apenas proteja o arquivo sobrescrevendo quando novas versões atualizarem arquivos no npm update.
Rogelio Triviño 11/06
1

A seguir funcionou para mim no arquivo de configuração JSON:

"scripts": {
  "start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},
romano
fonte
1

Eu lutei com algumas das outras respostas. (Minha configuração é: estou executando npm run dev, com o webpack 3.12.0, depois de criar meu projeto usando vue init webpackuma caixa virtual Ubuntu 18.04 no Windows. Tenho vagrant configurado para encaminhar a porta 3000 para o host.)

  • Infelizmente colocando npm run dev --host 0.0.0.0 --port 3000 não funcionou - ainda funcionava no localhost: 8080.
  • Além disso, o arquivo webpack.config.jsnão existia e criá-lo também não ajudou.
  • Então eu encontrei os arquivos de configuração agora localizados em build/webpack.dev.conf.js(e build/webpack.base.conf.jse build/webpack.prod.conf.js). No entanto, não parecia uma boa ideia modificar esses arquivos, porque eles realmente liam HOST e PORT de process.env.

Então, pesquisei sobre como definir variáveis ​​process.env e obtive sucesso executando o comando:

HOST=0.0.0.0 PORT=3000 npm run dev

Depois de fazer isso, finalmente recebo "Seu aplicativo está sendo executado aqui: http://0.0.0.0:3000 " e finalmente consigo vê-lo navegando para a localhost:3000partir da máquina host.

EDIT: Encontrada outra maneira de fazer isso é editando o host e a porta de desenvolvimento config/index.js.

krubo
fonte
1

Para mim: alterar o host de escuta funcionou:

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

foi alterado para:

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

e o servidor começou a ouvir no 0.0.0.0

Ankush
fonte
0

Eu tentei as soluções acima, mas não tive sorte. Notei esta linha no package.json do meu projeto:

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

}

Eu olhei bin/webpack-dev-server.jse encontrei esta linha:

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

Mudei a porta para 3000. Uma abordagem de força bruta, mas funcionou para mim.

Sparky1
fonte
0

No package.json, altere o valor "start" da seguinte maneira

Nota: Execute $ sudo npm start , você precisa usar o sudo para executar scripts de reação na porta 80

insira a descrição da imagem aqui

mokesh moha
fonte
0

Para mim, esse código funcionou. Basta adicioná-lo ao seu package.jsonarquivo:

"scripts": {
    "dev-server": "encore dev-server",
    "dev": "webpack-dev-server --progress --colors",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
},

E execute o script "build" executando npm run build

phrozion
fonte
-1

Eu tentei isso para usar facilmente outra porta:

PORT=80 npm run dev
kyrre
fonte