Πώς να ρυθμίσετε τη συνεχή ενσωμάτωση με τους κύκλους CI, EmberJS και GitHub

Τι είναι η συνεχής ολοκλήρωση και γιατί πρέπει να το κάνουμε;

Η συνεχής ολοκλήρωση (CI) είναι η διαδικασία αυτοματοποίησης της δημιουργίας και δοκιμής κώδικα. Αυτό συμβαίνει κάθε φορά που ένα μέλος της ομάδας του έργου κάνει αλλαγές στον έλεγχο της έκδοσης.

Για παράδειγμα, πραγματοποιείτε αλλαγές στον κώδικα του αποθετηρίου σας GitHub και προωθείτε αυτήν την αλλαγή στον κύριο κλάδο. Αυτό ενεργοποιεί μια διαδικασία CI για τη δημιουργία ενός εικονικού περιβάλλοντος και την εκτέλεση εντολών. Οι εντολές διαμορφώνουν το περιβάλλον όπως θα ήταν σε έναν διακομιστή παραγωγής. Στη συνέχεια, τρέχουν την αυτοματοποιημένη σουίτα δοκιμών που γράψατε για να δοκιμάσουν τον κωδικό σας.

Το CI χρησιμοποιείται συχνά για:

  • επικυρώστε ξεχωριστούς κλάδους στους οποίους εργάζεται ένας προγραμματιστής. Τα υποκαταστήματα δοκιμάζονται καλά πριν συγχωνευθούν στον κύριο κλάδο του έργου.
  • για να επικυρώσετε και να αναπτύξετε τις τελευταίες εκδόσεις ενός έργου ως επικύρωση κλάδων.

Η συνεχής ενσωμάτωση κώδικα στο έργο και η δοκιμή μειώνει:

  • συγχώνευση συγκρούσεων
  • δύσκολο να διορθώσετε σφάλματα
  • αποκλίνουσες στρατηγικές κώδικα
  • διπλές προσπάθειες

Διατηρεί τον κύριο κλάδο καθαρό. Διαβάστε περισσότερα για τη συνεχή ολοκλήρωση εδώ.

Εκπαιδευτικοί στόχοι

Αυτό είναι το πρώτο σας βήμα στη διαδικασία συνεχούς ολοκλήρωσης. Ας κρατήσουμε τα πράγματα πολύ απλά. Στόχος μας είναι να δημιουργήσουμε ένα αποθετήριο στο GitHub και να τρέξουμε το CI σε αυτό το αποθετήριο κάθε φορά που ωθείται μια νέα δέσμευση. Θα εμφανίσουμε επίσης ένα σήμα που υποδεικνύει την κατάσταση της τρέχουσας έκδοσής μας.

Τα εργαλεία που θα χρησιμοποιήσουμε για αυτήν την επίδειξη:

  • GitHub
  • ΚύκλοςCI
  • EmberCLI

Τώρα ας ξεκινήσουμε.

Ρύθμιση λογαριασμού Github

Εάν δεν έχετε ήδη, αποκτήστε έναν δωρεάν λογαριασμό GitHub.

Στη συνέχεια, μεταβείτε στις Ρυθμίσεις χρέωσης και εισαγάγετε τα στοιχεία πληρωμής σας. Μην ανησυχείτε για να χρεωθείτε. Θα έχουμε 1000 λεπτά δωρεάν λεπτά κατασκευής κάθε μήνα με την επιλογή που θα επιλέξουμε (Circle CI). Αυτό είναι περισσότερο από αρκετό για αυτό το έργο επίδειξης.

Τέλος, δημιουργήστε ένα νέο αποθετήριο που ονομάζεται ci-ember-demo . Μην το αρχικοποιήσετε.

Δημιουργήστε μια βασική εφαρμογή Ember

Εγκαταστήστε το Ember CLI

Ας χρησιμοποιήσουμε το NPM για να εγκαταστήσουμε το Ember CLI. Περιλαμβάνει τα εργαλεία που χρειαζόμαστε για τη δημιουργία ενός βασικού έργου.

npm install -g ember-cli

Δημιουργήστε ένα έργο Ember

Ας δημιουργήσουμε ένα έργο που ονομάζεται ci-ember-demo χρησιμοποιώντας το 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

Τώρα, κατευθυνθείτε προς //localhost:4200και θα πρέπει να δείτε αυτήν την οθόνη:

Το βασικό έργο Ember εκτελείται όπως αναμενόταν. Μπορείτε να τερματίσετε τη λειτουργία του διακομιστή με ctrl+C.

Βεβαιωθείτε ότι περνούν οι προεπιλεγμένες δοκιμές

Τώρα στο τερματικό ας εκτελέσουμε τις δοκιμές που δημιουργήθηκαν με το έργο:

npm test # alternatively ember test

Θα πρέπει να δείτε μια σειρά έξι προεπιλεγμένων δοκιμών. Όλα πρέπει να περάσουν.

Η ιδέα είναι ότι αυτές και άλλες δοκιμές που γράφετε καθώς αναπτύσσετε το έργο σας θα εκτελούνται συνεχώς καθώς πιέζετε αλλαγές στο αποθετήριο.

Σπρώξτε το έργο σας στο Github

Μεταβείτε στον φάκελο του έργου ci-ember-demo για να επεξεργαστείτε το README.mdαρχείο. Αντικαταστήστε ό, τι υπάρχει με κάτι σαν:

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

Αποκτήστε το απομακρυσμένο URL και ρυθμίστε το

Επιστρέψτε στο αποθετήριο GitHub και τραβήξτε το απομακρυσμένο URL που θα μοιάζει με αυτό:

[email protected]:username/repo_name.git

Μέσα στο φάκελο ci-ember-demo αρχικοποιήστε το αποθετήριο:

git init

Στη συνέχεια, προσθέστε το απομακρυσμένο URL, ώστε το Git να γνωρίζει πού προωθούμε τα αρχεία μας:

git remote add origin [email protected]:username/repo_name.git # check that it's been set, should display the updated origin git remote -v

Ώρα να προωθήσουμε τον κωδικό μας στο 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

Το απομακρυσμένο αποθετήριο Git ενημερώνεται με τις αλλαγές που προωθήσαμε:

Now we have a main project directory and a repository. It’s time to set up the CI platform.

Setup CircleCI — A continuous integration and delivery platform

CircleCI will be our tool of choice for Continuous Integration. It’s straightforward, popular, and comes with 1000 free monthly build minutes.

Head over to GitHub’s marketplace and set up a plan.

Select the Free plan.

Next head over to CircleCI and login with your GitHub account:

Once you’re in, go to the Add Project section. You’ll see a list of all your GitHub repositories.

Click Setup Project on our ci-ember-demo.

Then select Linux as our operating system and Node for language.

Click Start Building. The project will attempt to build and do what continuous integration processes do.

Since we have no configuration settings the process will almost immediately fail.

Head over to the Builds tab that lists any Jobs that ran, you should see that failure like so:

This is what we expected. Nothing really works because the CI process isn’t configured.

Configure CI in the Ember Project

Get the markdown to display our project’s CI status

CircleCI provides embeddable status badges. They display the status of your latest build. Before we go let’s get the markdown for a status badge.

Go to Settings → Projects → ember-ci-demo’s settings → Status Badges.

Copy the embed code in Markdown.

In the ci-ember-demo's README.md file, paste the embed code under the title. It will look something like this:

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

Add the CI configuration

In the root of ember-ci-demo create a folder named .circleci and create a file called config.yml. This is where all of our configuration settings will go. Add the following:

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

Let’s stop and take a look at what’s happening here.

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

Next, we’ll set up jobs to run when the CI is triggered.

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"

Finally, let’s tell it what to do once the environment is setup:

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

Push the changes to the master branch.

Review your changes and push them up to the master branch of the repository.

Now, head back to CircleCI and check out the Jobs tab. You’ll now see a passing build. It was able to take the settings from config.yml, set up the correct virtual environments, and run our tests just as we did locally when we first generated the project.

Αν κοιτάξετε το αποθετήριο στο GitHub, θα δείτε το σήμα κατάστασης CircleCI με πράσινο χρώμα. Αυτό δείχνει πάλι ότι περνάει η τελευταία έκδοση.

συμπέρασμα

Αυτό είναι! Τώρα όποτε δημιουργείτε ένα νέο αίτημα έλξης ή προωθείτε τυχόν αλλαγές στο master, το CI θα εκτελεί όλες τις δοκιμές. Η κατάσταση αυτής της εργασίας θα εμφανίζεται στο CircleCI και το σήμα στο αποθετήριο σας. Περάστε ή αποτύχετε, παίρνετε τις σωστές πληροφορίες που χρειάζεστε για να αναπτύξετε καλά.

Συγχαρητήρια για τα πρώτα σας βήματα στη συνεχή ολοκλήρωση!

Πηγές

Τι είναι η συνεχής ολοκλήρωση; - Σαμ Γκούκενχαιμερ