Crie e Implemente Aplicativos na Plataforma de Aplicativos do DigitalOcean com Domínio Personalizado

Tutoriais

DNS

Introdução

Como desenvolvedores, muitas vezes construímos projetos paralelos, seja por diversão ou para aprender algo novo. Esses projetos também servem como prova de nossas habilidades.

Você deve ter uma prova 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 através de um link. Para alcançar isso, você precisa implantar sua aplicação e mapeá-la para um domínio personalizado para melhor legibilidade e fácil compartilhamento.

Neste artigo, você será apresentado à 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

Uma conta DigitalOcean para acessar a Plataforma de Aplicativos.
Uma conta GitHub.
Domínio personalizado disponível no NameCheap ou plataforma similar.

O que é a DigitalOcean App Platform?

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

Ele pode automaticamente analisar 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á fez upload para DigitalOcean Container Registry ou Docker Hub.

Com recursos como mitigação de DDoS, correções automáticas de sistema operacional, escalonamento vertical, suporte a HTTP, CDN global e suporte a domínios, a App Platform facilita a publicação e gestão de suas aplicações.

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 controlado por versão que contém muitos projetos. Embora esses projetos possam estar relacionados, eles são frequentemente 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 contenha este simples código 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 Origem, especifique a pasta que contém o código-fonte, conforme mostrado na imagem abaixo. Como nosso repositório de demonstração consiste apenas de um arquivo index.html no diretório raiz, vamos prosseguir com o padrão /. Se seu código seguir uma estrutura de monorepositório, certifique-se de escolher o diretório específico onde o código está localizado.

Selecione auto-deploy, isso fará com que seja implantado automaticamente sempre que você fizer uma nova alteração:

Configure os recursos para o 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 os que usam uma API, pode ser necessário adicionar variáveis de ambiente, nas próximas páginas, você pode configurá-las.

Na próxima etapa, você pode editar o nome da aplicação e escolher o recurso no qual seu aplicativo será implantado.

Então, você clica em Next para ver 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. Uma vez que o aplicativo esteja implantado, você pode visualizar o aplicativo na URL e outros detalhes na página Overview.

Se você seguir todos os passos acima, é assim que seu aplicativo ficará: https://sea-lion-app-l8cvv.ondigitalocean.app/.

Passo 2: Mapeando o aplicativo para um domínio personalizado

Agora que seu aplicativo está implantado com sucesso e tem um domínio ondigitalocean.app, neste passo, você verá como pode mapeá-lo para um domínio personalizado.

Existem duas maneiras pelas quais você pode adicionar um domínio personalizado ao seu aplicativo:

Usando automação
Usando o painel de controle

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

Acesse oCloud da DigitalOcean e selecione o aplicativo ao qual deseja adicionar o domínio e, em seguida, clique na guia Configurações.
Em seguida, clique no link Editar à direita de Domínios, e depois clique no botão Adicionar Domínio.

Assim que 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 CNAME.
Para usar os servidores de nomes da DigitalOcean, copie e cole-os (ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com) nos registros de servidores de nomes do seu registrador de domínio. Confira nosso tutorial sobre Apontar para os Servidores de Nomes da DigitalOcean a partir de Registradores de Domínio Comuns para orientações sobre como delegar seu domínio para os servidores de nomes da DigitalOcean a partir de registradores populares.

Você também pode adicionar um registro CNAME ao seu domínio. Se 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 colá-lo no registro CNAME do seu provedor de DNS para apontar seu domínio personalizado para seu aplicativo na App Platform. Uma vez feito isso, 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 App Platform.

Adicionando domínios comprados no Namecheap

Você pode seguir os passos acima para adicionar domínios personalizados adquiridos em qualquer plataforma. Para este exemplo, vamos ver 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 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! Agora, você tem sua aplicação mapeada para seu domínio personalizado.

Conclusão

No artigo de hoje, 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 motores de busca porque são únicos e relevantes para sua marca. Isso também facilita para as pessoas lembrarem da URL e acessarem sua aplicação.

Aqui estão algumas melhores práticas a seguir para um domínio personalizado:

Garanta a segurança SSL/TLS, pois ela criptografa dados e melhora o SEO ao fornecer uma conexão segura.
Monitore a saúde do domínio regularmente 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 do 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