WSL

5 🚀CI/CD

🎯 Syfte

Sätta upp ett CI/CD-arbetsflöde som automatiskt:

  • Installerar beroenden
  • Kör tester (om tillgängliga)
  • Bygger Docker-images
  • (Valfritt) Puschar images till Docker Hub

🗂️ Struktur

Lägg till en workflow-fil i projektroten:

.github/
└── workflows/
    └── ci.yml

⚙️ Skapa arbetsflödet .github/workflows/ci.yml

name: Bygg och testa kalkylatorn

on:
  push:
    branches: [ "main" ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Hämta repo
      uses: actions/checkout@v3

    - name: Installera Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '18'

    - name: Bygg frontend
      working-directory: ./frontend
      run: |
        npm install
        npm run build

    - name: Bygg backend
      working-directory: ./backend
      run: |
        npm install
        node server.js &
        sleep 3
        curl "http://localhost:5000/calc/add?a=1&b=2"

Detta workflow testar API\:t genom ett faktiskt kall till /calc/add. Du kan bygga vidare på detta med riktiga testpaket som Jest eller Mocha för backend, och React Testing Library för frontend.

🔐 (Valfritt) Push till Docker Hub

  1. Skapa Docker Hub-konto och repo (ex: user/calc-app).

  2. Skapa två GitHub Secrets i ditt repo:

    • DOCKER_USERNAME
    • DOCKER_PASSWORD

  3. Lägg till i ci.yml:

    - name: Logga in i Docker Hub
      run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin

    - name: Bygg och pusha image
      run: |
        docker build -t ${{ secrets.DOCKER_USERNAME }}/calc-app ./frontend
        docker push ${{ secrets.DOCKER_USERNAME }}/calc-app

📊 Kontrollera status

  1. Push din kod:
git add .
git commit -m "Lägg till CI/CD-workflow"
git push
  1. Gå till GitHub → fliken Actions
  2. Se status, loggar, ev. felsteg

🧪 Övning – Verifiera CI-flödet

  1. Skapa .github/workflows/ci.yml

  2. Push till main

  3. Bekräfta att:

    • Frontend byggs
    • Backend startas och svarar
    • Eventuell Docker push fungerar

✅ Klar med Projektmodul 5!

Ditt projekt byggs nu automatiskt vid varje push. I nästa (valfria) modul tittar vi på publicering till moln eller avslutar projektet med reflektion och dokumentation.