Il tuo team ha investito molto sforzo nell’impacchettare manualmente il codice? In tal caso, è giunto il momento di utilizzare GitHub Actions Artifacts, così il tuo team può automatizzare questa procedura. Allo stesso tempo, si riduce la variabilità del rilascio e si risparmia tempo per lavorare su altre attività cruciali.
GitHub Actions Artifacts ti consente di trasferire efficacemente i dati da un lavoro attivo a un altro, eliminando le attività ripetitive e time-consuming coinvolte nel rilascio. In questo tutorial, imparerai come utilizzare e gestire gli artifacts per il deploy di un’applicazione React su Netlify.
Continua a leggere e inizia a creare rilasci consistenti!
Prerequisiti
Questo tutorial sarà una dimostrazione pratica. Se desideri seguirla, assicurati di avere un’applicazione React semplice e un repository GitHub. Questo tutorial utilizza un repository di React Counter App.
Costruzione di un Workflow CI/CD
Quando un lavoro in un flusso di lavoro di GitHub Actions termina, terminano anche i dati che elaborano e generano. I dati chiamati artifacts possono essere conservati sulla pagina del repository dopo che i lavori sono stati completati e possono essere caricati utilizzando l’azione di caricamento dell’artifact.
Ma prima di utilizzare gli artifacts di GitHub Actions per i tuoi rilasci di deploy, è necessario prima costruire un workflow CI/CD per la tua applicazione:
1. Crea una cartella .github nella directory principale della tua applicazione e crea una sottocartella chiamata workflows.
2. Successivamente, crea il file di workflow (un file .yml) nella cartella workflows. Puoi dare il nome che preferisci al file. Ma per questo tutorial, il file è chiamato ci.yml.
La struttura delle risorse del tuo file di workflow dovrebbe assomigliare a quella riportata di seguito.
3. Aggiungi il seguente codice nel file ci.yml e salva le modifiche. Il codice qui sotto crea un flusso di lavoro chiamato CI con un lavoro di build per l’applicazione.
4. Ora, aggiungi e committa le modifiche, e mandale al tuo repository GitHub remoto.
Se il push è stato effettuato con successo, vedrai il commit con un cerchio color ambra, come mostrato di seguito, che indica che il flusso di lavoro è in esecuzione.
5. Clicca sulla scheda Azioni per visualizzare il flusso di lavoro.
6. Clicca su qualsiasi lavoro di build sul lato sinistro e espandi il lavoro di Build dell’applicazione. Vedrai i dati del lavoro di build (file statici) generati. Questi sono i file necessari per il deployment.
I file generati vengono persi quando il server in esecuzione del lavoro viene eliminato (o quando il lavoro termina). Poiché avrai bisogno di questi file per il deployment, implementerai un passaggio per prendere questi file e caricarli come un artefatto nella sezione seguente.
Infine, aggiungi il seguente codice dopo aver eseguito i test nell’ambito del blocco degli steps nel tuo job di build.
Il codice qui sotto carica un artefatto chiamato “production” dalla directory di build utilizzando l’azione actions/upload-artifact@v3.
Configurazione di un Periodo di Conservazione Personalizzato per l’Artefatto
Gli artefatti sono conservati per 90 giorni per impostazione predefinita prima di essere cancellati. Ma a seconda del tipo di repository, puoi modificare questo periodo di conservazione.
Di seguito sono riportati i valori che puoi impostare per personalizzare il periodo di conservazione dell’artefatto:
- Repository Privato: Qualsiasi valore compreso tra
1e400giorni. - Repository Pubblico: Qualsiasi valore compreso tra
1e90giorni soltanto.
Per impostare un periodo di conservazione personalizzato dell’artefatto, aggiorna il tuo file YAML di workflow includendo retention-days: 2 nel tuo passo # Carica Artefatto.
In alternativa, configura il periodo di conservazione dell’artefatto attraverso GitHub nel modo seguente:
- Naviga nella scheda Impostazioni nel repository.
- Clicca su Azione (pannello sinistro) per espandere il menu a discesa e seleziona Generale.
- Inserisci il numero di giorni che desideri mantenere l’artefatto nella sezione Conservazione dell’artefatto e del registro mostrata di seguito, e clicca su Salva.
Importare un progetto da un repository Git su Netlify
L’artefatto di compilazione può ora essere accesso in un altro job nel workflow scaricandolo, poiché hai un passaggio per caricare l’artefatto, riducendo il tempo di completamento del workflow. Aggiungerai un compito di distribuzione al tuo workflow, e uno dei passaggi in quel job scaricherà l’elemento caricato.
Ma prima di aggiornare il tuo workflow, configurerai Netlify per la distribuzione dell’applicazione:
1. Apri il tuo browser web preferito, vai su Netlify e accedi con il tuo account GitHub.
2. Una volta effettuato l’accesso, fai clic su Aggiungi nuovo sito nella sezione Siti e seleziona Importa un progetto esistente per avviare l’importazione del tuo progetto.
3. Fai clic su GitHub poiché utilizzerai il repository che hai creato per questo tutorial su GitHub. Compare una finestra pop-up in cui autorizzerai l’accesso di Netlify alla tua identità GitHub.
4. Una volta autorizzato, cerca e seleziona il repository da cui desideri importare il progetto.
5. Nella nuova pagina, configura le impostazioni di base per la compilazione del sito, come il ramo da cui desideri distribuire e il comando di compilazione. Ma poiché effettuerai la distribuzione tramite le azioni di GitHub, lascia vuoti i campi del comando di compilazione e della directory di pubblicazione.
Clicca su “Deploy site” dopo aver configurato le impostazioni di compilazione e vedrai che il sito viene distribuito. Una volta distribuito, verrà generato un collegamento diretto per il sito.
Se hai lasciato vuoto il campo del comando di compilazione, andando al collegamento verrà visualizzata una pagina 404 in quanto l’app non è stata compilata.
6. Successivamente, fai clic su “Site settings” per visionare le informazioni del sito (passaggio sei).
7. Infine, nella pagina “Site details”, annota l’ID del sito sotto la sezione “Site information” per un utilizzo successivo.
Creazione di un Token di Accesso Personale
Ora che hai l’ID del tuo sito, devi ottenere un token di accesso. Il token di accesso personale darà accesso al tuo account Netlify in modo che le azioni di GitHub possano eseguire la distribuzione su Netlify.
1. Clicca sull’icona del tuo profilo (in alto a destra) e scegli “User settings” per accedere alle impostazioni del tuo profilo.
2. Nella nuova pagina, fai clic su “Applications” (pannello di sinistra) → “New access token” (nella sezione “Personal access tokens”) per iniziare la creazione di un nuovo token di accesso.
3. Nella nuova pagina, inserisci un nome descrittivo per il token e fai clic su “Generate token”.
4. Ora, copia il token in un luogo sicuro.
Protezione dell’ID del Sito e del Token di Accesso Creando Segreti
Ora che hai l’ID del sito e il token di accesso da Netlify, puoi aggiungerli al tuo repository per essere utilizzati nel flusso di lavoro delle azioni. Ma prima, dovrai proteggere l’ID del sito e il token di accesso creando dei segreti.
1. Naviga nel tuo repository GitHub sul tuo browser.
2. Successivamente, clicca sulla scheda Impostazioni → Segreti (pannello sinistro) → Azioni (sotto Segreti) per accedere all’elenco delle azioni disponibili sul tuo repository.
3. Clicca su Nuovo segreto del repository nella pagina dei segreti di Azioni per avviare l’aggiunta di un segreto.
4. Ora, fornisci un Nome descrittivo per il nuovo segreto. Ma questo tutorial utilizza NETLIFY_AUTH_TOKEN come nome del segreto.
Aggiungi il tuo token di accesso come Valore e clicca su Aggiungi segreto per creare il nuovo segreto.
5. Infine, ripeti il passaggio quattro, ma questa volta, aggiungi un segreto per l’ID del tuo sito.
Una volta aggiunti, vedrai i segreti nella sezione Segreti del repository, come mostrato di seguito.
Scaricamento e Distribuzione dell’Artefatto su Netlify
Ora che il tuo sito Netlify e i segreti sono impostati, includerai un passaggio nel tuo flusso di lavoro per distribuire su Netlify utilizzando i tuoi segreti.
1. Aggiorna il tuo flusso di lavoro aggiungendo il codice qui sotto contenente il lavoro di distribuzione.
Il seguente codice contiene passaggi per scaricare l’artefatto caricato e un altro passaggio per distribuirlo su Netlify.
Puoi trovare il codice completo per il file ci.yml nel repository GitHub di ATA.
2. Successivamente, aggiungi e spingi le modifiche al repository remoto.
Dovresti vedere l’ultimo commit in esecuzione nella pagina dei workflow sul repository, come mostrato di seguito.
Una volta committato, clicca sull’ultima esecuzione per visualizzare ulteriori dettagli.
Se i lavori vengono eseguiti con successo, vedrai un segno di spunta verde accanto ai lavori e l’artefatto di produzione in fondo alla pagina.
3. Ora, fai clic sul lavoro di Deploy (pannello sinistro) e espandi il compito Deploy to Netlify. Vedrai l’output del passo, che contiene l’URL del sito web.
Fai clic sull’URL del sito web per verificare che il sito funzioni correttamente ed sia accessibile.
L’URL si apre automaticamente in una nuova scheda del tuo browser web, come mostrato di seguito. Questo output indica che il tuo sito sta funzionando correttamente.
Eliminazione degli artefatti non utilizzati per risparmiare spazio
Dopo ogni rilascio, si utilizza più spazio su disco quando si caricano e scaricano nuovi rilasci. Come si risparmia spazio? Eliminare gli artefatti non utilizzati è la soluzione più praticabile. È necessario limitare il numero di artefatti di rilascio presenti su ciascun server per evitare l’accumulo di migliaia di rilasci e un disco pieno.
Oltre all’utilizzo dell’impostazione del periodo di conservazione per eliminare gli artefatti dopo un certo tempo, puoi anche eliminare l’artefatto dalla pagina dei flussi di lavoro su GitHub:
Sulla tua pagina dei flussi di lavoro, fai clic sull’icona di eliminazione accanto all’artefatto per cancellarlo.
Ora, fai clic su OK sulla finestra di dialogo (in alto) per confermare l’eliminazione dell’artefatto.
Nota che sotto l’artefatto non è più presente sulla pagina, confermando che è stato eliminato con successo.
Conclusioni
Hai visto come gli artefatti semplificano lo sviluppo di automazioni più intricate in cui un flusso di lavoro fornisce informazioni a un altro. A questo punto, dovresti avere una migliore comprensione degli artefatti di GitHub Actions e di come possono essere utilizzati per rilasciare le tue versioni.
Con questa nuova conoscenza, perché non approfittare delle azioni di GitHub per l’automazione dei flussi di lavoro del tuo prossimo progetto?
Source:
https://adamtheautomator.com/github-actions-artifacts-2/