Como publicar pasta dist no Heroku

Apresentação de 2 formas práticas com código mostrando como publicar ...

latrova commited 1 ano, 11 meses ago
×

Introdução

Dependendo da configuração que você fizer no seu webpack, na hora de publicar sua aplicação você pode ter gerado apenas uma pasta /dist (ou outra variante como public_html). Neste tutorial, vamos utilizar o React Slingshot que já vem com um app demo e um script de build para gerar o nosso /dist, porém você vai conseguir adaptar este tutorial pra outros casos, como uma aplicação Angular e etc.

Antes de começar

É preciso saber que não vamos programar uma aplicação de exemplo, nem mostrar como criar uma instância no Heroku, para que possamos focar no tópico.

Preparação

Precisamos baixar o nosso projeto e garantir que tudo está funcionando bem. Então para começar, execute:

git clone https://github.com/coryhouse/react-slingshot.git
cd react-slingshot
npm run setup
npm run start -s

Se a aplicação estiver aberta, só precisamos definir mais um detalhe. Tem duas formas de fazer o deploy da sua aplicação para o Heroku. No fim o resultado é o mesmo, mas você precisa definir qual lhe interessa, pois cada uma tem seus prós e contras.

A. Usando express com server side building

  • Ao efetuar o push do nosso código fonte, o Heroku se encarregará de gerar o build dela;
  • Possui mais passos pra configurar e;
  • O deploy fica um pouco mais demorado, pois ficamos aguardando o Heroku finalizar a build pra confirmar o git push.

B. Usando buildpack

  • Teremos de realizar o build local, e fazer deploy da /dist junto do código fonte;
  • O maior contra é que não podemos esquecer de gerar uma nova build antes de enviar nosso código para o Heroku;
  • É muito mais rápido e simples de se configurar.

Express com server side building

Siga os passos, o código estará ao fim deles.

  1. Execute npm install express --save.
  2. Criar um novo arquivo na pasta chamado server.js.
  3. Crie outro arquivo na raiz chamado Procfile (exatamente desta forma, sem extensão nenhuma).
  4. Abra o package.json e adicione aos scripts heroku-prebuild e heroku-postbuild. É necessário que o heroku-prebuild seja definido (ainda que vazio), para que o Heroku não insista em executar o comando build normal.
  5. Ainda no package.json em engines adicione "node": "6.11.1".
  6. Agora execute git rm package-lock.json.
  7. E também git rm yarn.lock.
  8. Basta executar agora: heroku config:set NPM_CONFIG_PRODUCTION=false. Este passo é necessário, pois o Heroku vai necessitar baixar as dependências de desenvolvedor para realizar o build.

Código

Para saber mais sobre o Procfile, dê uma olhada na documentação do Heroku

Buildpack

Siga os passos, o código estará ao fim deles.

Vamos utilizar o buildpack static para este caso.

  1. Primeira coisa a fazer é definir que usaremos este buildpack com o comando: heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git.
  2. Crie na raiz um arquivo chamado static.json.
  3. Agora execute git rm package-lock.json.
  4. E também git rm yarn.lock.
  5. Abra seu .gitignore e remova a pasta dist de lá.

Bem mais rapido comparado a primeira opção, não é? Mas não se esqueça, você tem a obrigação de gerar o build com o comando npm run build (ou outro script que você tenha configurado) e de enviar para o servidor sempre que quiser publicar.

Você pode saber mais sobre buildpacks aqui.

Código

Conclusão

Ótimo, independente do que você optou, agora basta apenas realizar um commit e um push para o Heroku e tudo funcionará como o esperado de maneira bem rápida.

Embora tenhamos usado o React Slingshot como exemplo, você deve notar que não é muito difícil adaptar pra algum caso específico. O angular também gera uma pasta dist, e você pode configurar o seu express/static.json facilmente pra atender suas necessidades.

Referências

blog comments powered by Disqus