La integració i desplegament continus (CI/CD) són pràctiques essencials en el desenvolupament de programari modern. Aquestes pràctiques permeten automatitzar el procés de construcció, prova i desplegament de les aplicacions, assegurant que els canvis en el codi es puguin integrar i desplegar de manera ràpida i fiable.

• Entendre els conceptes bàsics de CI/CD.
• Configurar un pipeline de CI/CD per a una aplicació Vue.js.
• Utilitzar eines populars de CI/CD com GitHub Actions i Netlify.

• Definició: La integració contínua és una pràctica de desenvolupament de programari on els desenvolupadors integren els seus canvis de codi en un repositori compartit diverses vegades al dia.
• Objectiu: Detectar errors ràpidament i millorar la qualitat del programari.
• Eines Populars: Jenkins, Travis CI, CircleCI, GitHub Actions.

• Definició: El desplegament continu és una pràctica on els canvis de codi que passen les proves automàtiques es despleguen automàticament a un entorn de producció.
• Objectiu: Reduir el temps de lliurament de noves funcionalitats i correccions de bugs.
• Eines Populars: Netlify, Vercel, Heroku, AWS CodePipeline.

1. Crear un Repositori a GitHub:

   • Navega a GitHub i crea un nou repositori.
   • Clona el repositori al teu ordinador local.

2. Afegir el Codi de l'Aplicació Vue.js:

   • Si no tens una aplicació Vue.js, pots crear-ne una nova utilitzant Vue CLI:

     vue create my-vue-app
     

   • Afegeix el codi de l'aplicació al repositori i fes un commit:

     git add .
     git commit -m "Initial commit"
     git push origin main
     

1. Crear un Workflow de GitHub Actions:

   • Afegeix un fitxer de workflow a .github/workflows/ci.yml:

     name: CI
     
     on:
       push:
         branches: [ main ]
       pull_request:
         branches: [ main ]
     
     jobs:
       build:
         runs-on: ubuntu-latest
     
         steps:
         - uses: actions/checkout@v2
         - name: Set up Node.js
           uses: actions/setup-node@v2
           with:
             node-version: '14'
         - run: npm install
         - run: npm run build
         - run: npm test
     

2. Explicació del Workflow:

   • name: Nom del workflow.
   • on: Esdeveniments que desencadenen el workflow (push i pull request a la branca main).
   • jobs: Definició dels treballs a realitzar.
     • runs-on: Sistema operatiu on s'executarà el treball (Ubuntu).
     • steps: Passos del treball.
       • uses: Accions predefinides de GitHub (checkout del codi, configuració de Node.js).
       • run: Comandes a executar (instal·lació de dependències, construcció de l'aplicació, execució de proves).

1. Crear un Compte a Netlify:

   • Navega a Netlify i crea un compte.

2. Desplegar l'Aplicació:

   • Connecta el teu repositori de GitHub a Netlify.
   • Configura els paràmetres de construcció:
     • Build Command: npm run build
     • Publish Directory: dist
   • Fes clic a "Deploy Site".

3. Automatitzar el Desplegament:

   • Netlify automàticament desplegarà l'aplicació cada vegada que es faci un push a la branca main.

Configurar un pipeline de CI/CD per a una aplicació Vue.js utilitzant GitHub Actions i Netlify.

1. Crea un repositori a GitHub i afegeix una aplicació Vue.js.
2. Configura un workflow de GitHub Actions per a la integració contínua.
3. Desplega l'aplicació a Netlify i configura el desplegament continu.

1. Crear el Repositori i Afegeix l'Aplicació:

   git init
   vue create my-vue-app
   cd my-vue-app
   git remote add origin <URL del teu repositori>
   git add .
   git commit -m "Initial commit"
   git push -u origin main
   

2. Configurar GitHub Actions:

   • Afegeix el fitxer .github/workflows/ci.yml amb el contingut proporcionat anteriorment.

3. Desplegar a Netlify:

   • Connecta el repositori a Netlify i configura els paràmetres de construcció.

En aquesta secció, hem après els conceptes bàsics de CI/CD i hem configurat un pipeline de CI/CD per a una aplicació Vue.js utilitzant GitHub Actions i Netlify. Aquestes pràctiques ens permeten automatitzar el procés de construcció, prova i desplegament, millorant la qualitat del nostre programari i reduint el temps de lliurament de noves funcionalitats.