So richten Sie die kontinuierliche Integration mit Circle CI, EmberJS und GitHub ein

Was ist kontinuierliche Integration und warum sollten wir das tun?

Continuous Integration (CI) ist der Prozess der Automatisierung des Erstellens und Testens von Code. Dies geschieht jedes Mal, wenn ein Mitglied des Projektteams Änderungen an der Versionskontrolle festlegt.

Sie nehmen beispielsweise Änderungen am Code Ihres GitHub-Repositorys vor und übertragen diese Änderung auf den Hauptzweig. Dies löst einen CI-Prozess aus, um eine virtuelle Umgebung zu erstellen und Befehle auszuführen. Die Befehle konfigurieren die Umgebung wie auf einem Produktionsserver. Anschließend führen sie die automatisierte Testsuite aus, die Sie zum Testen Ihres Codes geschrieben haben.

CI wird oft verwendet, um:

  • Überprüfen Sie separate Zweige, an denen ein Entwickler arbeitet. Zweige werden gut getestet, bevor sie in den Hauptzweig des Projekts integriert werden.
  • Validieren und Bereitstellen der neuesten Versionen eines Projekts, wenn Zweige die Validierung bestehen.

Wenn Code kontinuierlich in das Projekt integriert und getestet wird, reduziert sich Folgendes:

  • Konflikte zusammenführen
  • schwer zu behebende Fehler
  • divergierende Codestrategien
  • doppelte Anstrengungen

Es hält den Hauptzweig sauber. Lesen Sie hier mehr über Continuous Integration.

Lernziele

Dies ist Ihr erster Schritt in den kontinuierlichen Integrationsprozess. Lassen Sie uns die Dinge also sehr einfach halten. Unser Ziel ist es, ein Repository auf GitHub zu erstellen und CI in diesem Repository jedes Mal auszuführen, wenn ein neues Commit gepusht wird. Wir zeigen auch ein Abzeichen an, das den Status unseres aktuellen Builds anzeigt.

Die Tools, die wir für diese Demo verwenden werden:

  • GitHub
  • CircleCI
  • EmberCLI

Jetzt fangen wir an.

Richten Sie ein Github-Konto ein

Wenn Sie noch keinen haben, sichern Sie sich einen kostenlosen GitHub-Account.

Gehen Sie als Nächstes zu den Abrechnungseinstellungen und geben Sie Ihre Zahlungsinformationen ein. Mach dir keine Sorgen, dass du aufgeladen wirst. Wir haben monatlich 1000 Minuten freie Build-Minuten mit der von uns gewählten Option (Circle CI). Das ist mehr als genug für dieses Demo-Projekt.

Erstellen Sie schließlich ein neues Repository namens ci-ember-demo . Initialisieren Sie es nicht.

Erstellen Sie eine grundlegende Ember-Anwendung

Installieren Sie Ember CLI

Verwenden wir NPM, um Ember CLI zu installieren. Es enthält die Tools, die wir zum Generieren eines Basisprojekts benötigen.

npm install -g ember-cli

Erstellen Sie ein Ember-Projekt

Lassen Sie uns mit Ember CLI ein Projekt namens ci-ember-demo erstellen :

# 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

Gehen //localhost:4200Sie jetzt zu und Sie sollten diesen Bildschirm sehen:

Das Basis-Ember-Projekt läuft wie erwartet. Sie können den Server mit herunterfahren ctrl+C.

Überprüfen Sie, ob die Standardtests bestanden wurden

Lassen Sie uns nun im Terminal die Tests ausführen, die mit dem Projekt generiert wurden:

npm test # alternatively ember test

Sie sollten eine Reihe von sechs Standardtests sehen. Alles sollte vergehen.

Die Idee ist, dass diese und andere Tests, die Sie während der Entwicklung Ihres Projekts schreiben, kontinuierlich ausgeführt werden, wenn Sie Änderungen in das Repository übertragen.

Schieben Sie Ihr Projekt zu Github

Gehen Sie zum ci-ember-demo- Projektordner, um die README.mdDatei zu bearbeiten . Ersetzen Sie das, was da ist, durch:

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

Holen Sie sich Ihre Remote-URL und legen Sie sie fest

Gehen Sie zurück zu Ihrem GitHub-Repository und greifen Sie auf die Remote-URL zu, die folgendermaßen aussehen sollte:

[email protected]:username/repo_name.git

Im Ordner ci-ember-demo wird das Repository initialisiert:

git init

Fügen Sie dann die Remote-URL hinzu, damit Git weiß, wohin wir unsere Dateien verschieben:

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

Zeit, unseren Code an Github weiterzuleiten:

# 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

Das Remote-Git-Repository wird mit den Änderungen aktualisiert, die wir vorgenommen haben:

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.

If you look at the repository on GitHub, you’ll see the CircleCI status badge in green. This indicates again that the latest build is passing.

Conclusion

That’s it! Now whenever you create a new pull request or push any changes to master, the CI will run all the tests. The status of that job will be displayed in CircleCI and the badge on your repository. Pass or fail, you get the right information you need to develop well.

Congratulations on taking your first steps into Continuous Integration!

Sources

What is Continuous Integration? — Sam Guckenheimer