Crie e implante aplicativos na Plataforma de Aplicativos DigitalOcean com domínio personalizado

Tutoriais
DNS

Introdução

Como desenvolvedores, frequentemente construímos projetos por conta própria, seja por diversão ou para aprender algo novo. Esses projetos também servem como prova de nossas habilidades.

Você deve ter provas de trabalho. Além do seu código, os usuários devem ser capazes de usar sua aplicação, e para isso, ela não deve estar apenas em localhost:3000, mas acessível por meio de um link. Para conseguir isso, você precisa implantar sua aplicação e mapeá-la para um domínio personalizado para uma melhor legibilidade e facilidade de compartilhamento.

Neste artigo, você será apresentado ao Plataforma de Aplicativos DigitalOcean, e verá como é fácil passar da implantação de uma aplicação para mapeá-la para um domínio personalizado em apenas alguns cliques.

Pré-requisitos

  1. Uma conta na DigitalOcean para acessar a Plataforma de Aplicativos.

  2. Uma conta GitHub.

  3. Domínio personalizado disponível no NameCheap ou plataforma similar.

O que é a DigitalOcean App Platform?

A App Platform é uma plataforma como serviço (PaaS) totalmente gerenciada que ajuda os desenvolvedores a construir, implantar e escalar aplicativos com facilidade. Ela abstrai grande parte da gestão de infraestrutura, permitindo que você se concentre no código e na implantação.

Ele pode analisar automaticamente e construir código de provedores git como GitHub e GitLab, e publicar suas aplicações na nuvem. Também pode publicar usando imagens de contêiner que você já carregou no DigitalOcean Container Registry ou no Docker Hub.

Com recursos como mitigação de DDoS, correção automática de sistema operacional, escalonamento vertical, suporte a HTTP, CDN global e suporte a domínios, a App Platform torna simples a publicação e o gerenciamento de seus aplicativos.

Passo 1 – Implantando usando a App Platform

Uma vez que a aplicação esteja pronta, você pode implantá-la a partir de monorepos,imagens de contêiner, ou usando Ações do GitHub.

Um monorepo é um repositório de código versionado que abriga muitos projetos. Embora esses projetos possam estar relacionados, eles costumam ser logicamente independentes e geridos por diferentes equipes.

Vamos ver como podemos implantar aplicativos usando a Plataforma de Aplicativos com o GitHub. Digamos que você tenha um repositório privado do GitHub com um arquivo index.html que contém este simples código de olá mundo:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script>
    console.log("Hello, World!");
  </script>
</body>
</html>

Implantar Usando o Github

  • Vá para a página de Aplicativos e clique em Criar Aplicativo.

  • Conecte sua conta do GitHub e, em seguida, selecione o repositório do GitHub que contém seu código-fonte.

  • No campo Diretório de Fonte, especifique a pasta que contém a fonte, conforme mostrado na imagem abaixo. Como nosso repositório de demonstração consiste apenas em um arquivo index.html no diretório raiz, iremos prosseguir com o padrão /. Se seu código seguir uma estrutura de monorepo, certifique-se de escolher o diretório específico onde o código está localizado.

Selecione auto-deploy, isso irá reimplantar automaticamente sempre que você enviar uma nova alteração:

  • Configure os recursos para seu aplicativo e clique em Próximo. Isso é o que você verá:

  • Em seguida, ele passará por algumas verificações antes de finalmente implantar o aplicativo. Para aplicativos mais complicados, como aqueles que usam uma API, você pode precisar adicionar variáveis de ambiente; nas próximas páginas, você pode configurar essas.

  • No próximo passo, você pode editar o nome da aplicação e escolher o recurso sob o qual seu aplicativo será implantado.

  • Então, você clica em Next para visualizar a página Review, onde você pode ver outras informações relacionadas ao aplicativo, como cobrança, localização, etc. Então, finalmente, clique em Create resource para implantar o aplicativo.

  • Isso levará alguns minutos. Assim que o aplicativo for implantado, você poderá visualizá-lo na URL e em outros detalhes na página Overview.

Se você seguir todos os passos acima, sua aplicação ficará assim: https://sea-lion-app-l8cvv.ondigitalocean.app/.

Passo 2: Mapeando a aplicação para um domínio personalizado

Agora que sua aplicação está implantada com sucesso e tem um domínio ondigitalocean.app, neste passo, você verá como pode mapeá-la para um domínio personalizado.

Existem duas maneiras de adicionar um domínio personalizado ao seu aplicativo:

  1. Usando automação

  2. Usando o painel de controle

Neste artigo, você verá como pode configurar um domínio personalizado usando o painel de controle.

  • Faça login noDigitalOcean Cloud e selecione o aplicativo ao qual deseja adicionar o domínio, e então clique na aba Configurações.

  • Em seguida, clique no link Editar à direita de Domínios, e depois clique no botão Adicionar Domínio.

  • Assim que você começar a digitar o nome do seu domínio no campo de texto abaixo. Você terá duas opções para adicionar seu domínio personalizado.

  • Você pode adicionar o domínio personalizado usando os servidores de nomes da DigitalOcean ou usando um provedor de CNAME.

  • Para usar os servidores de nome da DigitalOcean, copie e cole-os (ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com) nos registros de servidores de nome do seu registrador de domínio. Confira nosso tutorial sobre Apontar para os Servidores de Nome da DigitalOcean a partir de Registradores de Domínio Comuns para obter orientações sobre como delegar seu domínio aos servidores de nome da DigitalOcean a partir de registradores populares.

  • Você também pode adicionar um registro CNAME ao seu domínio. Se o seu provedor de DNS não for a DigitalOcean, consulte a documentação deles para instruções. Use o botão copiar para copiar o alias ondigitalocean.app e cole-o no registro CNAME do seu provedor de DNS para apontar seu domínio personalizado para seu aplicativo na App Platform. Após concluir, clique no botão Adicionar Domínio.

Para configurações mais avançadas relacionadas ao domínio, consulte nossa documentação sobre Como Gerenciar Domínios na Plataforma App.

Adicionando domínios comprados no Namecheap

Você pode seguir as etapas acima para adicionar domínios personalizados adquiridos em qualquer plataforma. Para este exemplo, vejamos como você configuraria as definições para um domínio comprado no Namecheap.

  • Faça login na sua conta do Namecheap. Clique em Lista de Domínios, selecione o domínio que você deseja adicionar e clique em Gerenciar.

  • Em seguida, vá para a aba DNS Avançado e clique em Adicionar novo registro.

  • Depois, vá para o painel de controle da DigitalOcean e copie o link do campo mostrado abaixo.

  • Cole-o no Namecheap e salve suas alterações.

É isso aí! Agora, você tem sua aplicação mapeada para seu domínio personalizado.

Conclusão

Neste artigo, você aprendeu como implantar suas aplicações e gerenciar domínios personalizados usando o DigitalOcean.

Domínios personalizados podem ajudar seu site a ter uma classificação mais alta nos mecanismos de busca porque são únicos e relevantes para sua marca. Também torna mais fácil para as pessoas lembrarem o URL e acessarem sua aplicação.

Aqui estão algumas boas práticas a serem seguidas para um domínio personalizado:

  • Assegure a segurança SSL/TLS, pois ela criptografa os dados e melhora o SEO ao fornecer uma conexão segura.

  • Monitore regularmente a saúde do domínio para detectar problemas e manter um desempenho ideal para os usuários.

  • Crie backups para proteger contra a perda de dados e permitir uma recuperação rápida se seu domínio ou site enfrentar problemas.

Próximos passos

Se você decidir descontinuar seu aplicativo por algum motivo, certifique-se de remover o domínio personalizado antes de excluir o aplicativo. Para removê-lo, vá até o painel de controle, clique no seu aplicativo e, em seguida, clique em Configurações. Em seguida, clique no link Editar à direita de Domínios e no item de menu de três pontos (…), e finalmente, clique em Remover Domínio para remover o domínio.

Aqui está uma lista de recursos que podem ser úteis:

Source:
https://www.digitalocean.com/community/tutorials/deploy-apps-with-custom-domain