top of page
Foto van schrijverBas Dam

Circle-CI, van code naar webserver met één klik.

Bijgewerkt op: 9 nov. 2023


Wanneer je ‘vroeger’ een website had, waren er altijd flink wat handelingen nodig om files via een FTP client op een webserver te krijgen. Vandaag de dag, met behulp van een verscheidenheid aan tooltjes, is dat een fluitje van een cent. Daarnaast krijg je een arsenaal aan mogelijkheden mee als builden, testen, etc.. In deze blog beschrijf ik wat mijn ervaringen zijn tijdens een eerste tool onderzoekje naar Circle-CI. Hint: Het wordt een positief verhaal, lees dus snel door!


Mijn zondagochtend begon met het inrichten van Circle-CI. Een collega raadde mij aan om deze tool eens te onderzoeken omdat het gebruik zeer gebruiksvriendelijk, snel en gratis zou zijn. Het doel: Met één druk op de knop mijn repository en website bijwerken.

Circle-CI is een CI/CD tool die gekoppeld kan worden aan je Github account. Aangezien mijn repository (website) hier staat geparkeerd, ga ik deze combinatie uitproberen.


Setup

Als je naar de site van Circle-CI gaat (https://circleci.com) kun je een account aanmaken en bij het inloggen kiezen voor ‘Log in with GitHub’. Er volgt daarna een soort van koppelingsactie met GitHub zodat we de GitHub repo’s kunnen gebruiken in Circle-CI. Het ritueel spreekt voor zich. Eenmaal op het dashboard van Circle-CI gaan we aan de linkerkant in het menu naar ‘Add Projects’. Wanneer we hier op klikken dan zien we alle repositories uit het GitHub account. Vervolgens kunnen we aan de rechterkant van een projectnaam klikken op ‘Set Up Project’. In het voorbeeld hieronder zijn de bovenste 2 projecten al ‘up and running’. Door ‘Unfollow Project’ te klikken kun je het project weer loskoppelen.

Wanneer we door de setup gaan zien we dat Circle-CI al heeft herkend in welke taal het project is ontwikkeld. Dit kan eventueel nog aangepast worden. Een vereiste is het aanmaken van een configuratie file in de vorm van een YML. Daarvoor moeten we in de projectmap een folder (.circleci) aanmaken (tip: gebruik de command line en vergeet de punt niet voor de foldernaam) om daarin een file genaamd ‘config.yml’ aan te maken (zie onderaan het artikel de indeling van het project).

In het dashboard scherm staat een voorbeeld van een .YML file. Deze kan gekopieerd worden en in de config.yml worden geplakt. Hieronder staat een voorbeeld van de .YML file die ik zelf gebruik.

















Deploy

Bij het pushen van het project naar GitHub wordt het project gebuild in CircleCI en alles dat in de .YML file staat gedefinieerd wordt uitgevoerd. We doen dit nog niet want zoals in het voorbeeld te zien moeten we een deploy.js file aanmaken waarin we een FTP actie gaan definiëren om de aangepaste files naar de webserver te FTP-en.













Vóórdat we kunnen deployen moeten we zorgen dat de ftp-deploy package aanwezig is in de package.json file van het project. Dit doen we door deze te installeren: npm install -D ftp-deploy. Deze zal aan de ‘devDependencies’ worden toegevoegd met de laatste versie.


De FTPUSERNAME, FTPPASS en FTPHOST variabelen kunnen we definiëren in Circle-CI. Wanneer we naar ‘Settings’ gaan en vervolgens onder het kopje ‘Organisation’ naar ‘Projects’ dan zien we het project onder ‘Followed projects’. Helemaal aan de rechterkant van het project zien we een settings radartje. Wanneer we hier op klikken kunnen we onder ‘Build settings’ kiezen voor ‘Environment Variables’. We kunnen hier nieuwe variabelen definiëren en deze gebruiken in de scripts die we uitvoeren. Er makkelijk en veilig.

Test

Het punt is aangebroken om de boel te testen. We hebben het project lokaal staan en maken een kleine wijziging in een file (bijvoorbeeld de index.html file). We comitten de file en pushen het naar GitHub. We kunnen in het dashboard van Circle-CI de progressie zien (menu-item ‘Jobs’) en als we op de job doorklikken kunnen we de details zien.  Per detail kunnen we zien wat er allemaal wordt uitgevoerd (logging) en of de job uiteindelijk geslaagd is of gefaald (de uitslag kun je via de mail ontvangen)

Uiteindelijk zal de aangepaste file op de webserver en in GitHub zijn geplaatst. Uiteraard kunnen er tal van jobs worden toegevoegd in dit proces (denk aan testen). Wat betreft snelheid gaat dit aardig snel. Er kan opgeschaald worden qua gebruikers en resources. Dit is echter niet gratis. Wanneer je het niet te gek maakt kun je er wel gewoon gratis gebruik van maken.

Conclusie

Mijn conclusie is dat Circle-CI snel, goedkoop (gratis) en makkelijk in gebruik is. In een half uurtje is alles up-and-running. Het dashboard is overzichtelijk en bied tal van mogelijkheden.


Ik ben benieuwd hoe Circle-CI zich gedraagt in grote complexe omgevingen. Iemand meer ervaring met Circle-CI of juist met een vergelijkbare tool? Ik zie het graag in de comments. Andere vragen en of opmerkingen horen we ook graag natuurlijk. Bedankt voor je aandacht!

Indeling project:




















6 weergaven0 opmerkingen

Recente blogposts

Alles weergeven

Comments


bottom of page