Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Deploy Webpack

Olá, estou tentando deployar minhar aplicação para o heroku mas não estou conseguindo, tive como base o projeto do curso. Alguém pode me informar o processo para fazer da maneira correta?

7 respostas

Difícil dizer, porque cada host possui suas regras de deploy. Aliás, até onde eu sei, o heroku tem um bom suporte, sugiro entrar em contato com eles.

Porém, se você compartilhar mais informações sobre o problema, pode ser que eu e outros alunos do fórum possam lhe ajudar.

Qual erro acontece?

Eu precisei adicionar a seguinte configuração:

devServer: {
        disableHostCheck: true
    },

no webpack.config. pois estava mosntrando o seguinte erro: "invalid host header".

no package.json adicionei a seguinte linha:

"start": "webpack-dev-server --port $PORT --host 0.0.0.0 "

porém com essa configuração não consigo subir o projeto localmente. Com as configurações conseguir fazer deploy no heroku, porém queria algo mais genérico que não apresentasse problema localmente.

Vale a pena eu esclarecer um ponto. Jamais, em hipótese alguma o dev server deve ser usado em produção. O nome já diz "dev server". Ele é para ser usado em tempo de desenvolvimento, é uma ferramenta. O que você coloca em produção é o resultado do build do seu projeto em um servidor que você escolher. Esse é o ponto que o esta travando.

Tudo bem, porém se eu retiro ocorre erro no deploy: "Invalid host header"

solução!

Você esta subindo para o servidor apenas o conteúdo da pasta dist, resultado do build do projeto? É isso que você deve subir e mais nada, todo o restante é ferramental de desenvolvimento.

O conteúdo da pasta dist precisa estar hospedado em um servidor estático da sua escolha, Php, Java, Node, etc. Essa escolha é feita por você.

Veja um exemplo do conteúdo da pasta dist:

Conteúdo da pasta dist:

0.bundle.js
f4769f9bdb7466be65088239c12046d1.eot
448c34a56d699c29117adc64c43affeb.woff2    
fa2772327f55d8198301fdb8bcfc8158.woff
89889688147bd7575d6327160d64e760.svg    
index.html
bundle.js                
styles.css
e18bbf611f2a2e43afc071aa2f4e1512.ttf    
vendor.bundle.js

Webpack é um module bundler, durante o curso aprendemos a fazer o build de produção. É o resultado do buid de produção (resultado do npm run build-prod) que você deve colocar no seu servidor de preferência e na sua hospedagem de preferência. O Node.js utilizado no projeto é só para ambiente de desenvolvimento.

Entendi. Obrigado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software