CI CD - Xand-r/IT-Landscape GitHub Wiki

Inleiding tot CI / CD

In dit stuk gaan we het nog hebben over CI / CD, maar wat is dat nu precies? CI / CD staat voor Continuous Integration en Continuous Deployment (of Delivery). Het zijn moderne softwareontwikkelpraktijken waarmee je sneller en consistenter code kan schrijven, testen en uitrollen.
Bij Continuous Integration wordt code van meerdere developers regelmatig samengevoegd. Elke keer dat er nieuwe code wordt gepusht, wordt automatisch een build gestart en worden tests uitgevoerd. Zo weet je meteen of je code goed werkt en blijft de main branch altijd stabiel.
Bij Continuous Deployment (of Delivery) wordt de geteste code automatisch uitgerold naar een test of productieomgeving zoals bij ons docker bijvoorbeeld. Bij Delivery gebeurt dit handmatig na goedkeuring, terwijl bij Deployment alles volledig automatisch verloopt.

Het gebruiken van CI / CD heeft meerdere voordelen. Een aantal van deze voordelen zijn:

  • Snellere feedback: Je weet meteen of je code breekt na een commit.
  • Minder bugs in productie: Fouten worden vroeg gevonden door automatische tests.
  • Snellere releases: Nieuwe features of fixes kunnen sneller live.
  • Meer vertrouwen in code: Door automatische checks hoef je je minder zorgen te maken dat er iets fout gaat.

Opzetten CI / CD Pipeline

Hoe kunnen wij nu in onze context gebruik gaan maken van CI / CD. Wij gaan dit aan de hand van github doen. Github heeft namelijk een functie genaamd Github Actions. Hiermee gaan wij wat automatisatie kunnen toepassen op onze projecten.
Aangezien dit een redelijk proces is gaan we dit opdelen in een aantal stukjes zodat alles overzichtelijk kan blijven.

Github Repository

Voor dit hoofdstuk gaan we er van uit dat jullie een beetje bekend staan met Github, maar om toch zeker te zijn dat iedereen op de zelfde pagina staat ga ik nog snel over het proces gaan om tot een eigen Github repository te komen.
Hiervoor heb je natuurlijk wel een project nodig. Als voorbeeld kan je wel een kleine html pagina gebruiken of gelijkaardig.

Om te beginnen is het belangrijk dat je een Github account hebt. Als je deze hebt is het zo simpel als een nieuwe repository aan te maken op jouw account.
Navigeer nu naar je nieuw gemaakt repository. Hier ga je onder de "code" tab rechts een groene knop zien dat ook "code" zegt. Hier mag je op klikken waarna je de url gaat copieren onder de https sectie. Deze link ga je nodig hebben om je project op de repository te krijgen.

Nu mag je met de link in je clipboard naar de locatie gaan waar je je project wilt bijhouden. In deze map gaan we github een nieuwe folder laten aanmaken die verbonden is met je github repo online. Zodra je een folder gevonden hebt mag je het commando git clone --repository link-- uitvoeren binnen deze folder (hier raad ik persoon Git Bash voor aan) met dan de link die je eerder gekopierd hebt. Zodra het commando klaar is met uitvoeren ga je hier een nieuwe folder te zien krijgen met dezelfde naam als je Github repository.

Om nu je project in de repo te krijgen moet je gewoon alle bestanden van je project kopieren naar de nieuwe github folder. Binnen die folder open je dan weer je command prompt en ga je 3 commando's uitvoeren:

  • git add .
  • git commit -m "project init"
  • git push

Zodra dat allemaal klaar is zou je nu online naar je repository moeten kunnen gaan en daar al je bestanden van je project kunnen zien.

docker-compose aanmaken

Nu dat je project op Github staat kunnen we beginnen met het maken van de pipeline aan de hand van Docker en Github Actions, maar eerst beginnen we met een nieuwe compose bestand te maken. Ondertussen hebben we wel al een paar keer met compose gewerkt dus dit zou geen probleem meer mogen zijn.

  1. dockerfile: Voor we beginnen met ons Compose bestand aan te maken is het belangrijk dat je een dockerfile hebt voor je project. Ons Compose bestand gaat gebruik maken van het bestaand dockerfile binnen het project om telkens een nieuwe image te maken. Zonder dockerfile gaat dit dus allemaal niet werken.

  2. .github/workflows directory: Binnen het mapje waar je project in staat (wat nu sinds de vorige stap gesynchroniseerd is met Github) gaan we nu een nieuwe folder aanmaken genaamd ".github" waarin we nog een folder gaan maken genaamd "workflows". Dit gaat de locatie zijn waar we onze nieuwe docker-compose bestand gaan steken.

  3. nieuw docker-compose.yml bestand: In onze nieuwe folder mag je nu een nieuwe "docker-compose.yml" bestand aanmaken en deze mag je dan openen met je gewenste IDE/Tekst Editor (VSCode aangeraden).
    In onze nieuwe compose bestand kopieer je de volgende code:
name: build and push Docker image

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: checkout repository
        uses: actions/checkout@v2

      - name: set lowercase username
        id: vars
        run: echo "username=${GITHUB_ACTOR,,}" >> $GITHUB_OUTPUT

      - name: log in to GitHub Container Registry
        uses: docker/login-action@v2
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: build the Docker image
        run: docker build -t ghcr.io/xand-r/my-docker-app:latest .

      - name: push the Docker image
        run: docker push ghcr.io/xand-r/my-docker-app:latest

In dit bestand is het zeer belangrijk dat je overal waar mijn Github username "xand-r" staat je eigen username zet. Nog een zeer balangrijk punt is dat dit in kleine letter moet (zelfs als jouw username "SuperMan" zou zijn)!

Pushen

Als dat allemaal gedaan is zijn we eigenlijk klaar! Momenteel is onze docker-compose zo geschreven dat hij elke keer bij een push, hij een nieuwe image gaat maken om zo deze direct te kunnen gebruiken voor de volgende keer.
Nu mag je weer de volgende 3 commando's een per een uitvoeren binnen je project folder, in dezelfde map waar je dockerfile en project bestanden steken:

  • git add .
  • git commit -m "addon pipeline"
  • git push

Zodra dat gebeurt is kan je online naar je repository gaan waar je dan onder de "code" tab naast de naam van de laatste commit een vinkje zou moeten zien. Dit betekend dat je compose file of je action succesvol een nieuwe image gemaakt heeft. Dit kan je ook zien aan de hand van de nieuw aangemaakte package rechts op je repository.

⚠️ **GitHub.com Fallback** ⚠️