Fazer Deploy de Apps Frontend

Para fazer deploy de um aplicativo frontend na Hostman, vá até a seção Plataforma de Apps e clique em Criar aplicativo.

Etapa 1. Tipo de aplicação

Na aba Frontend, selecione o framework do seu projeto e a versão desejada do Node.js.

Etapa 2. Repositório e branch

Você pode conectar um repositório das seguintes formas:

• A partir do GitHub, GitLab ou Bitbucket. Clique no nome da plataforma, faça login e selecione o repositório desejado. Se você já estiver logada, a Hostman exibirá automaticamente os repositórios disponíveis.
• Via URL. Forneça o link de um repositório criado em qualquer plataforma. Clique em Conectar repositório via URL e insira a URL Git do repositório. Se o repositório for privado, informe também os dados de acesso.

Leia mais sobre como conectar repositórios aqui.

Em seguida, selecione a branch para o deploy.

Por padrão, a opção Compilação pelo último commit executado vem ativada. Nesse modo, a Plataforma de Apps faz o deploy do commit mais recente e reconstrói automaticamente o app sempre que novos commits forem adicionados ao repositório. Se necessário, você pode desativar o deploy automático posteriormente.

Se quiser selecionar manualmente um commit específico, desative essa opção.

Etapa 3. Localização do servidor

Selecione a localização do servidor.

Para todos os apps frontend, oferecemos uma configuração básica de servidor com 1 GB NVMe e limite de 200 mil requisições por mês.

Etapa 4. Configurações do app

Nesta etapa, você pode:

• definir o comando de build;
• instalar as dependências necessárias;
• especificar o diretório de build;
• definir variáveis de ambiente.

A Plataforma de Apps sugere automaticamente um comando de build e um diretório de build para o seu projeto. Você pode editá-los se necessário, mas na maioria dos casos nenhuma alteração é necessária.

O Build Command do app é sempre executado a partir da raiz do repositório, portanto o arquivo package.json também deve estar na raiz. Se o package.json estiver em outro diretório, você deve especificar esse caminho no comando de build. Por exemplo, se o package.json estiver no diretório landing, o comando de build deve ser:

npm run --prefix landing build

Na seção Dependências, você pode informar pacotes do sistema necessários, por exemplo, para fazer o build do projeto.

Todos os pacotes listados serão passados para o comando apt install. Se precisar instalar vários pacotes, liste-os separados por espaço.

O parâmetro Diretório de Build não altera o diretório a partir do qual o comando de build é executado.
Ele apenas define o caminho (relativo à raiz do repositório) para o diretório que conterá os artefatos gerados, como o index.html.

Você também pode definir variáveis de ambiente, caso o projeto exija.

Todas essas configurações podem ser alteradas posteriormente, e o deploy pode ser executado novamente com os novos parâmetros.

Etapa 5. Informações do app

Aqui você pode definir um nome e um comentário para o app, que serão exibidos no Dashboard da Hostman. Também é possível selecionar um projeto ao qual o app será adicionado.

Essas configurações também podem ser alteradas depois.

Etapa 6. Fazer deploy

Clique em Pedido. Assim que o processo começar, o log de deploy ficará disponível na aba Implantar.

O log de deploy contém todas as informações necessárias para identificar e resolver possíveis problemas. Se algo der errado, por exemplo, devido a erros no código, o log exibirá uma notificação indicando a causa do problema.

No primeiro deploy de um projeto, a instalação do servidor pode levar alguns minutos. Quando o processo for concluído, o status do app será atualizado e essa informação também aparecerá no log.

Pronto!

Você pode encontrar e copiar a URL do app (o domínio técnico vinculado a ele) na página principal da seção Plataforma de Apps ou na aba Configurações do app. Também é possível conectar um domínio próprio ao aplicativo.

O app ficará disponível nas portas 443 e 80.

No futuro, a Plataforma de Apps irá monitorar atualizações no repositório e, se o deploy automático estiver ativado, reconstruirá o projeto automaticamente sempre que houver novas alterações.