Costruisci e Distribuisci App sulla DigitalOcean App Platform con Dominio Personalizzato

Tutorial
DNS

Introduzione

Come sviluppatori, spesso realizziamo progetti nel tempo libero, sia per divertimento che per imparare qualcosa di nuovo. Questi progetti servono anche come prova delle nostre capacità.

Devi avere una prova del tuo lavoro. Oltre al tuo codice, gli utenti dovrebbero essere in grado di utilizzare la tua applicazione, e per questo motivo, non dovrebbe essere solo in localhost:3000, ma accessibile tramite un link. Per raggiungere questo obiettivo, devi distribuire la tua applicazione e mappare a un dominio personalizzato per una migliore leggibilità e facile condivisione.

In questo articolo, ti verrà presentata DigitalOcean App Platform, e vedrai quanto sia facile passare dalla distribuzione di un’applicazione al mapping a un dominio personalizzato in pochi clic.

Requisiti

  1. Un account DigitalOcean per accedere alla App Platform.

  2. Un account GitHub.

  3. Dominio personalizzato disponibile su NameCheap o piattaforma simile.

Che cos’è la Piattaforma App di DigitalOcean?

La Piattaforma App è una piattaforma-as-a-service (PaaS) completamente gestita che aiuta gli sviluppatori a costruire, distribuire e scalare applicazioni con facilità. Astrae gran parte della gestione dell’infrastruttura, consentendoti di concentrarti sul codice e sulla distribuzione.

Può analizzare e costruire automaticamente il codice da fornitori git come GitHub e GitLab e pubblicare le tue applicazioni sul cloud. Può anche pubblicare usando immagini dei container che hai già caricato su Registro dei Container di DigitalOcean o Docker Hub.

Con funzionalità come mitigazione DDoS, patching automatico del sistema operativo, scalabilità verticale, supporto HTTP, CDN globale e supporto dei domini, la Piattaforma delle App semplifica la pubblicazione e la gestione delle tue app.

Passo 1 – Distribuzione usando la Piattaforma delle App

Una volta che l’applicazione è pronta, puoi distribuirla da monorepos, immagini dei container, o usando GitHub Actions.

Un monorepo è un repository di codice versionato che contiene molti progetti. Anche se questi progetti possono essere correlati, spesso sono logicamente indipendenti e gestiti da team diversi.

Vediamo come possiamo distribuire applicazioni utilizzando la App Platform con GitHub. Supponiamo che tu abbia un repository GitHub privato con un file index.html che contiene questo semplice codice hello world:

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>

Distribuisci utilizzando GitHub

  • Vai alla pagina delle App e fai clic su Crea App.

  • Collega il tuo account GitHub e poi seleziona il repository GitHub che contiene il tuo codice sorgente.

  • Nel campo Directory Sorgente, specifica la cartella che contiene il sorgente come mostrato nell’immagine qui sotto. Poiché il nostro repository demo consiste solo di un file index.html nella directory radice, procederemo con il predefinito /. Se il tuo codice segue una struttura monorepo, assicurati di scegliere la directory particolare in cui si trova il codice.

Seleziona auto-deploy, questo verrà automaticamente ridistribuito ogni volta che carichi una nuova modifica:

  • Configura le risorse per la tua app e fai clic su Avanti. Questo è ciò che vedrai:

  • Successivamente, verranno eseguiti alcuni controlli prima che l’app venga finalmente distribuita. Per app più complicate, come quelle che utilizzano un’API, potresti dover aggiungere variabili ambientali; nelle pagine successive, puoi configurarle.

  • Nel passaggio successivo, puoi modificare il nome dell’applicazione e scegliere la risorsa sotto la quale la tua app sarà distribuita.

  • Quindi fai clic su Avanti per visualizzare la pagina Revisione, dove puoi vedere altre informazioni correlate all’app come la fatturazione, la posizione, ecc. Quindi fai infine clic su Crea risorsa per effettuare il deploy dell’app.

  • Questo richiederà alcuni minuti. Una volta che l’app è stata distribuita, puoi visualizzarla all’URL e altre informazioni nella pagina Panoramica.

Se segui tutti i passaggi sopra indicati, ecco come apparirà la tua applicazione: https://sea-lion-app-l8cvv.ondigitalocean.app/.

Passaggio 2: Mappare l’applicazione su un dominio personalizzato

Ora che la tua applicazione è stata distribuita con successo e ha un dominio ondigitalocean.app, in questo passaggio vedrai come puoi mapparla su un dominio personalizzato.

Ci sono due modi per aggiungere un dominio personalizzato alla tua app:

  1. Utilizzando l’automazione

  2. Utilizzo del pannello di controllo

In questo articolo, vedrai come puoi configurare un dominio personalizzato utilizzando il pannello di controllo.

  • Accedi a DigitalOcean Cloud e seleziona l’app a cui desideri aggiungere il dominio, quindi clicca sulla scheda Impostazioni.

  • Successivamente, clicca sul link Modifica a destra di Domini, e poi clicca sul pulsante Aggiungi Dominio.

  • Appena inizi a digitare il nome del tuo dominio nel campo di testo sottostante, otterrai due opzioni per aggiungere il tuo dominio personalizzato.

  • Puoi aggiungere il dominio personalizzato utilizzando i name server di DigitalOcean o utilizzando un fornitore CNAME.

  • Per utilizzare i server dei nomi di DigitalOcean, copia e incolla questi (ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com) nei record dei server dei nomi del tuo registrar di dominio. Controlla il nostro tutorial su Puntare ai server dei nomi di DigitalOcean da registrar di dominio comuni per indicazioni su come delegare il tuo dominio ai server dei nomi di DigitalOcean da registrar popolari.

  • Puoi anche aggiungere un record CNAME al tuo dominio. Se il tuo provider DNS non è DigitalOcean, controlla la loro documentazione per le istruzioni. Usa il pulsante copia per copiare l’alias ondigitalocean.app e incollalo nel record CNAME sul tuo provider DNS per puntare il tuo dominio personalizzato alla tua app su App Platform. Una volta fatto, clicca sul pulsante Aggiungi Dominio.

Per impostazioni più avanzate relative al dominio, fare riferimento alla nostra documentazione su Come gestire i domini nella App Platform.

Aggiungere domini acquistati su Namecheap

Puoi seguire i passaggi sopra per aggiungere domini personalizzati acquistati su qualsiasi piattaforma. Per questo esempio, vediamo come configurare le impostazioni per un dominio acquistato su Namecheap.

  • Accedi al tuo account Namecheap. Clicca su Elenco Domini, seleziona il dominio che desideri aggiungere e poi clicca su Gestisci.

  • Poi vai alla scheda DNS Avanzato e clicca su Aggiungi nuovo record.

  • Incollalo in Namecheap e salva le modifiche.

Questo è tutto! Ora hai la tua applicazione mappata sul tuo dominio personalizzato.

Conclusione

In questo articolo, hai imparato come distribuire le tue applicazioni e gestire domini personalizzati utilizzando DigitalOcean.

I domini personalizzati possono aiutare il tuo sito web a posizionarsi più in alto nei motori di ricerca perché sono unici e pertinenti al tuo marchio. Rende inoltre più facile per le persone ricordare l’URL e accedere alla tua applicazione.

Ecco alcune buone pratiche da seguire per un dominio personalizzato:

  • Assicurati della sicurezza SSL/TLS, poiché crittografa i dati e migliora il SEO fornendo una connessione sicura.

  • Monitora regolarmente la salute del dominio per rilevare problemi e mantenere prestazioni ottimali per gli utenti.

  • Crea backup per proteggerti dalla perdita di dati e consentire un rapido recupero se il tuo dominio o sito riscontrano problemi.

Prossimi passi

Se decidi di interrompere la tua app per qualche motivo, assicurati di rimuovere il dominio personalizzato prima di eliminare l’app. Per rimuoverlo, vai al pannello di controllo, clicca sulla tua app e poi clicca su Impostazioni. Successivamente, clicca sul link Modifica a destra di Domini e sull’elemento di menu a tre punti (…), e infine clicca su Rimuovi Dominio per rimuovere il dominio.

Ecco un elenco di risorse che possono tornarti utili:

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