La Continuous Delivery (distribuzione continua) è diventata fondamentale nel panorama in rapida evoluzione dello sviluppo software. Promette cicli di rilascio più rapidi, riduzione degli errori umani e, in ultima analisi, una migliore esperienza utente.
Lo sviluppo del software consiste nel risolvere i problemi del mondo reale con il codice. Il viaggio del software dalla creazione al cliente prevede numerose fasi, che richiedono velocità, sicurezza e affidabilità. È qui che la distribuzione continua dà il meglio di sé.
Questo articolo spiega come integrare la piattaforma CircleCI per creare un flusso di lavoro di integrazione continua e consegna/deployment continuo, continuous Integration/Continuous Delivery – (CI/CD), sfruttando al contempo la potenza dell’API Kinsta per il deployment continuo delle applicazioni, come nel nostro esempio React. Questa combinazione può aprire un percorso agevole dallo sviluppo alla produzione.
Capire la Continuous Delivery
Continuous Delivery è molto più di una parola d’ordine: è un cambiamento di paradigma nello sviluppo del software. Si tratta di automatizzare il processo di creazione, test e distribuzione delle modifiche al codice sui server di produzione.
La pipeline CI/CD, un componente fondamentale della distribuzione continua, orchestra l’intero processo. Include il controllo delle versioni, i test automatici e la distribuzione automatica. Ogni fase è fondamentale per garantire che solo il codice affidabile e testato raggiunga la produzione.
Cos’è CircleCI?
CircleCI è uno strumento molto diffuso per implementare il CI/CD. Si integra con sistemi di controllo di versione come GitHub, GitLab e Bitbucket, permettendo agli sviluppatori di automatizzare l’intera pipeline CI/CD. La sua scalabilità, l’estensibilità e il supporto a diversi linguaggi di programmazione lo rendono uno strumento versatile per progetti di tutte le dimensioni.
Gli sviluppatori di CircleCI definiscono flussi di lavoro che si attivano automaticamente al momento del commit del codice. In questo modo si avviano i processi di compilazione e di test e, una volta completati con successo, si distribuisce il codice nell’ambiente di destinazione. Questo approccio non solo fa risparmiare tempo, ma riduce anche il rischio di errori umani durante la distribuzione.
Capire l’API di Kinsta
L’API di Kinsta vi permette di interagire con i servizi ospitati da Kinsta in modo programmatico e la distribuzione delle applicazioni fa parte delle sue funzionalità. Quando lavorate con i flussi di lavoro CI/CD, userete il comando cURL per interagire con l’API Kinsta dal flusso di lavoro.
Per usare l’API, dovete avere un account con almeno un sito WordPress, un’applicazione o un database in MyKinsta. Potrete quindi generare una chiave API per autenticare il vostro accesso all’API.
Per generare una chiave API seguite questi passaggi:
- Aprire la bacheca di MyKinsta.
- Andare alla pagina delle chiavi API (Il tuo nome > Impostazioni dell’azienda > Chiavi API).
- Fare clic su Crea chiave API.
- Scegliere una scadenza o impostare una data di inizio personalizzata e un numero di ore di scadenza della chiave.
- Assegnare alla chiave un nome univoco.
- Fare clic su Genera.
Dopo aver creato una chiave API, copiatela e conservatela in un luogo sicuro (vi consigliamo di usare un gestore di password), poiché viene rivelata all’interno di MyKinsta solo una volta.
Come attivare la distribuzione con l’API di Kinsta
Per attivare il deployment di un’applicazione su Kinsta tramite l’API, vi servono l’ID dell’applicazione e il nome del branch distribuibile nel repository Git. Potete recuperare l’ID della vostra applicazione recuperando prima l’elenco delle vostre applicazioni, che vi fornirà i dettagli di ogni applicazione, compreso il suo ID.
Potete quindi fare una richiesta POST all’endpoint dell’API /applications/deployments con un comando cURL:
curl -i -X POST
https://api.kinsta.com/v2/applications/deployments
-H 'Authorization: Bearer <YOUR_TOKEN_HERE>'
-H 'Content-Type: application/json'
-d '{
"app_id": "<YOUR_APP_ID>",
"branch": "main"
}'Questo comando cURL verrà utilizzato nel flusso di lavoro.
Primi passi con CircleCI
Per iniziare a lavorare con CircleCI, dovete disporre di un codice sorgente ospitato sul vostro provider Git preferito. Per questo tutorial, useremo l’applicazione site builder sviluppata per il tutorial su come creare un sito WordPress con l’API di Kinsta. Potete usare il repository navigando su GitHub e selezionando: Use this template > Create a new repository.
Nell’applicazione React vengono creati dei test unitari per verificare ogni componente. Viene utilizzato anche ESLint per imporre una sintassi e una formattazione del codice perfette. Impostiamo un flusso di lavoro CI/CD che costruisce, testa, assicura che la sintassi del codice sia corretta e infine esegue il deploy su Kinsta utilizzando l’API.
Per iniziare, esploriamo alcuni concetti chiave:
- Workflow: CircleCI si basa sui workflow, i flussi di lavoro: sequenze definite di lavori che delineano le fasi della pipeline CI/CD. I flussi di lavoro possono includere varie fasi come la creazione, il test, il deploy e altro ancora.
- Job: I job sono singole unità di lavoro all’interno di un flusso di lavoro. Ogni job esegue un’attività specifica, come la compilazione del codice, l’esecuzione di test o il deploy su un server. Questi job possono anche includere varie fasi che vengono eseguite in sequenza (esecuzione parallela) in modo che quando una di esse non va a buon fine, l’intero lavoro fallisce.
Passo 1: Creare un account CircleCI
Visitate il sito web di CircleCI e create un account se non ne avete già uno. Potete registrarvi utilizzando il vostro provider Git preferito. In questo modo sarà più facile accedere ai vostri repository senza ulteriori configurazioni.
Passo 2: Creare il file di configurazione
Nella cartella principale del vostro progetto, create una cartella .circleci se non esiste, e all’interno di essa create un file config.yml. Questo file conterrà la configurazione del vostro flusso di lavoro.
Passo 3: Configurare il repository
Una volta effettuato l’accesso, accedete alla vostra dashboard CircleCI, fate clic su Projects nella barra laterale di sinistra per visualizzare l’elenco dei repository e poi sul pulsante Set Up Project per il repository che desiderate configurare.
Si aprirà una finestra di dialogo in cui CircleCI rileverà automaticamente il vostro file di configurazione. Quindi, fate clic sul pulsante Set Up Project. CircleCI può ora accedere alla vostra base di codice ed eseguire i flussi di lavoro definiti in caso di modifiche al codice.
Passo 4: Definire il job del flusso di lavoro
Il cuore dell’impostazione della pipeline di CircleCI è costituito da questo passaggio cruciale: la definizione del flusso di lavoro nel file config.yml. È qui che orchestrerete la sequenza di azioni che la vostra pipeline eseguirà. È come delineare il progetto del vostro viaggio dallo sviluppo alla produzione.
Si inizia definendo la versione di CircleCI, che attualmente è 2.1:
version: 2.1Avrete bisogno di un job build per ogni progetto React. Questo job affronta le attività fondamentali che prepara il vostro codice per la distribuzione. Queste attività comprendono l’installazione delle dipendenze necessarie, la compilazione del codice, l’esecuzione di test per assicurarsi che tutto funzioni correttamente, la verifica della qualità del codice e infine l’invio del codice a destinazione.
Poiché i progetti React hanno spesso bisogno di strumenti come Node.js per portare a termine il lavoro, CircleCI semplifica l’accesso a questi strumenti offrendoli come immagini preconfezionate. In questo tutorial, specificate la versione di Node.js che volete usare. Useremo Node.js v20.
jobs:
build:
docker:
- image: cimg/node:20.5.0Questo lavoro eseguirà diversi passaggi, quindi creiamoli. Il primo passo è checkout, che recupera l’ultima versione del codice dal repository in modo che tutte le azioni successive funzionino con il codice più recente.
steps:
- checkoutOra passiamo alla parte più importante del lavoro: fare le cose per bene. I passaggi che seguono checkout coprono le attività principali: l’installazione delle dipendenze, la compilazione del codice sorgente, l’esecuzione dei test unitari e l’utilizzo di ESLint per controllare il codice alla ricerca di eventuali campanelli d’allarme.
steps:
- checkout
- run:
name: Install Dependencies
command: npm install
- run:
name: Compile Source Code
command: npm run build
- run:
name: Run Unit Tests
command: npm test
- run:
name: Run ESLint
command: npm run lintOgni passaggio, come i cartelli della segnaletica stradale, ha un nome che vi aiuta a capire cosa succede quando il flusso di lavoro è in pieno svolgimento. Questa chiarezza facilita la risoluzione dei problemi e garantisce che tutto sia in linea con il flusso di lavoro.
Attivare la distribuzione continua su Kinsta
Il passo finale del job di build consiste nell’avviare il deployment su Kinsta tramite l’API. Questo richiede due valori: la vostra chiave API e l’App ID, che non devono essere pubblici. Questi valori saranno conservati come variabili d’ambiente in CircleCI. Per ora, definiamo la fase di distribuzione nel flusso di lavoro:
- run:
name: Deploy to Kinsta
command: |
curl -i -X POST
https://api.kinsta.com/v2/applications/deployments
-H "Authorization: Bearer $API_KEY"
-H "Content-Type: application/json"
-d '{
"app_id": "'"$APP_ID"'",
"branch": "main"
}'Nel codice fornito, eseguite il comando cURL per attivare la distribuzione utilizzando l’ID dell’applicazione memorizzato nelle variabili d’ambiente. Ricordate che le variabili d’ambiente sono accessibili con la sintassi:
"$VARIABLE_NAME"Memorizzare le variabili d’ambiente con CircleCI
Le variabili d’ambiente sono fondamentali per mantenere la sicurezza e la flessibilità dei vostri flussi di lavoro di integrazione e distribuzione continua. Per memorizzare le variabili d’ambiente in CircleCI, seguite questi passaggi:
- Aprite il vostro progetto per vedere tutti i dettagli della pipeline e fate clic sul pulsante Project Settings.
- Fate clic sulla scheda Environment Variables nella barra laterale e aggiungete le vostre variabili d’ambiente.
Passo 5: Configurazione del flusso di lavoro
Dopo aver impostato i job e averli strutturati in fasi organizzate, la fase successiva prevede la configurazione del flusso di lavoro. Il flusso di lavoro agisce come un orchestratore, guidando la sequenza dei job e incorporando filtri e regole specifiche per determinare le modalità di esecuzione dei job.
In questo tutorial, creeremo un flusso di lavoro che attiva il processo di compilazione esclusivamente quando c’è un push o una modifica del codice nel branch main del repository:
workflows:
version: 2
build-test-lint:
jobs:
- build:
filters:
branches:
only:
- mainQuesta configurazione si ottiene usando dei filtri, che vi permettono di controllare quando un job viene eseguito in base a determinate condizioni. Potete anche incorporare dei trigger per programmare quando il flusso di lavoro deve essere eseguito (per esempio: ogni giorno alle 12.00 UTC):
workflows:
version: 2
build-test-lint:
jobs:
- build:
filters:
branches:
only:
- main
triggers:
- schedule:
cron: "0 0 * * *"Il flusso di lavoro sopra riportato presenta un trigger definito con la parola chiave schedule. L’espressione cron "0 0 * * *" corrisponde alla programmazione del flusso di lavoro alla mezzanotte UTC di ogni giorno.
In un’espressione cron ci sono cinque campi separati da spazi, ognuno dei quali rappresenta una diversa unità di tempo:
- Minuto (0-59): Il primo campo rappresenta il minuto dell’ora, impostato su
0per attivarsi all’inizio dell’ora. - Ora (0-23): Il secondo campo indica l’ora del giorno, impostata su
0per la mezzanotte. - Giorno del mese (1-31): Il terzo campo indica il giorno, indicato da un asterisco (
*) per qualsiasi giorno. - Mese (1-12): Il quarto campo rappresenta il mese, indicato con un asterisco (
*) per qualsiasi mese. - Giorno della settimana (0-6, dove 0 è domenica): Il quinto campo indica il giorno della settimana, anch’esso contrassegnato da un asterisco (
*) per qualsiasi giorno.
Con questa configurazione del flusso di lavoro, potete gestire efficacemente quando e in quali condizioni vengono eseguiti i lavori definiti, mantenendo una pipeline CI/CD efficiente e snella.
Passo 6: Eseguire il commit e osservare
Una volta configurato il flusso di lavoro, eseguite il commit delle modifiche nel vostro repository di controllo della versione. CircleCI rileverà automaticamente la presenza del file di configurazione e attiverà i flussi di lavoro definiti in caso di modifiche al codice.
Fate clic sul job di compilazione per esaminarne i dettagli. Se avete più di un job, saranno tutti elencati. Quando fate clic su un job, la scheda STEPS mostra tutti i passaggi eseguiti dal job e se sono andati a buon fine o meno.
Potete anche fare clic su ogni step per vedere maggiori dettagli. Quando fate clic sul passaggio Deploy to Kinsta, vedrete maggiori dettagli sulla richiesta API e saprete se è andata a buon fine:
Quando controllate il cruscotto di MyKinsta, noterete che il flusso di lavoro attiva automaticamente la distribuzione. Ecco come appare il vostro flusso di lavoro CircleCI completo:
version: 2.1
jobs:
build:
docker:
- image: cimg/node:20.5.0
steps:
- checkout # Check out the code from the repository
- run:
name: Install Dependencies
command: npm install
- run:
name: Compile Source Code
command: npm run build
- run:
name: Run Unit Tests
command: npm test
- run:
name: Run ESLint
command: npm run lint
- run:
name: Deploy to Kinsta
command: |
curl -i -X POST \
https://api.kinsta.com/v2/applications/deployments \
-H "Authorization: Bearer $API_KEY" \
-H "Content-Type: application/json" \
-d '{
"app_id": "'"$APP_ID"'",
"branch": "main"
}'
workflows:
version: 2
build-test-lint:
jobs:
- build:
filters:
branches:
only:
- mainRiepilogo
Ora avete ottenuto un processo di distribuzione personalizzato per la vostra applicazione React su Kinsta attraverso CircleCI. Questo approccio vi conferisce una maggiore flessibilità e autorità sulle distribuzioni, consentendo al vostro team di eseguire fasi specifiche del processo.
Adottando CircleCI, fate un passo importante verso l’elevazione delle metodologie di sviluppo. L’automazione della pipeline CI/CD non solo garantisce la qualità del codice, ma accelera anche i cicli di rilascio.
Come usate Kinsta API? Quali endpoint vorreste vedere aggiunti all’API? Quale tutorial su Kinsta API vorreste leggere prossimamente?
Lascia un commento