Tutoriais

Atendimento em horário comercial via chat

Como hospedar uma aplicação NodeJS com backend e frontend

Neste guia você aprenderá como hospedar sua aplicação NodeJS já criada ou em desenvolvimento, em duas partes distintas, porém que se comunicam: O backend, com as regras de negócio que vão servir sua aplicação e toda requisição feita a ela e o frontend contendo a parte visual de sua aplicação, o que o usuário irá enxergar quando acessá-la em um primeiro momento.

A primeira coisa que é de extrema importância ser pontuada é que sua aplicação deve ouvir da porta 3000 quando hospedada aqui conosco pois essa seria a porta em que utilizamos para ser mapeada para fora da hospedagem qualquer requisição feita de sua aplicação.

Mais tecnicamente falando, o proxy reverso age como intermediário recebendo e repassando as requisições do cliente para o servidor web. Dito isso, somente é aceito aqui na Umbler uma aplicação por vez estar ouvindo dessa porta.

Para mais informações a cerca disso pode verificar esse artigo: Node.JS na Umbler – Central de Ajuda

Dito isso, temos duas opções que podem ser utilizadas para efetuar o upload de sua aplicação com backend e frontend aqui na Umbler.

Hospedar um sub-domínio

  • A primeira abordagem você precisaria ter um site que conteria apenas os arquivos referente ao frontend da aplicação hospedada, por exemplo, no domínio meusiteex.com. E para a parte do Backend você deve registrar um novo site sendo um subdomínio do principal, que temos esse artigo Adicionando Subdomínio – Central de Ajuda (umbler.com) mostrando como fazer isso.
  • O subdomínio pode ser, seguindo o mesmo contexto do frontend, o app.meusiteex.com ou api.meusiteex.com (qualquer um dos modos funciona normal), é recomendado deixar assim para não precisar registrar um domínio completamente diferente e você saber que aquele subdomínio é referente aquele domínio principal.
  • Mas pode registrar um domínio novo se optar que funciona igual, fica a seu critério.

mceclip0.png

Hospedagem do Backend da aplicação

mceclip1.png

Hospedagem do Frontend da aplicação

No frontend, por exemplo no arquivo principal de sua aplicação você poderia ter o seguinte trecho consumindo o conteúdo do backend pelo Fetch que é um método nativo do Javascript que consome recursos de forma assíncrona através da rede de uma maneira bem simples:

async function getDataFromBackend() {
        try { 
            const response = await fetch('https://app.meusiteex.com') // Faz a conexão com a API da aplicação
}
}

Ali dentro dos parênteses logo após o Fetch você colocaria a URL do backend de sua aplicação onde está o conteúdo que está associado ao subdomínio criado.

O 'response' receberia esse conteúdo vindo diretamente do seu backend que você pode manipular para exibir no seu frontend da forma que achar melhor 🙌

Merge do backend e frontend

  • A segunda abordagem seria menos organizada mas também funciona e dá o resultado que você necessita caso não possua um site tão grande ou que esteja apenas utilizando para algum estudo, teste ou algo do tipo.
  • Consistiria em mesclar sua aplicação com o backend e frontend em apenas uma, todos na mesma aplicação ouvindo a porta 3000 e cumprindo todos os requisitos básicos para sua aplicação rodar corretamente, como já está descrito nos demais artigos de ajuda que temos disponíveis. Essa única aplicação seria capaz de responder tanto as rotas de frontend (/, /index, /sobre) quanto as rotas de API (/api/v1/produtos) etc.

Possíveis erros

Se você testa sua aplicação localmente tudo funciona normal mas após fazer o deploy para produção pode se deparar com o seguinte erro:

erroCors.jpgIsso acontece devido a um mecanismo de segurança presentes nos navegadores chamado de same-origin policy. Ele é usado para limitar como um documento ou script de uma origem pode interagir com recursos de outra origem.

São diversos os tipos de erros de Cors, porém, os casos mais comuns são com os de requisições Javascript que utilizam XMLHttpRequest ou Fetch APIs, caso utilizou esse conteúdo para consumir sua API. Para esses casos vamos entender como podemos solucionar corretamente esse problema.

Esse erro é facilmente resolvido em aplicações NodeJS instalando a seguinte dependência: cors - npm (npmjs.com) e logo após fazendo a requisição do Cors dentro do backend principal de sua aplicação para a dependência ser de fato utilizada:

const express = require('express')
const app = express()
const cors = require('cors') // faz a requisição da dependência

app.use(cors()) // chama na aplicação no inicio

Importante efetuar a requisição do Cors no inicio antes do app.use() que de fato vai realizar as requisições dos serviços da sua aplicação mesmo para ter certeza de que o Cors vai filtrar todas as requisições de sua aplicação e não vai deixar nenhuma requisição sem ser filtrada.

Qualquer outro problema, fique à vontade para nos chamar pelo suporte para esclarecer qualquer dúvida!