Project web app from local docker to production enviroment on cloud.

Buongiorno a tutti e benvenuti in nuovo articolo di tooldech!

Oggi vedremo come realizzare una migrazione di un progetto di una web app in locale e portarlo in produzione sul cloud di AWS.

In questo tutorial verranno spiegati i passaggi e i procedimenti necessari per spostare una web app locale in modo sicuro in un’ambiente di produzione su cloud.

Iniziamo!

Prerequesiti:

Prima di partire c’è bisogno di fare la “lista della spesa” e capire cosa si è già, per questo tutorial bisogna avere pronto e funzionante:

• account AWS attivo
• Docker funzionante e installato, ti lascio il link sull’installazione di Docker.
• una web app funzionante anche semplice, io userò una web app di un blocco note.

N.B. Questo è un’esempio generale, per far vedere gli step da eseguire ogni migrazione in produzione in base ai contesti può avere varie tipologia di architetture.

Obiettivo finale :

Aprire Google, digitare il dominio e vedere la web app online.

1. Applicazione

Il tipo di applicazione non è importante, potete costruire qualsiasi tipo di progetto.

Ma se non avete idee lascio qui il link al repository Github per scaricare il progetto di un blocco note online.

Repository GitHub

Assumiamo di avere:

• Frontend (React / Next.js / Vue)
• Backend ( Node.js / Python / API REST)
• App funzionante in locale su:
  • http://localhost:5173 (frontend)
  • http://localhost:5174 (backend)

Questa è la visuale che si vede accendendo l’applicazione in locale.

2. Docker & Docker Compose

Applicazione funzionante in locale, ora bisogna fare lo step succcessivo quella di dockerizzare per rendere portabile e standard il progetto per gli vari ambienti.

1. Creazione Dockerfile

Creazione dei dockerfile per i due ambienti dentro al progetto.

1. Frontend
2. Backend

Dockerfile del frontend.

Dockerfile del backend.

Questo punto si deve creare il docker-compose che unisca i due Dockerfile.

I due Dockerfile vanno rispettivamente dentro le cartelle backend e frontend, invece il docker-compose bisogna metterlo nella root del progetto perché sarà la prima cosa che viene “chiamata”

Se notate c’è una sezione caddy, caddy ci servirà per redigere il traffico su un dominio DNS, che andremo dopo a configurare.

Al posto di notes.tuodominio.it è da inserire il tuo dominio che acquisterai.

Ci sono varie alternative per acquistare domini, ti lascio dei link per registrarlo.

1. https://www.aranzulla.it/come-registrare-un-dominio-1126293.html
2. https://www.register.it/domains/
3. https://www.hostinger.com/it/domini
4. https://it.wix.com/domain/names

Per questo test io usero il servizio di AWS interno Route 53 per acquistare il dominio.

3. Push su Git Hub

In questa sezione, parleremo di pushare tutto il progetto compreso i file docker, sul repository GitHub.

Lo facciamo per avere una CI/CD automatizzata con le recenti metodologie DevOps e per avere un punto dove conservare il codice per portarlo su diversi ambienti.

1. Push da locale a Git hub

Prepariamo il repository Git Hub e facciamo un push, vi lascio un link di come pushare da locale al vostro repository pubblico .

Dovremmo vedere il codice, i file docker e altri file sul repository Git Hub.

Siamo pronti per il prossimo step ovvero quello di creare una macchina di prova su AWS per portare l’applicazione in cloud!

4. Creazione macchina in cloud

Siamo pronti.

Per creare la macchina in cloud sul nostro provider di fiducia AWS!

Su come si crea la macchina ci sono vari modi, ti lascio dei link per crearla più come desideri:

1. creare ec2 con aws
2. creare ec2 windows con aws

Ma la macchina deve avere almeno queste cose che consiglio:

1. Ip pubblico e un associazione con un Elastic IP, Un Elastic IP viene assegnato al tuo AWS account ed è tuo fino a quando non lo rilasci.
2. porte inbound aperte su tutto sulle 22, 80 e 443 sul tuo security group.
3. chiave .pem per accedere in ssh

Fatta partire la macchina si deve agganciare Elastic IP con la macchina creata,.

Elastic IP

Molto semplice si va sulla dashboard di sinistra, e si clicca su Elastic IP.

Si clicca su allocate Elastic IP address, e si aggancia all’istanza creata.

Se non avete impostato le regole di entrata corrette si deve andare su security group e modificare le regole per permettere il traffico.

Security Group

Il Security Group fa proprio questo, è un raccoglitore di regole di entrata e uscita per far permettere il corretto raggiungimento del vostro servizio.

Queste sono le regole che dovrebbero essere aperte, per modificarle si clicca sul link security group, nel mio caso è launch-wizard-2 e li si va a ad aggiungere/eliminare o modificare le regole di entrata o uscita.

Per la dimostrazione è necessario aprire 3 regole di entrata:

1. regola entrata ssh 22 sorgente tutto (0.0.0.0/0)
2. regola entrata http 80 sorgente tutto (0.0.0.0/0)
3. regola entrata https 443 sorgente tutto (0.0.0.0/0)

Ti troverai in questa situazione, una votla fatto puoi andare avanti.

Ora si può accedere alla macchina e scaricare le componenti applicative.

Installazione componenti applicative

All’interno di questa macchina vanno scaricate delle componenti per permettere poi il funzionamento della nostra applicazione.

La macchina che abbiamo è grezza, senza nulla dentro si deve scaricare al suo interno gli strumenti per lavorare.

In seguito ti lascio alcuni link per scaricarlo. Ma ti lascio la procedura di comandi da incollare sul terminale per questo tutorial.

1. AMI linux on ec2 con AWS
2. AMI linux on ec2 con geeksforgeeks

Comandi per scaricare docker e git con la AMI di Amazon Linux.

Si deve aprire la macchina e connettersi per usare i comandi.

Ci sono vari modi per accedere alla macchina:

• Chiave ssh
• SSM session Manager
• Ec2 instance connect

E altri, in questo test usiamo EC2 instance Connect.

Una volta dentro procediamo con i comandi.

1️⃣ Aggiorna la macchina

sudo dnf update -y

---

2️⃣ Installa Docker

Su Amazon Linux è molto più semplice:

sudo dnf install docker -y

Avvia Docker:

sudo systemctl start docker

Fallo partire automaticamente al boot:

sudo systemctl enable docker

---

3️⃣ Permetti al tuo utente di usare Docker senza sudo

sudo usermod -aG docker ec2-user

Poi ricarica il gruppo:

newgrp docker

---

4️⃣ Verifica Docker

docker --version

Test rapido:

docker run hello-world

---

5️⃣ Installa Docker Compose

Amazon Linux usa il plugin:

sudo mkdir -p /usr/local/lib/docker/cli-plugins

Scarica docker compose:

sudo curl -SL https://github.com/docker/compose/releases/download/v2.27.0/docker-compose-linux-x86_64 \
-o /usr/local/lib/docker/cli-plugins/docker-compose

Rendi eseguibile:

sudo chmod +x /usr/local/lib/docker/cli-plugins/docker-compose

Verifiy:

docker compose version

⚠️ Nota: il comando è docker compose (senza trattino).

---

6️⃣ Installa Git

Ti serve per clonare il repo.

sudo dnf install git -y

---

7️⃣ Clona il tuo progetto

git clone https://github.com/TUOUSERNAME/notes-webapp.git
cd notes-webapp

---

5. Dominio

Stoppiamo e prima di far partire lo stack dell’applicazione, c’è bisogno di acquistare lo spazio web per rendere poi disponibile la nostra applicazione web.

Come ho detto prima, potete comprare un dominio dove volete, io uso route 53. Proprio questo servizio da la possibilità di acquistare ma anche di lavorare su domini che sono stati acquistati da altre parti.

Quindi, andiamo sull’account di AWS e servizio di route 53.

Arrivati qui, noteremo la dashboard.

Ci sono due cerchi:

1. Qui in caso avessi comprato un dominio da altre parti
2. Li è la zona dove andrai, una volta che hai acquistato o trasferito il dominio sul servizio.

Dall’immagine sopra si vede che ho acquistato il dominio myascari.com, che è la nostra hosted zone.

La Hosted Zone è un container di record e i record contengono informazioni relative alle modalità con cui desideri instradare il traffico per un dominio specifico (come esempio.com) e i suoi sottodomini.

Creazione del record

Molto semplice bisogna creare un record per reindirizzare il traffico.

• Nome record: tuodominio.com

• Type: A

• value: valore dell’ip del Elastic IP

Una volta creato si aspetta un po di tempo per propagare il dominio.

Questo dominio deve essere aggiunto al caddyfile e modificarlo, a questo punto o lo modificate in locale oppure lo modificate dentro la macchina.

Consiglio è una buona pratica modifcare da locale e non sulla macchina per buona pratica.

Si inserisce nel Caddyfile il dominio acquistato.

6. Avvio Stack

Siamo pronti a far partire lo stack ora.

Ricordati di pullare le modifiche del repository gir hub, spostati sulla cartella del progetto con:

cd progetto

e poi

git pull

Dopo aver pullato ed essere in linea si può far partire lo stack con il comando

docker compose build --no-cache
docker compose up -d

N.B. in caso dovessi spegnere e ricreare lo stack usa questi comandi, il primo comando permette di ricostruire senza cache, perché l’immagine vecchia è sporca.

docker system prune -af
docker compose build --no-cache
docker compose up -d

Eseguito i comandi di build e up si può controllare se è tutto partito tramite il comando.

docker ps 

Fatto questo potete controllare sul terminale se va tutto bene e risponde, tramite due comandi:

1. curl -I http://myascari.com
   • deve rispondere 308 -> redirect a https

1. curl -vk https://myascari.com/api/health
   • deve rispondere -> {“ok”:true}

Adesso si può provare a digitare sul motore di ricerca il nostro dominio e vedere se si apre la nostra web app e creare una nota.

Funziona !!! Il dominio reindirizza correttamente all’applicazione ora proviamo a scrivere una nota e salvarla.

Ecco la nuova nota creata. Siamo arrivati alla fine di questo articolo.

Ricordatevi di fare le attività di spegnere le risorse, se no girano in continuazione e vi arriva un costo tanto alto, quindi:

• spegnere lo stack docker con il comando

docker compose down 

• spegnere e o eliminare le risorse AWS
  • macchina ec2
  • rilasciare Elastic IP e di conseguenza eliminarlo
  • eliminare security group
• Eliminare il dominio se volete

Miglioramenti

Anche se siamo riusciti alla fine dell’articolo a portare online la nostra web app, sicuramente ci possono essere delle migliorie che si possono fare livello di procedura:

• Creazione delle risorse AWS tramite terraform come:
  • Ec2
  • security group
  • Elastic IP
• Dividere ancora di più gli ambienti da locale e produzione
• Creazione di pipeline tramite git hub action o altri strumenti
• Sistema di metrica per vedere il traffico sopra alla macchina e le richieste

Conclusion

Funziona tutto, siamo arrivati alla fine di questo lungo ma interessante articolo sul portare una web app da locale in produzione.

Un ringraziamento ai lettori che si sono spinti fino a questo punto dell’articolo, grazie e alla prossima !!!

• Pinterest
• Instagram
• GitHub
• Etsy