Go to lewagon.com

Buying a domain on Namecheap and pointing it to Heroku

Neste tutorial vamos mostrar o passo-a-passo de como comprar um domínio no Namecheap e direcionar um subdomínio para uma aplicação no Heroku. Bonus: email com domínio próprio!
Índice de conteúdo
Neste tutorial, vamos te guiar por todas as etapas necessárias para você comprar um domínio usando Namecheap e configurá-lo para apontar para uma aplicação existente no Heroku.


Comprando o domínio


Logue ou crie uma conta no Namecheap  e faça uma busca por um domínio disponível. Um domínio é um nome seguido de um TLD, não precisa digitar www (isso seria o sub-domínio).

Neste exemplo vou comprar o domínio awesome-domain.fun. Você pode ignorar todas as tentativas de te vender algo a mais, o famoso upsell e pode clicar direto e sem medo no botão "Confirm Order":

Nas telas seguintes você vai ter que entrar com sua identidate (ou da sua empresa) até chegar na página de pagamento. Você pode escolher entre cartão ou Paypal. Quando a gente "compra" um domínio, normalmente a gente tem direito de usá-lo por um período pré-determinado e você deverá renová-lo se quiser continuar a usá-lo após este período de tempo. No meu exemplo estou pagando $ 0.88 agora, mas se quiser renovar-lo deverei pagar $19.88 no ano que vem.

Clique em "Manage" para ver sua lista de domínios, na sessão de admin.

Direcionando o domíno para o Heroku


Antes de avançar, você precisa de uma conta no Heroku validada , o que envolve adicionar seu cartão de crédito na aba Account > Billing. Não se preocupe, eles pedem os dados do cartão apenas para conseguirem validar a conta, mas nada será cobrado pelo Heroku para adicionar este domínio.

Para apontar o subdomínio www para meu app Heroku são necessárias duas etapas:

Primeiro, entre no seu dashboard Heroku, selecione a aplicação para onde deseja apontar o domínio e vá até a aba "Settings". Role a tela para baixo até a sessão " Domain and certificates". Clique no botão roxo "Add domain" e digite o nome de domínio com o subdomínio que você pretende usar. Aqui vou digitar www.awesome-domain.fun.

Não use um domínio sem um subdomínio (também conhecido como bare, naked, root ou apex), pois isso pode trazer limitações. Sempre use um subdomínio.

Agora você pode obter o CNAME no Heroku, que deve ser algo do tipo seudominio.herokudns.com. Anote-o, você vai precisar dessa informação no Namecheap.
Volte até a lista de domínios no Namecheap, clique no seu domínio para gerencia-lo. Vá até a aba Advanced DNS. Você irá encontrar listado o subdomínio www (na coluna Host) e verá que ele já está apontando para uma parking page. Agora precisamos editar esta informação.  Clique na coluna Value para editar e cole o endereço que você copiou do Heroku. Adicione um ponto . no fim. Feito isso, clique no ✅ tick verde para confirmar.
É isso! Para verificar se esta mudança propagou até seu servidor DNS local, você pode usar o comando dig desta forma:

dig CNAME www.seu_dominio.tld
No screenshot acima você pode ver que www.awesome-domain.fun aponta para o CNAME www.awesome-domain.fun.herokudns.com.  Tudo dentro do esperado! Agora abra seu browser favorito e teste seu domínio para ver o resultado

Bonus - endereço de email com domínio próprio


Pode ser útil ter um endereço do tipo contato@seu_dominio.tld. Usando Namecheap, você pode criar um redirecionamento para a sua caixa pessoal.

Para fazer isso, vá até a aba Domain, role a tela para baixo até a sessão Redirect Email. Clique no botão Add Forwarder, especifique o endereço que quer apontar para outro lugar, sem a parte que vai depois do @ - exemplo: se quiser redirecionar o email contato@seu_domínio.com basta escrever "contato" neste campo. Do lado direito da seta coloque o seu email pessoal, onde deseja receber os emails redirecionados. Para confirmar, clique no ✅.
Isso é tudo! Peça para algué mandar um email para seu novo endereço para testar!
Se tudo deu certo você irá recebe-lo instantaneamente .

E agora, qual o próximo passo?


Os usuários também consultaram :
Mulheres da Tecnologia — Sim, elas fazem a diferença!

Mulheres programando a diferença que elas fazem no mercado

Pour développe mes compétences
Formation développeur web
Formation data scientist
Formation data analyst
Les internautes ont également consulté :

Suscribe to our newsletter

Receive a monthly newsletter with personalized tech tips.