Differences
This shows you the differences between two versions of the page.
|
ss:laboratoare:06 [2025/02/20 16:30] 127.0.0.1 external edit |
ss:laboratoare:06 [2026/04/06 18:47] (current) ciprian.popescu0411 |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ===== Laboratorul 06. ===== | + | ====== Laborator 6: Implementarea unui pipeline CI/CD pentru o platformă web ====== |
| + | Pentru acest laborator vom configura și implementa pas cu pas un sistem complet de integrare continuă pentru platforma web, care conține un Backend Go și un Frontend React. | ||
| + | ===== Obiective ===== | ||
| + | |||
| + | - Înțelegerea conceptelor de CI/CD și a avantajelor lor în proiecte web. | ||
| + | - Configurarea unor workflow-uri GitHub Actions care: | ||
| + | * Compilează de la zero componentele sistemului (automat la fiecare push). | ||
| + | * Execută testările automate pentru a se asigura că nu s-au introdus erori. | ||
| + | * Rulează analiza de securitate pe cod prin CodeQL. | ||
| + | - Activarea funcționalităților de scanare automată și actualizare a dependențelor (Dependabot). | ||
| + | |||
| + | ===== De ce CI/CD pentru web? ===== | ||
| + | |||
| + | Într-un proiect structurat pe mai multe planuri (server, client, deployment în Docker), CI/CD este esențial: | ||
| + | * **Prevenirea regresiei** — codul este testat și compilat curat, într-un mediu complet izolat la fiecare actualizare. | ||
| + | * **Detectare timpurie** — un build eșuat sau o vulnerabilitate sunt observate imediat. | ||
| + | * **Artefacte de release** — rapoartele de coverage, imaginile sau binarul final sunt furnizate automat la confirmarea pașilor cu succes. | ||
| + | |||
| + | ===== Partea 1: Activarea funcționalităților de bază (Dependabot) ===== | ||
| + | |||
| + | Înainte de a configura fluxurile propriu-zise, este utilă activarea scanărilor automate de dependențe: | ||
| + | |||
| + | **Dependabot** configurează verificarea automată a versiunilor pentru dependențele folosite în codul proiectului. Acesta efectuează interogări săptămânale pentru componentele NodeJS, Go, precum și pentru imaginile Docker folosite și generează automat PR-uri de securitate. | ||
| + | |||
| + | - Mergeți la setările repository-ului (''Settings''); | ||
| + | - Deschideți secțiunea ''Code security and analysis'' (sau ''Advanced security''); | ||
| + | - Activați atât ''Dependabot alerts'', cât și ''Dependabot security updates''. | ||
| + | |||
| + | ===== Partea 2: Automated building and testing ===== | ||
| + | |||
| + | Obiectivul principal al acestei secțiuni este definirea unui workflow automatizat care, la fiecare ''push'' sau ''pull request'' pe branch-ul ''main'', va compila componentele și va rula testele. | ||
| + | |||
| + | Funcționalitățile de automatizare din GitHub folosesc sistemul **GitHub Actions**. Workflow-urile sunt definite ca fișiere YAML în directorul ''.github/workflows/''. | ||
| + | |||
| + | ==== 2.1 Structura fișierului ==== | ||
| + | |||
| + | == Pasul 1: == | ||
| + | |||
| + | Asigurați-vă că în rădăcina proiectului există folderul ''.github/workflows''. Dacă nu există, creați-l: | ||
| + | |||
| + | <code bash> | ||
| + | mkdir -p .github/workflows | ||
| + | </code> | ||
| + | |||
| + | == Pasul 2: == | ||
| + | |||
| + | În acest folder, creați un fișier numit ''ci.yml'': | ||
| + | |||
| + | <code bash> | ||
| + | touch .github/workflows/ci.yml | ||
| + | </code> | ||
| + | |||
| + | == Pasul 3: == | ||
| + | |||
| + | Introduceți următorul conținut în fișier: | ||
| + | |||
| + | <file yaml ci.yml> | ||
| + | name: CI | ||
| + | |||
| + | on: | ||
| + | push: | ||
| + | branches: [main] | ||
| + | pull_request: | ||
| + | branches: [main] | ||
| + | |||
| + | permissions: | ||
| + | contents: read | ||
| + | |||
| + | jobs: | ||
| + | build-and-test: | ||
| + | runs-on: ubuntu-latest | ||
| + | |||
| + | steps: | ||
| + | - name: Checkout repository | ||
| + | uses: actions/checkout@v4 | ||
| + | |||
| + | # Go backend | ||
| + | - name: Install system dependencies (tesseract + leptonica) | ||
| + | run: | | ||
| + | sudo apt-get update | ||
| + | sudo apt-get install -y libtesseract-dev libleptonica-dev tesseract-ocr | ||
| + | |||
| + | - name: Setup Go | ||
| + | uses: actions/setup-go@v5 | ||
| + | with: | ||
| + | go-version: "1.24" | ||
| + | |||
| + | - name: Go build | ||
| + | working-directory: server | ||
| + | run: go build ./... | ||
| + | |||
| + | - name: Go test | ||
| + | working-directory: server | ||
| + | run: go test ./... -v -coverprofile=coverage.out 2>&1 | tee test-results.txt | ||
| + | |||
| + | - name: Upload Go test results | ||
| + | if: always() | ||
| + | uses: actions/upload-artifact@v4 | ||
| + | with: | ||
| + | name: go-test-results | ||
| + | path: server/test-results.txt | ||
| + | |||
| + | - name: Upload Go coverage report | ||
| + | if: always() | ||
| + | uses: actions/upload-artifact@v4 | ||
| + | with: | ||
| + | name: go-coverage | ||
| + | path: server/coverage.out | ||
| + | |||
| + | # React/Vite frontend | ||
| + | - name: Setup Node.js | ||
| + | uses: actions/setup-node@v4 | ||
| + | with: | ||
| + | node-version: "22" | ||
| + | cache: "yarn" | ||
| + | cache-dependency-path: client/yarn.lock | ||
| + | |||
| + | - name: Install client dependencies | ||
| + | working-directory: client | ||
| + | run: yarn install --frozen-lockfile | ||
| + | |||
| + | - name: Client lint | ||
| + | working-directory: client | ||
| + | run: yarn lint | ||
| + | |||
| + | - name: Client build | ||
| + | working-directory: client | ||
| + | run: yarn build | ||
| + | |||
| + | # Docker build | ||
| + | - name: Docker build API image | ||
| + | working-directory: server | ||
| + | run: docker build -t ss-web-api:test . | ||
| + | </file> | ||
| + | |||
| + | ==== 2.2 Explicarea workflow-ului ==== | ||
| + | |||
| + | Acest workflow definește operațiile de ansamblu ale integrării: | ||
| + | * **Go backend**: instalează tesseract, configurează mediul Go 1.24, realizează build-ul și rulează testele, salvând rezultatele ca artifacte. | ||
| + | * **React/Vite frontend**: folosește Yarn pentru lint și build-ul aplicației. | ||
| + | * **Docker build**: verifică imaginea finală a serverului. | ||
| + | |||
| + | ===== Partea 3: Automated code quality analysis (CodeQL) ===== | ||
| + | |||
| + | Pentru analiza automată de securitate a codului, se utilizează **CodeQL**, un instrument oferit de GitHub. | ||
| + | |||
| + | ==== 3.1 Activare din GitHub ==== | ||
| + | |||
| + | - Accesați repository-ul pe GitHub. | ||
| + | - Navigați la ''Settings'' → ''Code security and analysis''. | ||
| + | - În secțiunea ''Code scanning'', selectați ''Set up'' și alegeți ''Advanced''. | ||
| + | |||
| + | <note important> | ||
| + | Pentru a utiliza CodeQL pe conturi gratuite, repository-ul trebuie să fie **Public**. În caz contrar, workflow-ul va eșua și acest pas trebuie omis. | ||
| + | </note> | ||
| + | |||
| + | ==== 3.2 Unde găsiți rapoartele? ==== | ||
| + | |||
| + | - ''Security → Code scanning alerts'' | ||
| + | * Lista vulnerabilităților detectate. | ||
| + | * Link direct către codul afectat. | ||
| + | - ''Actions → CodeQL workflow'' | ||
| + | * Output detaliat al execuției analizelor. | ||
| + | |||
| + | ===== Partea 4: Testarea pipeline-ului ===== | ||
| + | |||
| + | ==== 4.1 Commit și push ==== | ||
| + | |||
| + | <code bash> | ||
| + | git add .github/workflows/ci.yml | ||
| + | git commit -m "Add CI pipeline" | ||
| + | git push | ||
| + | </code> | ||
| + | |||
| + | ==== 4.2 Verificare pe GitHub ==== | ||
| + | |||
| + | - Deschideți repository-ul pe GitHub. | ||
| + | - Navigați la tab-ul **Actions**. | ||
| + | - Verificați rularea workflow-ului de CI. | ||
| + | |||
| + | ==== 4.3 Badge-uri pentru informații vizuale ==== | ||
| + | |||
| + | Puteți adăuga un badge în `README.md`: | ||
| + | |||
| + | <code markdown> | ||
| + |  | ||
| + | </code> | ||
| + | |||
| + | <note> | ||
| + | Înlocuiți ''<nume_user>'' cu username-ul vostru GitHub. | ||
| + | </note> | ||
