Bouw en implementeer apps op het DigitalOcean App-platform met een aangepast domein

Handleidingen
DNS

Inleiding

Als ontwikkelaars bouwen we vaak projecten aan de zijlijn, ofwel voor de lol of om iets nieuws te leren. Deze projecten dienen ook als bewijs van onze vaardigheden.

Je moet bewijs van werk hebben. Naast je code moeten gebruikers je toepassing kunnen gebruiken, en daarvoor mag het niet alleen op localhost:3000 staan, maar toegankelijk zijn via een link. Om dit te bereiken, moet je je toepassing implementeren en koppelen aan een aangepast domein voor een betere leesbaarheid en gemakkelijke delen.

In dit artikel maak je kennis met DigitalOcean App Platform, en zie je hoe eenvoudig het is om van het implementeren van een toepassing over te gaan naar het koppelen ervan aan een aangepast domein in slechts een paar klikken.

Vereisten

  1. Een DigitalOcean-account om toegang te krijgen tot het App Platform.

  2. Een GitHub-account.

  3. Aangepaste domein beschikbaar op NameCheap of een vergelijkbaar platform.

Wat is het DigitalOcean App Platform?

App Platform is een volledig beheerd platform-as-a-service (PaaS) dat ontwikkelaars helpt bij het bouwen, implementeren en schalen van toepassingen met gemak. Het abstractiseert veel van het infrastructuurbeheer, zodat je je kunt concentreren op code en implementatie.

Het kan automatisch code analyseren en bouwen van git-providers zoals GitHub en GitLab, en uw applicaties naar de cloud publiceren. Het kan ook publiceren met containerafbeeldingen die u al heeft geüpload naar DigitalOcean Container Registry of Docker Hub.

Met functies zoals DDoS-mitigation, automatische OS-patching, verticale schaling, HTTP-ondersteuning, wereldwijde CDN en domeinondersteuning, maakt het App Platform het eenvoudig om uw apps te publiceren en te beheren.

Stap 1 – Implementeren met het App Platform

Zodra de applicatie klaar is, kunt u deze implementeren vanuit monorepos, containerafbeeldingen, of met GitHub Actions.

Een monorepo is een versiebeheerd code-repository dat veel projecten bevat. Hoewel deze projecten gerelateerd kunnen zijn, zijn ze vaak logisch onafhankelijk en worden ze beheerd door verschillende teams.

Laten we zien hoe we applicaties kunnen implementeren met het App Platform met GitHub. Stel dat je een privé GitHub-repository hebt met een index.html bestand dat deze eenvoudige hello world code bevat:

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>

Implementeren met Github

  • Ga naar de Apps-pagina en klik op Maak App.

  • Verbind je GitHub-account en selecteer vervolgens de GitHub-repository die je broncode bevat.

  • In het Bronmap veld, geef de map op die de bron bevat, zoals weergegeven in de onderstaande afbeelding. Aangezien onze demo-repository slechts bestaat uit een index.html bestand in de hoofdmap, gaan we verder met de standaard /. Als je code een monorepo-structuur volgt, zorg er dan voor dat je de specifieke map kiest waar de code zich bevindt.

Selecteer auto-deploy, dit zal automatisch opnieuw implementeren telkens wanneer je een nieuwe wijziging doorvoert:

  • Configureer de middelen voor je app en klik op Volgende. Dit is wat je zult zien:

  • Vervolgens doorloopt het enkele controles voordat het de app eindelijk implementeert. Voor meer gecompliceerde apps, zoals die welke een API gebruiken, moet je mogelijk omgevingsvariabelen toevoegen; op de volgende pagina’s kun je die configureren.

  • In de volgende stap kun je de naam van de applicatie bewerken en de resource kiezen waaronder je app zal worden geïmplementeerd.

  • Dan klik je op Volgende om de Review pagina te bekijken, waar je andere app-gerelateerde informatie zoals facturering, locatie, enz. kunt zien. Klik vervolgens op Resource maken om de app te implementeren.

  • Dit duurt een paar minuten. Zodra de app geïmplementeerd is, kun je de app bekijken op de URL en andere details in de Overzicht pagina.

Als je alle bovenstaande stappen volgt, zal je applicatie er zo uitzien: https://sea-lion-app-l8cvv.ondigitalocean.app/.

Stap 2: Het toewijzen van de applicatie aan een aangepast domein

Nu je applicatie succesvol is geïmplementeerd en een ondigitalocean.app domein heeft, zie je in deze stap hoe je het kunt koppelen aan een aangepast domein.

Er zijn twee manieren waarop je een aangepast domein aan je app kunt toevoegen:

  1. Gebruik van automatisering

  2. Gebruik van het bedieningspaneel

In dit artikel zie je hoe je een aangepast domein kunt configureren met behulp van het bedieningspaneel.

  • Log in opDigitalOcean Cloud en selecteer de app waaraan je het domein wilt toevoegen, en klik vervolgens op het Instellingen tabblad.

  • Klik vervolgens op de Bewerken link rechts van Domeinen, en klik daarna op de Domein toevoegen knop.

  • Zodra je begint met het typen van je domeinnaam in het tekstveld hieronder, krijg je twee opties om je aangepaste domein toe te voegen.

  • Je kunt het aangepaste domein toevoegen met behulp van de naamservers van DigitalOcean of met behulp van een CNAME-provider.

  • Om de naamservers van DigitalOcean te gebruiken, kopieer en plak ze (ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com) in de naamserverrecords van je domeinregistrar. Bekijk onze tutorial over Verwijs naar DigitalOcean Naamservers van Veelvoorkomende Domeinregistrars voor begeleiding bij het delegeren van je domein naar de naamservers van DigitalOcean vanuit populaire registrars.

  • Je kunt ook een CNAME-record aan je domein toevoegen. Als je DNS-provider niet DigitalOcean is, raadpleeg dan hun documentatie voor instructies. Gebruik de kopieer knop om het ondigitalocean.app alias te kopiëren en plak het in het CNAME-record op je DNS-provider om je aangepaste domein naar je App Platform-app te verwijzen. Zodra dit is gedaan, klik op de Domein Toevoegen knop.

Voor meer geavanceerde instellingen met betrekking tot het domein, raadpleeg onze documentatie over Hoe domeinen beheren in App Platform.

Toevoegen van domeinen die zijn gekocht bij Namecheap

Je kunt de bovenstaande stappen volgen om aangepaste domeinen toe te voegen die zijn gekocht op elk platform. Voor dit voorbeeld, laten we eens kijken hoe je de instellingen zou configureren voor een domein dat is gekocht bij Namecheap.

  • Log in op je Namecheap-account. Klik op Domeinlijst, selecteer het domein dat je wilt toevoegen, en klik vervolgens op Beheren.

  • Ga vervolgens naar het tabblad Geavanceerde DNS en klik op Nieuwe record toevoegen.

  • Ga dan naar het bedieningspaneel van DigitalOcean en kopieer de link uit het veld hieronder weergegeven.

  • Plak het in Namecheap en sla je wijzigingen op.

Dat is alles! Nu is je applicatie gekoppeld aan je aangepaste domein.

Conclusie

In dit artikel heb je geleerd hoe je je applicaties implementeert en aangepaste domeinen beheert met behulp van DigitalOcean.

Aangepaste domeinenkunnen helpen om je website hoger te laten ranken in zoekmachines omdat ze uniek en relevant zijn voor je merk. Het maakt het ook gemakkelijker voor mensen om de URL te onthouden en je applicatie te bereiken.

Hier zijn enkele best practices om te volgen voor een aangepast domein:

  • Zorg voor SSL/TLS-beveiliging, omdat het gegevens versleutelt en de SEO verbetert door een veilige verbinding te bieden.

  • Controleer regelmatig de gezondheid van het domein om problemen op te sporen en optimale prestaties voor gebruikers te behouden.

  • Maak back-ups om te beschermen tegen gegevensverlies en een snelle herstelmogelijkheid te bieden als je domein of site problemen ondervindt.

Volgende stappen

Als je besluit om je app om welke reden dan ook stop te zetten, zorg er dan voor dat je het aangepaste domein verwijdert voordat je de app verwijdert. Ga naar het bedieningspaneel, klik op je app en klik vervolgens op Instellingen. Klik vervolgens op de Bewerken link rechts van Domeinen en het driepunt (…) menu-item, en klik tot slot op Domein verwijderen om het domein te verwijderen.

Hier is een lijst van bronnen die handig kunnen zijn:

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