Como publicar uma aplicação front-end utilizando Node.js

Neste tutorial, você aprenderá como publicar uma aplicação front-end utilizando Node.js, seja ela desenvolvida com React.js, Angular ou outros frameworks JavaScript. Você verá os principais passos necessários para preparar, configurar e disponibilizar sua aplicação na Hospedagem Elástica.

1. Acessando o Painel de Gerenciamento da Hospedagem

Primeiramente, acesse o painel da Hospedagem Elástica, com os dados do seu usuário.

2. Selecione a aplicação que deseja publicar uma aplicação

Em seguida, após fazer o login, selecione o seu serviço Node.js dentro da sua aplicação. Neste exemplo, utilizaremos “Treinamento”:

3. Criando uma build da aplicação

Na sequeência, gere o build, que é a versão final e otimizada de uma aplicação front-end, gerada a partir do código-fonte para que possa ser publicada em um servidor e acessada pelos usuários através do navegador.

Existem duas formas de gerar o build da aplicação: diretamente no servidor ou em seu ambiente de desenvolvimento local. Neste tutorial, utilizaremos a segunda opção, gerando o build localmente e enviando para o servidor apenas os arquivos resultantes da compilação.

Os comandos mais comuns são:

• React.js:

npm run build

• Angular

ng build

4. Realizando o deploy da aplicação para a hospedagem

Em seguida, com a aplicação devidamente preparada, realize o deploy para a Hospedagem Elástica da Brasil Cloud. O deploy poderá ser realizado por uma das seguintes formas:

4.1. Deploy via FTP para publicar uma aplicação

O FTP é uma maneira clássica e simples de enviar arquivos para o servidor. Realize o seu acesso FTP seguindo um dos tutoriais abaixo:

Tutorial: Como acessar o FTP pelo FileZilla no novo Painel da Hospedagem Elástica

Tutorial: Como acessar o FTP pelo WinSCP no novo Painel da Hospedagem Elástica

Passos Básicos:

• Conecte-se ao servidor via FTP usando uma ferramenta como o WinSCP ou FileZilla
• Faça upload do conteúdo das pastas build/ (React) ou dist/ (Angular) para o diretório público no servidor.

4.2. Deploy pelo GitHub para publicar uma aplicação

Da mesma forma, se você usa o GitHub para versionamento do código, pode integrar o processo de deploy diretamente. A hospedagem elástica da Brasil Cloud permite que você faça deploy automático a partir de um repositório GitHub. Acesse o tutorial abaixo e saiba mais:

Tutorial: Como realizar deploy via GitHub em sua hospedagem

Passos Básicos:

• Conecte sua hospedagem ao GitHub.
• Defina a branch que será usada para o deploy (geralmente a main ou master).
• Ao enviar uma atualização para o repositório, a hospedagem atualiza automaticamente a aplicação.

Em seguida, realize o deploy na pasta “app”, que é a pasta padrão para o Node.js da Hospedagem Elástica:

5. Configurando a hospedagem para iniciar a aplicação

Em seguida, após realizar o deploy, altere o arquivo de execução da hospedagem em Node.js que você definiu como principal. Alguns nomes comuns desse arquivo são: index.js, app.js, server.js.

Para este tutorial, utilizaremos como exemplo o framework Express:

6. Conclusão de como publicar uma aplicação Node.js

Pronto! Após seguir os passos deste tutorial, sua aplicação front-end estará publicada e disponível para acesso pelo navegador. Dessa forma, projetos desenvolvidos com React.js, Angular ou outros frameworks front-end podem ser publicados de maneira simples e organizada em seu ambiente da Hospedagem Elástica.