Ce este integrarea continuă și de ce ar trebui să o facem?

Integrarea continuă (CI) este procesul de automatizare a construcției și testarea codului. Acest lucru se întâmplă de fiecare dată când un membru al echipei de proiect face modificări la controlul versiunii.

De exemplu, efectuați modificări în codul depozitului dvs. GitHub și împingeți această modificare în ramura principală. Acest lucru declanșează un proces CI pentru a construi un mediu virtual și a rula comenzi. Comenzile configurează mediul așa cum ar fi pe un server de producție. Apoi rulează suita de testare automată pe care ați scris-o pentru a vă testa codul.

CI este adesea folosit pentru:

  • validați sucursale separate la care lucrează un dezvoltator. Sucursalele sunt bine testate înainte de a fi fuzionate în ramura principală a proiectului.
  • pentru a valida și implementa cele mai recente versiuni ale unui proiect pe măsură ce sucursalele trec validarea.

Având codul integrat continuu în proiect și testându-l, se reduce:

  • fuzionează conflicte
  • erori greu de remediat
  • strategii de cod divergente
  • duplicarea eforturilor

Păstrează ramura principală curată. Citiți mai multe despre integrarea continuă aici.

ad-banner

Obiective tutoriale

Acesta este primul dvs. pas în procesul de integrare continuă. Deci, să păstrăm lucrurile foarte simple. Obiectivul nostru este să creăm un depozit pe GitHub și să rulăm CI pe acel depozit de fiecare dată când este împins un nou commit. Vom afișa, de asemenea, o insignă care indică starea versiunii noastre actuale.

Instrumentele pe care le vom folosi pentru această demonstrație:

Acum să începem.

Configurați un cont Github

Dacă nu aveți deja unul, obțineți-vă un cont GitHub gratuit.

Apoi, mergeți la Setări de facturare și introduceți informațiile dvs. de plată. Nu vă faceți griji pentru a fi taxat. Vom avea 1000 de minute lunar de minute de construcție gratuite cu opțiunea pe care o vom alege (Circle CI). Acest lucru este mai mult decât suficient pentru acest proiect demo.

În cele din urmă, creați un nou depozit numit ci-ember-demo. Nu-l inițializați.

Cum sa configurati integrarea continua cu Circle CI EmberJS si

Creați o aplicație de bază Ember

Instalați Ember CLI

Să folosim NPM pentru instalare Ember CLI. Include instrumentele de care avem nevoie pentru a genera un proiect de bază.

npm install -g ember-cli

Creați un proiect Ember

Să creăm un proiect numit ci-ember-demo folosind Ember CLI:

# cd into the desktop
  cd ~/desktop/
# create a new project
  ember new ci-ember-demo
# cd into the directory
  cd ci-ember-demo
# run the server
  ember s

Acum, mergeți la http://localhost:4200 și ar trebui să vedeți acest ecran:

1611221767 959 Cum sa configurati integrarea continua cu Circle CI EmberJS si
În funcțiune

Proiectul de bază Ember rulează conform așteptărilor. Puteți închide serverul cu ctrl+C.

Verificați dacă testele implicite trec

Acum, în terminal, să rulăm testele care au fost generate cu proiectul:

npm test
# alternatively
ember test
1611221767 310 Cum sa configurati integrarea continua cu Circle CI EmberJS si

Ar trebui să vedeți o serie de șase teste implicite rulate. Toate ar trebui să treacă.

Ideea este că aceste și alte teste pe care le scrieți pe măsură ce vă dezvoltați proiectul vor fi rulate continuu pe măsură ce introduceți modificările în depozit.

Împingeți-vă proiectul către Github

Mergeți la ci-ember-demo folderul proiectului pentru a edita fișierul README.md fişier. Înlocuiți ceea ce există cu ceva de genul:

## ci-ember-demo
This is a basic Ember CI demo application. Check out the tutorial: 'First Step into Continuous Integration with Circle CI'.

Obțineți adresa URL la distanță și setați-o

Întoarceți-vă la depozitul GitHub și apucați adresa URL de la distanță care ar trebui să arate astfel:

git@github.com:username/repo_name.git

În interiorul ci-ember-demo folderul inițializează depozitul:

git init

Atunci adăugați adresa URL la distanță așa că Git știe unde ne împingem fișierele spre:

git remote add origin git@github.com:username/repo_name.git
# check that it's been set, should display the updated origin
  git remote -v

E timpul să ne împingem codul către Github:

# add all changes
  git add .
# create a commit with a message
  git commit -m "[INIT] Project"
# push changes to the repo's master branch
  git push origin master

Depozitul Git de la distanță se actualizează cu modificările pe care le-am împins:

1611221767 914 Cum sa configurati integrarea continua cu Circle CI EmberJS si

Acum avem un director principal de proiect și un depozit. Este timpul să configurați platforma CI.

Setup CircleCI – O platformă continuă de integrare și livrare

Cerc CI va fi instrumentul nostru de alegere pentru integrare continuă. Este simplu, popular și vine cu 1000 de minute de construire lunare gratuite.

Mergeți spre Piața GitHub și stabiliți un plan.

1611221768 481 Cum sa configurati integrarea continua cu Circle CI EmberJS si

Selectați planul gratuit.

1611221768 118 Cum sa configurati integrarea continua cu Circle CI EmberJS si

Apoi mergeți la CircleCI și conectați-vă cu contul dvs. GitHub:

1611221768 525 Cum sa configurati integrarea continua cu Circle CI EmberJS si

Odată ce ați intrat, mergeți la Adăugați proiect secțiune. Veți vedea o listă cu toate depozitele dvs. GitHub.

Clic Proiect de instalare pe al nostru ci-ember-demo.

Apoi selectați Linux ca sistem de operare și nod pentru limbă.

1611221769 394 Cum sa configurati integrarea continua cu Circle CI EmberJS si

Clic Începeți să construiți. Proiectul va încerca să construiască și să facă ceea ce fac procesele de integrare continuă.

Deoarece nu avem setări de configurare, procesul va eșua aproape imediat.

Mergeți la Construiește filă care listează orice Locuri de munca care a funcționat, ar trebui să vedeți acest eșec așa:

1611221769 400 Cum sa configurati integrarea continua cu Circle CI EmberJS si

La asta ne așteptam. Nimic nu funcționează cu adevărat, deoarece procesul CI nu este configurat.

Configurați CI în Proiectul Ember

Obțineți reducerea pentru a afișa starea CI a proiectului nostru

CircleCI oferă ecusoane de stare încorporabile. Acestea afișează starea celei mai recente versiuni. Înainte de a pleca, să obținem reducerea pentru o insignă de stare.

Accesați Setări → Proiecte → ember-ci-demosetările → Insigne de stare.

Copiați codul de încorporare în Markdown.

1611221769 668 Cum sa configurati integrarea continua cu Circle CI EmberJS si

În ci-ember-demo‘s README.md fișier, lipiți codul de încorporare sub titlu. Va arăta cam așa:

## ci-ember-demo
[![CircleCI](https://circleci.com/gh/username/ci-ember-demo.svg?style=svg)](https://circleci.com/gh/username/ci-ember-demo)
...

Adăugați configurația CI

În rădăcina ember-ci-demo creați un folder numit .circleci și creați un fișier numit config.yml. Aici vor merge toate setările de configurare. Adăugați următoarele:

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:7.10-browsers
        environment:
          CHROME_BIN: "/usr/bin/google-chrome"
    steps:
      - checkout
      - run: npm install
      - run: npm test

Să ne oprim și să aruncăm o privire la ceea ce se întâmplă aici.

# set the version of CircleCI to use.
# we'll use the latest version.
version: 2

Apoi, vom configura lucrări pentru a rula atunci când CI este declanșat.

jobs:
  # tell CI to create a virtual node environment with Docker
  # specify the virtual image to use
  # the -browsers suffix tells it to have browsers pre-installed
  build:
    docker:
      - image: circleci/node:7.10-browsers
        
        # use Google Chrome to run our tests
        environment:
          CHROME_BIN: "/usr/bin/google-chrome"

În cele din urmă, să-i spunem ce trebuie să facem după configurarea mediului:

steps:
  - checkout
  
  # install the required npm packages
  - run: npm install
  # run the test suite
  - run: npm test

Împingeți modificările la ramura principală.

Examinați modificările și împingeți-le în sus către ramura principală a depozitului.

Acum, întoarce-te la CircleCI și verifică Locuri de munca filă. Acum veți vedea o versiune trecătoare. A fost capabil să preia setările de la config.yml, configurați mediile virtuale corecte și rulați testele la fel cum am făcut la nivel local atunci când am generat proiectul pentru prima dată.

1611221770 310 Cum sa configurati integrarea continua cu Circle CI EmberJS si

Dacă vă uitați la depozitul de pe GitHub, veți vedea insigna de stare CircleCI în verde. Acest lucru indică din nou că ultima versiune trece.

1611221770 511 Cum sa configurati integrarea continua cu Circle CI EmberJS si

Concluzie

Asta e! Acum, ori de câte ori creați o nouă cerere de extragere sau apăsați orice modificări la master, CI va rula toate testele. Starea acelei lucrări va fi afișată în CircleCI și insigna din depozitul dvs. Treceți sau nu, obțineți informațiile corecte de care aveți nevoie pentru a vă dezvolta bine.

Felicitări pentru că ați făcut primii pași către integrarea continuă!

Cum sa configurati integrarea continua cu Circle CI EmberJS si
Vremuri incitante

Surse

Ce este integrarea continuă? – Sam Guckenheimer