Sådan automatiseres implementering på GitHub-sider med Travis CI

Ansvarsfraskrivelse: Denne historie er ikke sponsoreret af nogen af ​​de værktøjer, der er beskrevet i artiklen (Travis-CI, Github, Github-Pages)

Du har oprettet et projekt i React.js og implementeret det på GitHub-siderne (endnu ikke ?? - opret dit første projekt i React.js) Men hvad nu hvis du foretager hyppige ændringer i kodebasen og også vil beholde implementeret version opdateret til det nyeste? ... Du vil finde dig selv i den kedelige proces med at køre implementeringsskripterne igen og igen !!!

Hvad hvis implementeringsprocessen kan automatiseres ??

Efter en hurtig google-søgningssession fandt jeg ud af, at det er muligt og kan opnås af Travis CI - et open source-værktøj kan bruges til at automatisere implementeringen af ​​forskellige typer projekter.

Hvad du lærer>

I denne artikel vil du være i stand til at lære, hvordan du implementerer det system, der vil udløse reaktionsimplementeringsscripts ved hjælp af TRAVIS-CI til at distribuere projektet på GitHub-siderne, når der er nogen ændringer fundet i mastergrenen i kodelageret .

  • Opsætning Automatisk implementering af ' react-portfolio' projekt
  • Lær om nogle hyppige fejl, der opstår under processen
  • Lær om nogle begreber relateret til ' kontinuerlig implementering'

Lad os lære nogle grundlæggende

Spring dette afsnit over, hvis du ved, at du ikke er den type !!

Kontinuerlig integration (CI) og kontinuerlig levering (CD)>

"I softwareteknik er kontinuerlig integration (CI) praksis med at flette alle udvikleres arbejdskopier til en delt hovedlinje flere gange om dagen" - wikipedia

Med andre ord vil udviklerne forsøge at flette deres funktionskode ind i mastergrenen så hyppigt som muligt. Ved at følge denne praksis gør det muligt for udviklere og produktadministratorer at frigive produktet oftere.

Der er nogle udvidede versioner af CI-rørledningerne, hvor disse ændringer også testes automatisk, hvilket gør koden tilgængelig når som helst, den kaldes 'kontinuerlig levering '. En yderligere udvidelse af denne pipeline kaldes 'Continuous Deployment' pipeline, hvor disse testede kodeændringer skubbes automatisk ind i produktionsserverne. (Vi implementerer den kontinuerlige implementeringsrørledning i vores tilfælde)

Travis CI>

Travis CI er en hostet kontinuerlig integrationstjeneste, der bruges til at opbygge og teste softwareprojekter, der hostes på GitHub. Open source-projekter kan testes uden omkostninger !!

Travis CI kan konfigureres ved at tilføje en .travis.ymlfil til lageret. når Travis CI er aktiveret for et givet lager, vil GitHub give besked, hver gang nye forpligtelser skubbes til lageret, eller der sendes en pull-anmodning, i henhold til reglerne defineret i .travis.ymlfilen, vil Travis CI udføre de trin, der kan være alt - fra kører tests, opbygning af applikationen eller implementeringsskripter. Travis CI tilbyder en bred vifte af muligheder for at opbygge softwaren, og selvfølgelig er vores elskede ❤️ javascripten af ​​dem.

BEMÆRK : Github har studenterudviklerpakke tilgængelig med en masse premium-funktioner fra forskellige platforme (Travis CI er en af ​​dem) gratis til studerende, der ønsker at lære nye ting - få din studenterpakke nu !!

DevOps>

DevOps er et sæt softwareudviklingspraksis, der kombinerer softwareudvikling ( Dev ) og informationsteknologioperationer ( Ops ) for at forkorte systemudviklingens livscyklus, mens de ofte leverer funktioner, rettelser og opdateringer. Begrebet DevOps er baseret på at opbygge en kultur for samarbejde mellem teams.

“DevOps er mere end praksis - det handler om kultur”

Kontinuerlig integration, kontinuerlig levering, kontinuerlig implementering er nogle af de få vigtige fremgangsmåder i DevOps. Bortset fra disse DevOps-ingeniører bruger kraften i skyinfrastrukturen kraftigt til at gøre implementeringsprocessen problemfri.

Nok taler !!! Lad os gøre noget

Da du allerede har implementeret på GitHub-siderne ved hjælp af gh-pagesnodemodulet, vil der være en gren, der kaldes gh-pagespå lageret, der indeholder de filer, der er distribueret på Github-siders servere. Efter integrationen af ​​Travis CI kunne vi implementere systemet, hvor eventuelle ændringer foretaget af brugeren på masterfilialen automatisk udløser en build. Hvis build er vellykket, udløses build-scripts, der opdaterer gh-pagesgrenen. Brugeren vil blive underrettet om status for bygningen via e-mail-meddelelser fra Travis CI

Opret en konto på Travis-CI>

  • Gå til Travis-ci.com og tilmeld dig med GitHub .
  • Accepter vilkårene og betingelserne for Travis CI. Du omdirigeres til GitHub.
  • Klik på knappen Aktivér , og vælg de arkiver, du vil bruge med Travis CI.
  • Tilføj autorisationstoken (Dette gøres automatisk, når du logger ind med GitHub)

Tilføj travis.yml-fil til lageret>

Denne fil indeholder instruktionerne, der fortæller Travis-CI - hvad? .. hvordan? .. hvornår?

BEMÆRK : Når du udløser et job i Travis-CI, starter det en virtuel maskine med det relevante installationsmiljø konfigureret i .travis.yml

Lad os nedbryde koden -

language: node_js node_js: - "stable" cache: directories: - node_modules script: - npm run build deploy: provider: pages skip_cleanup: true github_token: $github_token local_dir: build on: branch: master

on : Travis-CI udløser automatisk et job, hver gang der foretages nogle ændringer på den filial, der er angivet i dette felt.

deploy : I dette arkiv har vi erklæret, at vi vil bruge installationsudbyderen til GitHub-siderne leveret af Travis-CI, hvilket kun er konfigurationsinstruktionerne til opsætning af miljøet til implementering.

script: Dette arkiverede indeholder build-scripts, der udføres, mens jobbet køres. I denne sag, det er build-scriptet, kan du også tilføje testscrips (kodedækning, fusionstest osv.) Før build.

cache: Travis-CI giver mulighed for at cache bibliotekets filer og moduler, som vil være konstanten for alle builds. Cachelagrede filer kan bruges igen af ​​de senere build-job, der reducerer job-end-til-end-løbetiden.

Alt indstillet>

Ohkay everything is in the place, now onwards if you commit anything on the master branch it will trigger a Travis-CI build job which will look something like in the below screenshots. You can also trigger a build manually from the Travis-CI dashboard itself.

But …. (there is always a but !! huh!!)

I am pretty sure your build dashboard will not look like the above one same as life has not been smooth we were told it would be ?. There can be infinite reasons due to which your Travis-CI dashboard is full of failed builds ( I know..I have been through this)

This is the time when your most valuable “googling” skills will come handy. I will explain what all are the errors I have faced while I was trying to create a pipeline.

  • Security errors
  • Token errors
  • Just random errors (You have to get dirty & find the solution!!)

Token errors >

If your builds are failing due permissions error then there are high chances that there is some problem with tokens. You need to go to the token URL //github.com/settings/tokens and see when it was used lately, if it shows never then you have found your culprit.

Follow the below steps,

  • Delete and create a new token
  • Add it to the Travis environment variables ( Go to job settings )
  • Re-try the build

Security errors >

There are plenty of security practices we ignore while coding & building web applications. When we run in local these security errors are not given much emphasis and often discarded as warning messages, but when we are trying to deploy the service using the Travis-CI these warnings will cause the build failure.

I will mention the errors I encountered while working on my project(I would encourage you to mention the errors you have encountered) The great thing is that most of them have their own dedicated web-pages which explain the underlying problem and offers the solutions/workarounds ( Workarounds — we all love it even knowing that we shouldn’t !! )

  • Using target=_blank in HTML tag : This is more serious security flaw than it looks. You can learn more about it here.
  • Redundancy in HTML code: There were many redundant tags/class names which were making the code look like junk.

Best way to prevent these errors is to install the es-lint plug-in in whichever text-editor you are using.

Built some project? — Share it

Jeg prøver at opbygge et samfund af udviklere, hvor folk kan dele deres ideer, viden, arbejde med andre og finde andre mennesker med lignende ideologi til at bygge ting sammen. Så hvis du har bygget et projekt og vil dele det, skal du sende det på kanalen.

  • Gitter-kanal: //gitter.im/weekend-devs/community
  • Github Organisation: //github.com/weekend-developers

Afslutter

Jeg vil gerne tage et øjeblik at anerkende arbejdet hos de mennesker, der gav mig inspiration og viden til at færdiggøre denne artikel.

  • Travis CI-samfund: til at levere fantastiske værktøjer gratis.
  • Mine kære venner: der hjalp mig med at rette mine fejl.
  • DU: for at holde fast, jeg håber, du havde en produktiv tid. Bliv ved med at udforske og opbygge fantastiske ting!