Hogyan automatizálhatjuk a telepítést a GitHub-oldalakon a Travis CI segítségével

Jogi nyilatkozat: Ezt a történetet nem támogatják a cikkben leírt eszközök (Travis-CI, Github, Github-Pages)

Létrehozott egy projektet a React.js-ben, és telepítette a GitHub-oldalakra (még nem ?? - hozza létre az első projektet a React.js-ben). De mi van akkor, ha gyakran változtat a kód alapon, és meg akarja tartani telepített verzió a legújabbra frissítve? ... Fárasztó folyamatba kerül, amikor újra és újra futtatja a telepítési parancsfájlokat !!!

Mi van, ha a telepítési folyamat automatizálható ??

Néhány gyors google keresési munkamenet után rájöttem, hogy ez lehetséges és megvalósítható a Travis CI segítségével - egy nyílt forráskódú eszköz segítségével automatizálható a különféle típusú projektek telepítése.

Amit megtanul>

Ebben a cikkben megtudhatja, hogyan kell megvalósítani azt a rendszert, amely a TRAVIS-CI használatával elindítja a reagálási telepítési parancsfájlokat a projekt GitHub-oldalakra történő telepítéséhez, amikor a kódraktár főágában bármilyen változás tapasztalható. .

  • Beállítás A reakció-portfólió” projekt automatizált telepítése
  • Ismerje meg a folyamat során felmerülő néhány gyakori hibát
  • Ismerje meg a „ folyamatos telepítés” néhány fogalmát

Tanuljunk meg néhány alapismeretet

Hagyja ki ezt a részt, ha tudja, hogy nem az a típus !!

Folyamatos integráció (CI) és folyamatos szállítás (CD)>

"A szoftverfejlesztésben a folyamatos integráció (CI) az a gyakorlat, hogy az összes fejlesztő munkamásolatait naponta többször összevonják egy megosztott fővonallal" - wikipedia

Más szavakkal, a fejlesztők megpróbálják a lehető leggyakoribb módon beolvasztani funkciókódjukat a master ágba. Ezt a gyakorlatot követve a fejlesztők és a termékmenedzserek lehetővé teszik a termék gyakrabban történő kiadását.

A CI-csővezetékeknek vannak kibővített változatai, amelyekben ezeket a változásokat is automatikusan tesztelik, ami a kódot bármikor telepíthetővé teszi, úgynevezett „folyamatos kézbesítés ”. Ennek a folyamatnak a további kiterjesztését „Folyamatos telepítés” nevezzük , ahol ezeket a tesztelt kódváltozásokat automatikusan a termelési kiszolgálókra tolják. (Esetünkben megvalósítjuk a folyamatos telepítési folyamatot)

Travis CI>

A Travis CI egy folyamatosan üzemeltetett, integrált szolgáltatás, amelyet a GitHubon tárolt szoftverprojektek építésére és tesztelésére használnak. A nyílt forráskódú projektek díjmentesen tesztelhetők !!

A Travis CI konfigurálható egy .travis.ymlfájl hozzáadásával az adattárba. amikor a Travis CI-t aktiválták egy adott adattárhoz, a GitHub értesíti, ha új elkötelezettség kerül a tárba, vagy ha bármilyen lekérési kérelmet nyújtanak be, akkor a .travis.ymlfájlban meghatározott szabályok szerint a Travis CI elvégzi a következő lépéseket: tesztek futtatása, az alkalmazás vagy a telepítési szkriptek felépítése. A Travis CI a lehetőségek széles skáláját kínálja a szoftver felépítéséhez, és természetesen egyikük a szeretett ❤️ javascript.

MEGJEGYZÉS : A Github hallgatói fejlesztői csomagja számos különféle platformon elérhető prémium funkcióval rendelkezik (a Travis CI az egyik) ingyen azoknak a hallgatóknak, akik új dolgokat szeretnének megtanulni - szerezd be most a hallgatói csomagodat !!

DevOps>

A DevOps egy olyan szoftverfejlesztési gyakorlat, amely ötvözi a szoftverfejlesztést ( Dev ) és az informatikai műveleteket ( Ops ), hogy lerövidítse a rendszerfejlesztési életciklust, miközben gyakran szolgáltat szolgáltatásokat, javításokat és frissítéseket. A DevOps koncepciója a csapatok közötti együttműködés kultúrájának kiépítésére épül.

"A DevOps több mint gyakorlat - a kultúráról szól"

A folyamatos integráció, a folyamatos kézbesítés, a folyamatos telepítés a DevOps néhány kulcsfontosságú gyakorlata. Ezektől a DevOps mérnököktől eltekintve a felhőinfrastruktúra erejét jelentősen felhasználják a telepítési folyamat zökkenőmentessé tételéhez.

Elég beszélgetni !!! Tegyünk néhány műveletet

Mivel már a gh-pagescsomópont modul használatával telepítette a GitHub oldalakat gh-pages, a tárolóban lesz egy fiók, amelyet a Github oldalak szervereire telepített fájlok tárolnak. A Travis CI integrálása után képesek lennénk megvalósítani azt a rendszert, ahol a felhasználó által az masterágon végrehajtott bármilyen változás automatikusan elindít egy építést. Ha az összeállítás sikeres, akkor a build parancsfájlok aktiválódnak, amelyek frissítik az gh-pageságat. A felhasználót a Travis CI e-mail értesítéseivel értesítjük a build állapotáról

Hozzon létre egy fiókot a Travis-CI> oldalon

  • Látogasson el a Travis-ci.com oldalra, és iratkozzon fel a GitHub-ra .
  • Fogadja el a Travis CI Általános Szerződési Feltételeit. Átirányít a GitHub-ra.
  • Kattintson az Aktiválás gombra, és válassza ki a Travis CI-vel használni kívánt tárhelyeket.
  • Engedélyezési token hozzáadása (Ez automatikusan megtörténik, amikor bejelentkezik a GitHub szolgáltatásba)

Adja hozzá a travis.yml fájlt az adattárba>

Ez a fájl tartalmazza az utasításokat, amelyek megmondják a Travis-CI-nek - mi? .. hogyan? .. mikor?

MEGJEGYZÉS : Amikor egy feladatot indít a Travis-CI-ben, az elindít egy virtuális gépet a.travis.yml

Bontjuk le a kódot -

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 : A Travis-CI automatikusan elindít egy feladatot, ha valamilyen változás történik a mezőben megadott ágon.

deploy : Ebben a benyújtott fájlban kijelentettük, hogy a Travis-CI által biztosított GitHub oldalak telepítési szolgáltatóját fogjuk használni, ami nem más, mint a telepítési környezet beállításának konfigurációs utasításai.

script: Ez a fájl tartalmazza a build futtató parancsfájlokat, amelyeket a munka futtatása közben hajtanak végre. Ebben az esetben, amely a build szkript, hozzáadhat tesztfájlokat (kód-lefedettség, fúziós teszt stb.) Is a build előtt.

cache: A Travis-CI lehetőséget kínál a könyvtárfájlok és modulok gyorsítótárba tárolására, amelyek állandóak lesznek az összes buildnél. A gyorsítótárban tárolt fájlokat a későbbi összeállítási feladatok újra felhasználhatják, ami csökkenti a munka végpontok közötti futási idejét.

Minden beállítva>

Ohkay minden a helyén van, mostantól kezdve, ha bármit el is követel a master ágon, ez egy Travis-CI összeállítási feladatot indít el, amely valami hasonló lesz az alábbi képernyőképeken. A buildet manuálisan is elindíthatja a Travis-CI irányítópultról.

De …. (mindig van de !! 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

I am trying to build a community of developers where people can share their ideas, knowledge, work with others and find other people with similar ideology to build things together. So, if you built some project and want to share it, post it on the channel.

  • Gitter channel: //gitter.im/weekend-devs/community
  • Github Organization: //github.com/weekend-developers

Wrapping up

I would like to take a moment to acknowledge the work of the people who gave me the inspiration and knowledge to complete this article.

  • Travis CI community: for providing awesome tools for free.
  • My dearest friends: who helped me in correcting my mistakes.
  • YOU: for sticking around, I hope you had a productive time. Keep exploring and building amazing things!