Neste guia, vamos analisar os passos para implementar um aplicativo de exemplo e um banco de dados. Sinta-se à vontade para usar o aplicativo de exemplo abaixo para testes, mas não confie nele para qualquer tipo de uso de produção. O objetivo do aplicativo é testar a implementação na Kinsta.

Prefere assistir à versão em vídeo?

Aplicativo de exemplo

Nós criamos um pequeno aplicativo para registrar o tempo e exibir os resultados em uma página simples. Você pode encontrar o aplicativo no GitHub.

Abra o aplicativo de exemplo

Primeiro, visite o aplicativo weatherlogger-js no GitHub e leia o arquivo Readme incluído para saber mais sobre o aplicativo. Uma vez que você tenha se familiarizado com ele, clique no botão Fork no canto superior direito para fork para sua própria conta no GitHub.

Criar um fork de weatherlogger-js em GitHub.
Criar um fork de weatherlogger-js em GitHub.

Crie uma chave API

O aplicativo requer uma chave API do OpenWeather. Uma vez cadastrado, você pode fazer login e criar uma chave API gratuitamente que permite que você faça 1.000 chamadas API diariamente. Nós recomendamos fazer este passo primeiro, pois a chave API leva de 10 a 20 minutos para ficar ativa, o que nós podemos gastar configurando nosso aplicativo.

Processos

Ao implementar o aplicativo na Kinsta, nós precisamos executar dois processos:

  • Um servidor web onde podemos ver nossos dados meteorológicos. Isto pode ser iniciado usando o comando npm start.
  • Um cronjob que coleta dados meteorológicos a cada poucos minutos. Isto pode ser iniciado usando o comando npm run weatherLogger

Vamos começar a preparar as coisas para executar esses processos.

Implementar um Banco de Dados

No MyKinsta, certifique-se de que você está na página de Aplicações, clique em Adicionar serviço e selecione Banco de Dados no menu suspenso. Nós usamos os seguintes valores no formulário para criar nosso banco de dados de exemplo:

  • Nome da base de dados: weatherloggerdb
  • Nome de exibição: Weather Logger Database
  • Tipo de base de dados: MySQL
  • Versão: 8.0
  • Nós deixamos o nome de usuário e senha do banco de dados intocados
  • Localização do centro de dados: us-east4-a
  • Tamanho do banco de dados: 2 núcleos de CPU – 512 MB de RAM (Mini)

Clique no botão Criar banco de dados, e você deve estar pronto.

Criando um novo banco de dados para o nosso aplicativo de exemplo.
Criando um novo banco de dados para o nosso aplicativo de exemplo.

Implementar um aplicativo

Certifique-se de que você está na página de Aplicativos, clique em Adicionar serviço, então selecione Aplicativo no menu suspenso. Ao clicar no campo de repositório do GitHub, você precisará permitir que Kinsta interaja com seu repositório.

Para um guia em vídeo, dê uma olhada em nossos Tutoriais em Vídeo. Para mais documentação passo a passo, veja Adicionar um aplicativo.

Nós usamos os seguintes valores no formulário para criar nosso aplicativo de exemplo:

  • Repositório GitHub: danielpataki/weatherlogger-js (no seu caso, isso será algo como your-organization/weatherlogger-js)
  • Ramo padrão: main
  • Desdobramento automático no momento do compromisso: desmarcado
  • Construa o ambiente: Configure a imagem do contêiner automaticamente
  • Nome do aplicativo: Weather Logger
  • Localização do centro de dados: us-east4-a

Clique em Adicionar aplicativo e o processo de implementação será iniciado.

Criando um novo aplicativopara o nosso exemplo.
Criando um novo aplicativopara o nosso exemplo.

Conectando o Aplicativo e o Banco de Dados

Assim que o banco de dados estiver pronto para conexões (uma marca de verificação verde é mostrada ao lado dele), podemos conectá-lo ao nosso aplicativo, mesmo que o aplicativo ainda esteja sendo implementada. Clique no aplicativo Weather Logger, clique em Configurações na barra lateral, e role para baixo para encontrar a seção Conexões internas.

Conexões internas em nosso aplicativo de exemplo.
Conexões internas em nosso aplicativo de exemplo.

Clique em Adicionar conexão, e na janela modal/pop-up que aparece, selecione o Weather Logger Database. Selecione a caixa de seleção Adicionar variáveis de ambiente para acessar o banco de dados, role até a parte inferior da janela e clique em Adicionar conexão.

Adicione uma conexão interna para nosso aplicativo de exemplo.
Adicione uma conexão interna para nosso aplicativo de exemplo.

Configuração do aplicativo

A próxima coisa na nossa lista é adicionar todas as informações que nosso aplicativo precisa na forma de variáveis de ambiente. A maioria das informações foi automaticamente adicionada no passo anterior, preenchendo as variáveis de conexão ao banco de dados.

A única que falta no aplicativo é a chave API OpenWeatherMap. Na seção Configurações, logo abaixo da seção Conexões internas, você verá a seção Variáveis de Ambiente. Clique em Adicionar variável de ambiente e use OPENWEATHER_KEY como a chave e sua chave API como o valor.

Adicione sua chave API OpenWeather às variáveis de ambiente
Adicione sua chave API OpenWeather às variáveis de ambiente

O aplicativo suporta mais algumas variáveis para controlar a frequências de atualização, unidades usadas, etc. Dê uma olhada na documentação do aplicativo para mais informações.

Configuração de processos

Nós mencionamos no início que vamos precisar de um servidor web e um cronjob. Vá até a seção Processos do aplicativo e você verá que um processo web é criado automaticamente e roda npm start por padrão, que é exatamente o que nós precisamos.

Para configurar o cronjob, clique no botão Criar processo e preencha o formulário no modal/pop-up que aparece. Nós usamos os seguintes valores para o nosso exemplo:

Nome: Worker
Tipo: Background job
Iniciar comando: npm run weatherLogger
Tamanho do Botão: nano
Instâncias: 1

Em seguida, clique no botão Criar processo.

Criar o processo de fundo para o nosso aplicativo de exemplo.
Criar o processo de fundo para o nosso aplicativo de exemplo.

Implantar o aplicativo

Finalmente, volte para a seção Deployments e clique no botão Deploy now. A implantação geralmente leva cerca de 90 segundos, mas você pode precisar esperar um pouco mais para que todos os processos entrem em funcionamento corretamente. Sua primeira medição do tempo deve ser registrada alguns minutos depois disso. Para verificar se tudo está funcionando, dê uma olhada na seção de Logs.

Registros de tempo de execução para o aplicativo de exemplo.
Registros de tempo de execução para o aplicativo de exemplo.

Após alguns minutos, você deve ver os processos bem sucedidos nos logs de tempo de execução. Na imagem de exemplo acima, a linha 243 mostra que o logger começou a funcionar (Starting weather logging), e a linha 244 mostra que o servidor web está rodando (Weather server is up and running). A linha 245 em diante mostra dois eventos de log (Weather data retrieved).

Se você voltar para a seção Deployments, você deve ver a URL de implementação mais recente. Clique neste URL para ser levado para a página que está sendo servida pelo serviço web:

Página de registro de tempo mostrando as entradas de tempo.
Página de registro de tempo mostrando as entradas de tempo.