Zo gebruik je GitHub Actions om met je WordPress site aan continuous deployment te doen

Continuous deployment is een essentieel onderdeel van moderne webontwikkeling. Het stelt ontwikkelaars in staat om automatisch wijzigingen de deployen vanuit een versiebeheersysteem naar een live omgeving. Deze aanpak vermindert handmatige fouten en versnelt het ontwikkelproces, zodat je website altijd up-to-date is met de laatste codewijzigingen.

Als Kinsta-gebruiker kun je SSH gebruiken om wijzigingen direct naar je server te pushen. Met GitHub Actions kun je het hele deploymentproces automatiseren en updates naadloos uitrollen naar je live site.

Dit artikel leidt je door het instellen van continue deployment voor je WordPress site gehost op Kinsta met behulp van GitHub Actions. We behandelen alles van het instellen van je lokale omgeving tot het pushen van wijzigingen naar GitHub en ze automatisch uitrollen naar je live site.

Vereisten

Voordat je continuous deployment kunt instellen voor je WordPress site op Kinsta, zijn er een paar dingen die je nodig hebt:

1. Je WordPress site moet al gehost worden op Kinsta.
2. Je moet je site lokaal ophalen. Je kunt DevKinsta gebruiken of een backup downloaden.
3. Een GitHub repository om de code van je site op te slaan en te pushen.
4. Basiskennis van Git, zoals het pushen van code en het gebruik van een .gitignore bestand.

Lokaal je site ophalen en GitHub instellen

Als Kinsta-gebruiker is de eenvoudigste manier om toegang te krijgen tot de lokale bestanden van je WordPress site het gebruik van DevKinsta. Met een paar klikken kun je je site van de Kinsta server naar DevKinsta pullen, zodat je lokaal aan je site kunt werken.

Om dit te doen:

1. Open DevKinsta en klik op Site toevoegen.
2. Selecteer de optie Importeren van Kinsta. Hiermee wordt alles over je site gedownload zodat je er lokaal bij kunt om te ontwikkelen.

Zodra je site lokaal beschikbaar is, open je de map van de site in de code editor van je voorkeur. Voordat je de bestanden naar GitHub pusht, voeg je een .gitignore bestand toe in de hoofdmap van je project om te voorkomen dat je onnodige WordPress core bestanden, uploads of gevoelige informatie uploadt. Je kunt een standaard .gitignore template voor WordPress gebruiken . Kopieer de inhoud van het template en sla het op.

Maak vervolgens een GitHub repository aan en push de bestanden van je site naar GitHub.

GitHub secrets instellen voor Kinsta

Om de deployment van GitHub naar Kinsta te automatiseren, heb je een aantal belangrijke SSH gegevens nodig, waaronder je gebruikersnaam, wachtwoord, poort en IP adres. Omdat deze gevoelig zijn, moet je ze opslaan als GitHub secrets.

Om secrets toe te voegen in GitHub:

1. Ga naar je repository op GitHub.
2. Klik op Settings > Secrets and Variables > Actions > New repository secret.
3. Voeg de volgende secrets toe:
   • KINSTA_SERVER_IP
   • KINSTA_USERNAME
   • PASSWORD
   • PORT

Je kunt deze gegevens vinden op de Info pagina van je site in je MyKinsta dashboard.

Als deze installatie is voltooid, kun je nu de automatische deployment voor je WordPress site configureren.

Je Kinsta server configureren

Voordat je het deploymentproces met GitHub Actions automatiseert, moet je je Kinsta server configureren om code van je GitHub repository te ontvangen en te deployen.

Dit houdt twee stappen in: het creëren van een kale Git repository op je Kinsta server en het instellen van een post-receive hook om de laatste wijzigingen automatisch uit te rollen naar je live site.

1. Een kale Git repository op Kinsta maken

Een kale Git repository is een externe bestemming waar GitHub je code naartoe zal pushen. Deze repository heeft geen werkmap – het is een centrale repository ontworpen om je code te ontvangen en op te slaan.

Om dit te doen, SSH je eerst naar je Kinsta server met het SSH terminal commando dat beschikbaar is in je MyKinsta dashboard:

Navigeer vervolgens naar de private map op je server (of maak hem aan als hij nog niet bestaat):

mkdir -p /www/your-site/private
cd /www/your-site/private

Vervang hier your-site door de daadwerkelijke mapnaam voor je site, die je kunt vinden in het pad op je dashboard.

Maak tot slot de kale Git repository aan:

git init --bare your-repo.git

Voor your-repo kun je de naam van je GitHub repository gebruiken voor consistentie, maar je kunt het elke willekeurige naam geven.

Dit kale repository zal de code ontvangen die van GitHub gepushed wordt.

2. De post-receive hook instellen

Als je kale Git repository klaar is, is het instellen van een post-receive hook de volgende stap. Dit script zal automatisch de code naar je live site deployen zodra er nieuwe wijzigingen naar de main branch in GitHub worden gepushed.

Om dit te doen, navigeer je naar de hooks map in je kale Git repository:

cd /www/your-site/private/your-repo.git/hooks

Maak en bewerk de post-receive hook:

nano post-receive

Voeg vervolgens het volgende script toe aan het bestand post-receive. Dit script controleert de nieuwste code in de public directory van je live site:

#!/bin/bash
TARGET="/www/your-site/public"
GIT_DIR="/www/your-site/private/your-repo.git"

while read oldrev newrev ref
do
    BRANCH=$(git rev-parse --symbolic --abbrev-ref $ref)

    if [[ $BRANCH == "main" ]];
    then
        echo "Ref $ref received. Deploying ${BRANCH} branch to production..."
        git --work-tree=$TARGET --git-dir=$GIT_DIR checkout -f
    else
        echo "Ref $ref received. Doing nothing: only the main branch may be deployed on this server."
    fi
done

Het script hierboven zet code uit van alleen de main branch. De variabele TARGET wijst naar de map waar de bestanden van je live site staan (/www/your-site/public). De variabele GIT_DIR wijst naar de kale Git repository.

Sla het bestand op en sluit het af door op Ctrl + X, dan Y en Enter te drukken.

Maak het script ten slotte uitvoerbaar zodat het na elke push automatisch kan worden uitgevoerd:

chmod +x post-receive

Op dit punt is de post-receive hook klaar om automatisch code te deployen wanneer wijzigingen naar de main branch in je GitHub repository worden gepushed.

3. Een GitHub persoonlijk toegangstoken (PAT) genereren en toevoegen

Omdat GitHub niet langer wachtwoord-gebaseerde authenticatie ondersteunt, moet je een PAT gebruiken om te authenticeren als je code naar GitHub pusht via SSH. Dit token zal GitHub in staat stellen je pushes veilig te accepteren.

Om het token te genereren:

1. Ga naar je GitHub account en klik op je profielfoto, kies dan Settings.
2. Klik in de linker zijbalk op Developer settings.
3. Klik op Personal access tokens > Tokens (classic).
4. Klik op Generate new token en geef het een naam (bijv. “Kinsta Deployment Token”).
5. Vink onder Select scopes repo aan (voor volledige controle over privé repositories).
6. Klik op Generate token en kopieer het token. (Dit is de enige keer dat je hem kan zien)

Voer vervolgens het volgende commando uit om je GitHub repository als remote toe te voegen, waarbij je de placeholders vervangt door je werkelijke gegevens:

git remote add origin https://your-username:[email protected]/your-username/your-repo.git

Vervang

• your-username met je GitHub gebruikersnaam.
• YOUR_PERSONAL_ACCESS_TOKEN door het token dat je zojuist hebt gegenereerd.
• your-repo door de naam van je GitHub repository.

De GitHub Actions workflow maken voor automatische deployment

Nu je WordPress site op je lokale machine staat, naar GitHub is gepushed en je de benodigde GitHub Secrets hebt ingesteld, is het tijd om een GitHub Actions workflow te maken. Deze workflow implementeert wijzigingen automatisch naar Kinsta wanneer je naar de main branch pusht.

Om het deployen te automatiseren, zul je een YAML bestand maken dat definieert hoe het deployen zal gebeuren. Dit is hoe je het instelt:

1. Maak een nieuwe map genaamd .github/workflows in je GitHub repository.
2. Maak in deze map een nieuw bestand met de naam deploy.yml.
3. Voeg de volgende inhoud toe aan het deploy.yml bestand:

name: Deploy to Kinsta

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Deploy to Kinsta via SSH
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.KINSTA_SERVER_IP }}
          username: ${{ secrets.KINSTA_USERNAME }}
          password: ${{ secrets.PASSWORD }}
          port: ${{ secrets.PORT }}
          script: |
            cd /www/your-site/private/your-repo.git  # Navigate to the bare Git repository on Kinsta
            git --work-tree=/www/your-site/public --git-dir=/www/your-site/private/your-repo.git fetch origin main  # Fetch the latest changes from GitHub
            git --work-tree=/www/your-site/public --git-dir=/www/your-site/private/your-repo.git reset --hard origin/main  # Deploy changes to the live site

Deze workflow nader bekeken

Hier is een uitsplitsing van de workflow:

• Trigger: De workflow wordt getriggerd elke keer als code wordt gepushed naar de main branch van je GitHub repository.
• Jobs: De workflow bevat één job genaamd deploy, die draait op een Ubuntu virtuele machine (ubuntu-latest).
• Checkout code: Deze stap gebruikt de actions/checkout@v2 actie om de nieuwste code van je GitHub repository te halen.
• Deployen via SSH: De appleboy/ssh-action wordt gebruikt om een veilige verbinding te maken met je Kinsta server via SSH met de secrets die je hebt geconfigureerd (server IP, gebruikersnaam, wachtwoord en poort). Het script in deze stap voert de volgende commando’s uit:
  • cd /www/your-site/private/your-repo.git: Navigeert naar de kale Git repository op je Kinsta server.
  • git fetch origin main: Haalt de laatste wijzigingen op van de main branch in je GitHub repository.
  • git reset --hard origin/main: Past die wijzigingen toe door de live site in de public directory waar WordPress wordt gehost bij te werken.

De workflow testen

Als je de workflow eenmaal hebt ingesteld, kun je hem testen door een kleine verandering naar je GitHub repository’s main branch te pushen. Elke keer dat je een wijziging pusht, activeert GitHub Actions automatisch de deployment, waarbij de laatste versie van je code wordt opgehaald en uitgerold naar je live site op Kinsta.

Je kunt de status van je deployment in de gaten houden door naar het tabblad Actions in je GitHub repository te gaan. Als de workflow fouten tegenkomt, zie je gedetailleerde logs om je te helpen bij het oplossen van problemen.

Samenvatting

Door continuous deployment in te stellen voor je WordPress site met GitHub Actions, automatiseer je je ontwikkelworkflow en zorg je ervoor dat elke wijziging die naar GitHub wordt gepushed automatisch wordt uitgerold naar je live site op Kinsta.

Het stelt je ook in staat om extra workflows in de pijplijn te integreren, zoals testen en opmaken met behulp van het @wordpress/scripts pakket.

Wat vinden jullie van dit proces? Is er nog iets dat je graag uitgelegd wilt hebben, of heb je fouten ondervonden bij het volgen van deze handleiding? Deel je vragen of feedback in de comments hieronder!

Joel Olawanle Kinsta

Joel is een Frontend developer die bij Kinsta werkt als Technical Editor. Hij is een gepassioneerd leraar met liefde voor open source en heeft meer dan 200 technische artikelen geschreven, voornamelijk over JavaScript en zijn frameworks.

• Website
• LinkedIn
• Twitter
• YouTube