Heeft jouw team veel moeite gestoken in het handmatig verpakken van code? Zo ja, dan is het nu de tijd om GitHub Actions Artifacts te gebruiken, zodat jouw team dit proces kan automatiseren. Tegelijkertijd verminder je de variabiliteit van releases en bespaar je tijd om aan andere cruciale taken te werken.
GitHub Actions Artifacts stellen je in staat om gegevens effectief over te dragen van de ene actieve taak naar de andere, waardoor repetitieve en tijdrovende taken bij implementatie worden geëlimineerd. In deze handleiding leer je hoe je artifacts kunt gebruiken en beheren om een React-toepassing naar Netlify te implementeren.
Lees verder en begin met het maken van consistente implementaties!
Vereisten
Deze handleiding zal een praktische demonstratie zijn. Als je wilt meedoen, zorg er dan voor dat je een eenvoudige React-toepassing en een GitHub-opslagplaats hebt. Deze handleiding maakt gebruik van een React Counter App-opslagplaats.
Opzetten van een CI/CD-workflow
Wanneer een taak in een GitHub Actions-workflow eindigt, eindigen ook de gegevens die ze verwerken en genereren. Gegevens genaamd artifacts kunnen op de opslagplaatspagina worden bewaard nadat taken zijn voltooid en kunnen worden geüpload met behulp van de upload-artifact actie.
Maar voordat je GitHub Actions artifacts gebruikt voor jouw implementatiereleases, moet je eerst een CI/CD-workflow voor jouw toepassing opzetten:
1. Maak een .github-map aan in de hoofdmap van je applicatie en creëer een submap genaamd workflows.
2. Maak vervolgens het workflow-bestand (een .yml-bestand) aan in de map workflows. Je kunt het bestand een naam geven zoals je wilt. Maar voor deze tutorial is het bestand genaamd ci.yml.
De structuur van de workflow resource in je bestand zou er als volgt uit moeten zien.
3. Voeg de onderstaande code toe aan het bestand ci.yml en sla de wijzigingen op. De onderstaande code creëert een workflow genaamd CI met een build-taak voor de applicatie.
4. Voeg nu de wijzigingen toe, commit ze en push ze naar je externe GitHub-repository.
Als de push succesvol was, zie je de commit met een oranje gekleurde cirkel, zoals hieronder getoond, wat aangeeft dat de workflow wordt uitgevoerd.
5. Klik op het tabblad Actions om de workflow te bekijken.
6. Klik op een van de build-taken aan de linkerkant en breid de Build-app-taak uit. Je ziet de gegevens van de build-taak (statische bestanden) die zijn gegenereerd. Dit zijn de bestanden die je nodig hebt voor implementatie.
Deze gegenereerde bestanden gaan verloren wanneer de server die de taak uitvoert wordt afgesloten (of wanneer de taak eindigt). Aangezien je deze bestanden nodig hebt voor implementatie, voeg je in het volgende gedeelte een stap toe om deze bestanden te nemen en ze te uploaden als een artifact.
7. Voeg tot slot de volgende code toe nadat je de tests hebt uitgevoerd onder het stappenblok in je buildtaak.
De onderstaande code uploadt een artifact met de naam productie vanuit de buildmap met behulp van de actions/upload-artifact@v3 actie.
De gegenereerde bestanden gaan verloren wanneer de server die de taak uitvoert wordt verwijderd of wanneer de taak eindigt. Aangezien je deze bestanden nodig hebt voor implementatie, implementeert de onderstaande code een stap om ze te nemen en ze te uploaden als een artifact.
Het configureren van een aangepaste artifact-bewaarperiode
Artifacts worden standaard gedurende 90 dagen opgeslagen voordat ze worden gewist. Maar afhankelijk van het type repository kun je deze bewaarperiode aanpassen.
Hieronder staan de waarden die je kunt instellen voor het aanpassen van een artifact-bewaarperiode:
- Privérepository – Elke waarde tussen
1en400dagen. - Openbarepository – Alleen waarden tussen
1en90dagen.
Om een aangepaste artifact-bewaarperiode in te stellen, update je je workflow YAML-bestand door retentie-dagen: 2 op te nemen in je # Upload Artifact stap.
Je kunt ook de artifact-bewaarperiode als volgt configureren via GitHub:
- Navigeer naar het Instellingen tabblad in het repository.
- Klik op Actie (linkerpaneel) om de dropdown uit te vouwen en selecteer Algemeen.
- Voer het aantal dagen in dat u het artefact onder de sectie Artefact en logretentie hieronder wilt bewaren, en klik op Opslaan.
Een project importeren vanuit Git Repository naar Netlify
Het build artefact kan nu worden geopend in een andere taak in de workflow door te worden gedownload omdat u een stap hebt om het artefact te uploaden, wat de voltooiingstijd van de workflow verkort. U voegt een implementatietaak toe aan uw workflow, en een van destappen in die taak downloadt het geüploade item.
Maar voordat u uw workflow bijwerkt, stelt u Netlify in voor de app-implementatie:
1. Open uw favoriete webbrowser, ga naar Netlify en log in met uw GitHub-account.
2. Nadat u bent ingelogd, klikt u op Nieuwe site toevoegen in de sectie Sites, en selecteert u Een bestaand project importeren om uw project te importeren.
3. Klik op GitHub omdat u het repository zult gebruiken dat u voor deze zelfstudie op GitHub heeft aangemaakt. Er verschijnt een pop-upvenster waarin u Netlify toegang geeft tot uw GitHub-identiteit.
4. Nadat u gemachtigd bent, zoekt en selecteert u het repository dat u wilt importeren naar het project.
5. Op de nieuwe pagina configureert u de basisbuildinstellingen voor de site, zoals de tak waarvan u wilt implementeren en het buildcommando. Maar aangezien u zult implementeren met GitHub-acties, laat u de velden voor het buildcommando en de publicatiedirectory leeg.
Klik op ‘Implementeer site’ nadat je de build-instellingen hebt geconfigureerd, en je zult zien dat de site wordt ingezet. Zodra dit is gebeurd, wordt er een live link gegenereerd voor de site.
Als je het veld voor de build-opdracht leeg hebt gelaten, toont de link een 404-pagina omdat de app niet is gebouwd.
6. Klik vervolgens op ‘Site-instellingen’ om de sitegegevens te bekijken (stap zes).
7. Ten slotte, op de pagina met sitegegevens, noteer het Site ID onder de sectie Site-informatie voor later gebruik.
Creëer een persoonlijke toegangstoken
Nu je je site ID hebt, moet je een toegangstoken verkrijgen. Het persoonlijke toegangstoken geeft toegang tot je Netlify-account, zodat GitHub Actions de implementatie op Netlify kan uitvoeren.
1. Klik op je profielpictogram (rechtsboven) en kies Gebruikersinstellingen om toegang te krijgen tot je profielinstellingen.
2. Op de nieuwe pagina, klik op Toepassingen (linkerpaneel) → Nieuw toegangstoken (onder de sectie Persoonlijke toegangstokens) om het maken van een nieuw toegangstoken te starten.
3. Voer op de nieuwe pagina een beschrijvende naam in voor het token en klik op Token genereren.
4. Kopieer nu het token naar een veilige plek.
Beveiliging van Site ID en Toegangstoken door Secrets te creëren
Nu je het site ID en toegangstoken van Netlify hebt, kun je ze aan je repository toevoegen om ze te gebruiken in de workflow van acties. Maar eerst moet je je site ID en toegangstoken beveiligen door geheimen te creëren.
1. Ga naar je GitHub-repository in je browser.
2. Klik vervolgens op het tabblad Instellingen → Geheimen (linkerpaneel) → Acties (onder Geheimen) om toegang te krijgen tot de lijst met acties die beschikbaar zijn in je repository.
3. Klik op Nieuw repository-geheim op de pagina Actiegeheimen om het toevoegen van een geheim te starten.
4. Geef nu een beschrijvende naam op voor het nieuwe geheim. In deze tutorial wordt echter NETLIFY_AUTH_TOKEN gebruikt als de naam van het geheim.
Voeg je toegangstoken toe als de Waarde en klik op Geheim toevoegen om het nieuwe geheim te maken.
5. Herhaal tot slot stap vier, maar voeg deze keer een geheim toe voor je site-ID.
Zodra toegevoegd, zie je de geheimen in de sectie Repository-geheimen, zoals hieronder weergegeven.
Downloaden en Implementeren van Artefact naar Netlify
Nu je Netlify-site en geheimen zijn ingesteld, voeg je een stap toe aan je workflow om naar Netlify te implementeren met behulp van je geheimen.
1. Werk je workflow bij door de onderstaande code toe te voegen met daarin de implementatietaak.
De volgende code bevat stappen om het geüploade artefact te downloaden en een andere stap om het naar Netlify te implementeren.
Je vindt de volledige code voor het ci.yml bestand in de GitHub-repository van ATA.
2. Voeg vervolgens de wijzigingen toe en duw ze naar de externe repository.
Je zou de laatste commit moeten zien worden uitgevoerd op de workflows pagina van de repository, zoals hieronder getoond.
Zodra gecommit, klik op de laatste uitvoering om meer details te bekijken.
Als de taken succesvol worden uitgevoerd, zie je een groen vinkje naast de taken en het productie-artefact onderaan de pagina.
3. Klik nu op de Implementatie taak (linker paneel) en breid de Implementatie naar Netlify taak uit. Je ziet de output van de stap, die de website URL bevat.
Klik op de Website URL om te controleren of de site werkt en toegankelijk is.
De URL wordt automatisch geopend in een nieuw tabblad in je webbrowser, zoals hieronder getoond. Deze output geeft aan dat je site correct werkt.
Verwijderen van ongebruikte artefacten om ruimte te besparen
Na elke release gebruik je meer schijfruimte wanneer je nieuwe releases uploadt en downloadt. Hoe bespaar je ruimte? Het verwijderen van ongebruikte artefacten is de meest haalbare oplossing. Je moet het aantal release artefacten beperken dat op elke server aanwezig is om te voorkomen dat duizenden releases zich opstapelen en de schijf vol raakt.
Naast het gebruik van de bewaarperiode-instelling om artefacten na verloop van tijd te verwijderen, kunt u het artefact ook verwijderen van de workflows-pagina op GitHub:
Op uw workflowpagina klikt u op het verwijderingspictogram naast het artefact om het te verwijderen.
Klik nu op OK in het dialoogvenster (bovenaan) om het verwijderen van het artefact te bevestigen.
Merk op dat het artefact hieronder niet meer op de pagina staat, wat bevestigt dat het succesvol is verwijderd.
Conclusie
Je hebt gezien hoe artefacten het eenvoudiger maken om complexere automatisering te ontwikkelen waarbij de ene workflow informatie levert aan de andere. Op dit moment zou u nu een beter begrip moeten hebben van GitHub Actions artefacten en hoe ze kunnen worden gebruikt voor uw implementatiereleases.
Met deze nieuwe kennis, waarom zou u dan geen gebruik maken van GitHub Actions voor de workflowautomatisering van uw volgende project?
Source:
https://adamtheautomator.com/github-actions-artifacts-2/