Kuidas kasutada Travis CI ja GitHub oma veebiarenduse töövoo raskeks tõstmiseks?

Travis CI kaudu toimuva pideva integreerimisega muutub see kõik lihtsamaks

Tavaline on CodePeni rakenduste häkkimine, kui alustate. Kuid saabub aeg, mil soovite avaldada oma veebirakendused kogu maailmale. Need võivad olla kõrvalprojektid või projektid kliendi jaoks. Hea arendustegevuse töövoog muudab praegusel hetkel maailma erinevaks.

Me loome arenduse töövoo järgmiste tööriistade abil:

  • loo-reageeri-rakendus
  • npm skriptid
  • Travis-CI

Me ühendame Travis CI ja GitHubi koos. Lõpus saame kena ja läikiva märgi, nagu allpool.

Kuid lisaks välimusele tähistab märk ka funktsiooni. See on märk Travise CI testimisest, GitHubi ees võetud kohustuste koostamisest ja avaldamisest. Travis CI avaldab ainult siis, kui testid läbivad.

Ole valmis järgmiste märkide paigutamiseks oma hoidlasse:

Olen kogu töövoo korraldanud etappide kaupa. Igal etapil tuleks teha üks istung. See on umbes 50 minuti jooksul.

1. etapp: käivitage loomis-reageerimise rakendus lokaalselt

Pange oma git-hoidla valmis

Esimene asi on luua uus hoidla GitHubis. Kui teil veel kontot pole, on nüüd aeg selle jaoks registreeruda. Avalikud hoidlad on tasuta. Uue hoidla loomisel võimaldab GitHub teil luua faile .gitignore, litsentsi ja README.md jaoks.

Kui alustate Gitiga esimest korda, saate seda tasuta raamatut veebis lugeda. GitHubi veebisaidil on ka abiosa.

Meie uus hoidla näeb välja järgmine:

Olgu, vaatame selle meie terminali. Kas näete ülaltoodud pildil seda erkrohelist nuppu, mis näitab kloonimist või allalaadimist. See annab meile hoidla URL-i. Käivitage oma terminalis see käsk:

git kloon git@github.com: mändlaev / reageeri-pidev-kasutuselevõtt.git

See käsk laadib hoidla sisu uude kataloogi. See nimetab kataloogi samamoodi nagu hoidla. Meie puhul on kataloogi nimi reageerimine pidev juurutamine.

Kui soovite veenduda, et link algsesse hoidlasse on valmis, kasutage käsku:

git puldiga -v

Nüüd, kui oleme valmis oma muudatusi GitHubisse viima, alustame Reakti loomist ja käitamist.

Üles ja töötab rakendusega loo-reageeri

Uue reageerimise projekti nullist alustamine võib võtta kauem, kui võiksite oodata. Eriti kui te ei kasuta ühtegi eelnevalt määratletud tellingut. Seal on mitu lahendust, mida saame kasutada alustamiseks. Valisin ametliku rakenduse Create React, kuna olen seda kõigepealt proovinud ja sellega hakkama saanud. Kui te ei pea oma konfiguratsioone mikrotasandil haldama, annab see teile puhta alguse, et saaksite kodeerimise aluse.

Nagu näitab hoidla README.md fail, peate selle globaalselt installima ainult üks kord. Siis saate seda kasutada nii paljude projektide tellimiseks, kui soovite.

Selle tüübi installimiseks toimige järgmiselt.

npm install -g loo-reageeri-rakendus

Kui see on installitud, saate selle uue rakenduse loomiseks käivitada suvalisest kataloogist. Andkem sellele meie hoidla nimi:

luua-reageerida-rakendus reageerida-pidev-juurutamine

See ei loo uut kausta, kuna meil on Giti loodud kaust juba olemas. Selle asemel hakkab see installima olemasolevasse kausta vajalikke node_modules ja tellinguskripte.

Kui soovite värsket rakendust, võite kasutada järgmist:

loo-reageeri-rakendus fancy-app-nimi

Seejärel peate looma Giti hoidla ja ühendama selle GitHubiga. See pole liiga keeruline. Saate seda GitHubi abilehte kasutada.

Kas install on veel lõpule viidud? See ei tohiks võtta rohkem kui 5 minutit. Mul kulus umbes 15 minutit. Ärge laske sellel teid hirmutada. Kui te pole nagu mina ja kasutate 150 MB / s 4G andmekaarti, mis annab teile parimal päeval allalaadimiskiiruse umbes 512 kbps.

Tore asi on see, et installimine viis meie vana faili README.md kõrvale. Terminal näitab seda armsat sõnumit:

Teil oli fail „README.md”, me panime selle ümber nimeks „README.old.md”

Terminal oleks pidanud teile näitama ka tohutut puustruktuuri pakettide loetelu. See võib tunduda hirmutav. Kuid enamik neist on pakenditevahelised sõltuvused. Need aitavad teil rakendust arendada. Lõpptootel on ainult vajalikud JavaScripti failid nagu react.js ja react-dom.js. Läheme sinna mõne aja pärast.

Nüüd ärkame meie rakenduse üles. Kui installimine on lõppenud,
Loo-reageeri-rakendus annab meile käskude loendi, mis on käepärased.

Siin on viite kataloog:

  • npm algus
    Käivitab arendusserveri
  • npm käivitage
    Kimp ühendab tootmise jaoks staatilistesse failidesse
  • npm test
    Alustab katsejooksjat
  • npm käivitage väljutamine
    Eemaldab teie projektist ühe sõltuvuse loomise. Vaata siit
  • npm run juurutamine
    Ehitada gh-pages harusse

npm käivituse ja npm testi sisseehitatud sõlme käsud on vaikimisi tuvastatud. Peate käivitama muid skripte, näiteks ehitama, eemaldama ja juurutama, kasutades täiendavat käitamislippu:
npm käivitage skripti_nimi

Lisaksime protsessi veel mõned lisad. Nüüd on aeg laadida meie sait brauserisse. Asuge rakenduste kataloogi ja käivitage:

npm algus

Nagu võlujõud, avaneb uus brauseri vahekaart ja näete, kuidas Reaktratas mõnusalt pöördub. Vaade peab teile esitama väljakutse järgmise parima rakenduse loomiseks, mida Internet on tunnistajaks.

See on see, mida me saame:

See on päris puhas GIF (graafika vahetusvorming), kas pole? Välja arvatud minu kursori sisenemine. Pildistasin selle GIF-i tööriistaga Peek. Vaadake seda siis, kui teil seda vaja on.

Hästi tehtud! Loodan, et see ei võtnud rohkem kui 45 minutit. Kui teil on probleeme, pöörake tähelepanu tõrketeadetele ja proovige need parandada.

Kui olete pettumuse koha lähedal, pöörduge abi saamiseks Virna ülevoolu poole. Või jätke oma küsimused allolevatesse kommentaaridesse.

Enne kui hakkame mõnda faili sisse laskma, laskem kood kinnitada ja suunata GitHubi hoidlasse. Need käsud toimivad järgmiselt:

git olek
git add --all git activ -m "Algsed tellingud, see on sinu enda sõnum"
  • git olek
    Kuvab tehtud muudatuste loendi
  • lisan
    Lisab need muudatused ajutisse kohta, mida nimetatakse etapiks, enne kui selle pilve tõukame

Kui käitate git olekut uuesti, teatab ta sellest

Teie haru edestab päritolu / meistrit 1 pühendumisega.
 (kasutage "git push" oma kohalike kohustuste avaldamiseks)
 pole midagi pühenduda, töötav kataloog on puhas

See on õige, oleme teinud ja pühendunud kohalikul tasandil. Siduvaid muudatusi pole. Kuid me oleme oma hoidla pilveversioonist ees. On aeg avaldada need turvalisesse majja, milleks on GitHub.

Kõik, mida peate jooksma, on:
git push päritolu kapten

Saate kena aruande, mis näitab räsi nagu fb74259..045ec7a, mis on meie kohustuse viide. Muidugi on teie räsi erinev.

Kontrollige oma GitHubi hoidlat. Kas olete üllatunud, kui näete pikka README.md?Pea meeles, et luua-reageerida-rakendus on meie pisikese README.md omaga asendanud. See on tohutu ja abivalmis, nii et säilitame selle praegu enne, kui kirjutame oma.

2. etapp: saidi teisaldamine GitHubi lehtedele

Ehitage staatiline sait

Vaatame lõplikku ehitust.

Peate ainult jooksma:

npm käivitage

Veenduge, et olete kõigi käskude jaoks rakenduste kataloogis. Saame selle toreda teksti, mis näitab meile, mis on juhtunud ja mida me veel teha saame:

$ npm jooksu ehitamine
> react-continuous-deployment@0.1.0 build / home / weebee / Projektid / blogi_projektid / reageeri-pidev-juurutamine
> reageerimisskriptid ehitatakse

Optimeeritud tootmiskonstruktsiooni loomine ...
Koostatud edukalt.

Faili suurused pärast gzip-i:

  48,12 KB build / static / js / main.9fdf0e48.js
  288 B ehitamine / staatiline / css / main.cacbacc7.css

Projekt ehitati eeldusel, et see hostitakse serveri juur.
Selle alistamiseks määrake oma paketi.json avaleht.
Näiteks lisage see, et luua see GitHubi lehtede jaoks:

  "avaleht": "http://myname.github.io/myapp",

Ehitamiskaust on kasutusele võtmiseks valmis.
Võite seda staatilise serveriga teenindada:

  npm install -g serveeri
  teenima-ehitama

Käsk npm run build ehitab seda, mida me palusime. See loob meie rakenduse ning optimeerib ja minimeerib meie varasid. Ja see paigutab kõik kausta nimega build.

Põhja poole on soovitus kohaliku serveri käivitamiseks installida pakett serve npm. Enamasti on Linuxil installitud Python juba installitud. Kohaliku serveri käivitamine on üsna lihtne, kui teil on Python.

Astuge ehitamiskataloogi ja käivitage server, vaadake järgmisi käske:

cd ehitada
python -m SimpleHTTPServer

Vaikimisi käivitab Pythoni käsk serveri pordil 8000. Nii et http: // localhost: 8000 teenindab veebisaidi tootmisversiooni. See kasutab teie äsja loodud kohaliku ehituse kataloogi varasid.

Kui see tundub hea, saadame selle üle GitHubi lehtedele.

Primer GitHubi lehtedel

GitHubi lehtedel on hoidlate jaoks GitHubi pakutav hostimislahendus. Oma saidi hostimiseks on vähe kohti, kõik hoidlas:

  • Oma veebisaidi majutamiseks võite kasutada peaharu (vaikimisi kasutatavat)
    Kui teil on index.html, kuvatakse see. Muidu kuvatakse teie README.md.
  • Saate oma saidi hostimiseks kasutada ka peaharu dokumentide kausta
    Kasutusjuhtum oleks siis, kui teil oleks GitHubis välja töötatud tarkvara või raamatukogu. Võib-olla soovite dokumente hostida samas hoidlas.
  • Saate saidi hostimiseks kasutada haru gh-pages

On erand. Teie hoidla nimi ei tohiks olla .github.io ega .github.io

Need on erinimed ja need piiravad teid peaharu kasutamisega.

Kui olete oma veebisaidi hostinud, saate selle laadida järgmistesse URL-idesse. See sõltub sellest, kas hoidla asub teie konto või organisatsiooni konto all:

https: //  .github.io /  /
https: //  .github.io /  /

Selle mõistmise korral varustame meie hoidla reaalajas käivitamiseks.

Avaldage GitHubi lehtedel

Uuel README.md-l, mille andis meile rakendus-reageeri-rakendus, on GitHubi lehtedel eraldi jaotis. Vaja on vähe asju.

Kontrollige faili package.json täiendusi

"avaleht": "http: //  github.io / 

Märkus. Tavaliselt ei vaja JSON-i viimane osa või kirje koma, kõigil muudel peaks see olema.

Installige pakett gh-pages

See on lihtne. Kui olete projekti kataloogis, käivitage järgmine käsk:

npm install - salvestage gh-leheküljed

Lipp - salvesta lisab gh-pages sõltuvusena pakettijs.json. Selle eesmärk on tagada, et ka keegi teine, kes teie projekti kloonib, saaks selle hankida ka npm installimise ajal.

Siin on git diff käsu hetktõmmis, mis näitab kõike, mida oleme pärast paketi.jsoni loomist lisanud.

Juurutage gh-pages harusse

Käitatakse npm run juurutamine. See käivitatakse automaatselt eelloendisse, et genereerida tootmisnäitajaid, mida oleme varem näinud. Seejärel juurutab see ehituse meie hoidlasse uue haru nimega gh-pages.

Kontrollige, kas saate viimase avaldusena oleku Avaldatud. Kui jah, olete tootmiskonstruktsiooni edukalt juurutanud GitHubisse. Siin on väljund:

Valige avaldatav haru gh-pages

Läheme GitHubi hoidlasse ja avaldame meie saidi. Avage hoidla ja minge ülaosas vahekaardile Seadistused. See näeb välja selline, nagu allpool, oodake minut! GitHub on automaatselt avaldanud haru gh-pages. Enam pole midagi teha. See näitab ka URL-i, mille kaudu sellele saidile pääseme.

Ülaltoodud alapealkiri peaks tegelikult ütlema, et ära tee midagi. See on kõik valmis ja tarbimiseks valmis.

Märkus. Minu hoidla URL võib teid eksitada. Põhjus on see, et olen selle hoidla loonud organisatsiooni nimega PineBoat, mis on minu ajaveeb. GitHub paigutab selle minu kohandatud domeeni alla, mis pole midagi, mida ma selle proovimisel eeldasin. Teie omad erinevad.

Siiamaani on kõik korras. Kui teil on olnud Git- ja Node-pakettide eelne kogemus, poleks teil seni kaugele jõudmisega probleeme olnud. Tegelikult oli vaikevalikust README.md piisav, et mind nii kaugele aidata. Kui teil pole kogemusi olnud, loodan, et teile meeldis see teekond.

Kuid me soovime pidevat juurutamise töövoogu. Me hakkame navigeerima kaardistamata vetes. Võib väita, et Internetis pole midagi kaardistamata. Oleksin nõus, kuid looge siiski oma kaart.

3. etapp: pidev juurutamine

Siin toome sisse robotid, mis teevad suurema osa juurutamisest, mida tegime 2. etapis.

Travis CI traat automaatseks ehitamiseks

Laskem Travis CI-l meie eest juurutada. Oma saidi iseseisvaks ehitamiseks ja juurutamiseks pole kahju. Nagu nägime, on vaid paar minutit meie väärtuslikku aega.

Suuremate mastaapsete projektide käivitamisel on siiski parem lasta usaldusväärsetel robotitel mõned tööd ära teha. Travis CI on üks selline teenus.

Saame kasutada Travis CI eeliseid ehitamisel ja juurutamisel, kui anname oma koodi hoidlasse.

Registreeruge Travis CI-le

Oleks tüütu, kui ma alustaksin sõnadega "kui teil on GitHubi konto". Olen kindel, et teil on see juba olemas ja saame selle abil registreeruda Travis CI-s.

Ühendage GitHubi hoidlaga

Olge lubade eest. Kui teie hoidlat ei kuvata, klõpsake sünkroonimisnupul ja värskendage lehte. Enne hoidla vaatamist pidin andma organisatsioonile “PineBoat” loa.

Travis CI näitab teile samme. Selle ühendamiseks libistage lüliti oma hoidla vastu.

Selle avamiseks klõpsake hoidla nimel. See näitab ehituse olekut tundmatu ja suurema märkuse, mis ütleb, et selle hoidla jaoks ei ehitata.

Mitte kauaks. Muutkem seda.

Lisage hoidlasse .travis.yml

Siin on .travis.yml, mis tuleb lisada. Vaadake ja jääge minu juurde, kuni ma selgitan välja mõned teie küsimused.

keel: sõlme_js
sõlme_js:
 - "sõlm"
pärast_ edu:
 - git config - globaalne kasutaja.nimi "vijayabharathi"
 - git config - globaalne kasutaja.email "[e-posti aadress on kaitstud]"
 - gm kaugema päritolu
 - lisage päritolu kaugjuhitav aadress https: // vijayabharathib: $ {GH_TOKEN} @ github.com / männipaat / reageeri-pidev-juurutamine.git
 - npm käivitus juurutamine

Olge ettevaatlik, kui kasutate kaugjuhtimispuldi päritolu, see on üks pikk rida. YAML-i süntaks erineb JSON-ist pisut. See leht võib aidata. Nüüd on aeg see lagundada. Võib-olla olete enamiku neist teadetest välja mõelnud.

Siin on see lihtsas inglise keeles:

  • See on sõlmprojekt. Hankige uusim sõlme versioon
  • Kuna Travis viib vaikimisi läbi npm testi, palume tal pärast testi õnnestumist asjad ära teha
  • Lisage oma Giti kasutajanimi ja e-posti aadress
  • Seejärel lisage hoidla jaoks git kauge päritolu
    Kasutage oma kasutajanime ja loodud GH_TOKEN mandaatidena
  • Lõpuks käivitage käsk npm run deploy
    Kui meenutate, käivitatakse see enne npm run juurutamise käivitamist npm run eelinstalli

Pühenduge ja jälgige, kuidas Travis CI ehitatakse

Hoidke oma Travis CI hoidla leht lahti. Lisage oma terminalis muudatused, kinnitage ja sisestage need GitHubile.

Kui vajate meeldetuletust, on siin käskude loend:

lisan - kõik
git activ -m "lisada .travis.yml konfiguratsioon automaatse ehituse jaoks" git push origin master

Kui lähete üle Travis CI lehele, näete seda lehte elusana, kui tõukekelg on möödas või mõne sekundi jooksul. Ehitamine algab automaatselt ja teate, kas see õnnestub.

Siin on minu Travis CI leht, mis näitab kena rohelist olekut.

Kuvatud logi on vähemalt 2500 rida. Mul on hea meel, et Travis-CI näitab ainult seda, mida peame nägema.

Järgitud sammude selge kirjeldus vastavalt pildil näidatule:

Kohakontroll, kas tõesti õnnestus?

Siin võivad abiks olla tootmisega seotud automatiseeritud testid.

Kuid see on veel üks päev. Seleeni WebDriver võib oodata, kuni selle juhtmestiku lõpule saame. Kontrolligem käsitsi, kas Travis CI tõesti avaldas GitHubi lehtedel.

Veel üks prooviversioon, seekord koodimuutustega

Viimati ei näinud me pärast juurutamist oma rakenduses erinevust. Selle põhjuseks on see, et me ei teinud midagi. Nii et kuidagi ei saanud öelda, kas ehitamine õnnestus. Võite laadida gh-lehti harusid ja uurida kohustusi, kuid ma ei taha seda.

Teeme nüüd mõned väikesed muudatused. On aeg võtta Reacti ratas õigel ajal tagasi.

Teeme ainult kaks muudatust.

Failis src / App.css on animatsioonide sektsioon nimega @keyframes App-logo-spin. Muutke see 360deg väärtuseks -360deg. See on ette nähtud ratta keerutamiseks vastupäeva.

Laadige fail src / logo.svg ja muutke täitevärvi väärtuseks # 61DAFB väärtuseks # DA61FB. Kui teie server töötab npm starti kaudu, võite juba näha vastupäeva liikuvat lillat ratast. Kui ei, lisage muudatused riiulisse, kinnitage ja lükake need hoidlasse. Vaadake, kas Travis-CI-s ehitamine õnnestub, ja minge siis üle oma Githubi lehele.

Laadige oma_kasutaja_nimi.github.io/hoidla_nimi. Sinise asemel peaks nägema lillat ratast.

Paraku ma ei näe seda lillat ratast. Ma näen endiselt vaikesinist.

Parandage puuduv GH_TOKEN

Ehkki Travis CI teatas, et kõik on hästi, pole see nii. Kui avate gh-pages haru, näete algset kohustust, mille me kohalikust terminalist võtsime. Muud ei tee kohustusi. See tähendab, et after_success käsud polnud nii edukad.

Kui laiendate nimisõnumi käivitamise juurutamise jaotist Travise koostamislogis, näete mõningaid autentimisvigu. Põhjus on see, et me ei ole andnud Travis CI-le luba oma hoidlasse kirjutada.

Uue loa saab luua saidi GitHub.com isikliku juurdepääsu tokenide lehel. Ärge unustage anda juurdepääs avalikule hoidlale üksi. Tehakse vaid üks linnuke avaliku_repo vastu. Ära jäta seda kahe silma vahele. Kui olete tokeni genereerinud, kopeerige see. GitHub hoiatab õigesti, et te ei näe seda enam.

Minge üle Travis CI-le, klõpsake oma hoidla valikul Rohkem valikuid ja valige sätted. Selles kuvatakse mitu jaotist, kuid keskkonnamuutujaid tuleb otsida.

Pange token nimeks GH_TOKEN ja mööduge tokeri väärtuse all väärtusest. Klõpsake nuppu Lisa. Ärge lülitage sisse logide kuvamise väärtust, kuna see võib inimestele nähtav olla, kui logid välja saadate. Juhend on samaväärne teie parooliga.

See selleks, nüüd saab Travis-CI kirjutada meie hoidlasse.

Minge tagasi hoidla vahekaardile Praegune ja klõpsake käsul Restart build. Kui ehitamine on lõppenud, saate logisid kontrollida ja GitHubis kontrollida gh-pages haru. Te peaksite nägema uut kohustust.

Palju õnne! See on meie esimene automatiseeritud juurutamine. Kuidas oleks veebisaidiga github.io? Ükski värskenduse kogus ei tooks nii vajalikku lillat ratast. Ärge veel lootust kaotage.

Paluge hooldustöötajal paus teha

Ratas on endiselt sinine. Kuid hoidlas olev gh-pages haru näitab teist kohustust. Võrrelgem register.html hoidlas ja veebilehe allikas. Nad osutavad erinevatele CSS- ja JavaScripti failidele. Räsi järelliide on meie aimdus.

Tundub, et see on energilise JavaScripti teenindustöötaja tulemus. See leht on võrguühenduseta kasutamiseks vahemällu salvestatud. Kuid see järeldus vajab rohkem uurimist. Vahepeal peatagem lihtsalt teenindaja ja tühjendage ladu.

Kui kasutate Chrome'i, pääseb arendaja tööriistadele juurde menüüst või vajutades F12. Vahekaardil Rakendus Chrome DevToolsil on jaotis Tühjenda salvestusruumi. Kontrollige kõiki kandeid ja lõpuks klõpsake sellel Kustuta saidi andmed.

Värskenda ja buum! Siin on meie erksa lilla värvi tagumine ratas. Nüüd on aeg tähistada.

Märkus. Selle salvestuse automaatseks puhastamiseks peab olema parem viis. Valu oleks, kui peame muudatuste veebipõhiseks saamiseks iga kord peatuma ja koristama teenindavat töötajat ja laoruume. See on teema põhjalikumaks uurimiseks.

4. etapp: Travis CI aumärk

Meie ees on üks viimane ülesanne. See on selleks, et saada läikiv Travis CI-i oleku märk meie hoidla failile README.md.

Avage Travis CI ja klõpsake käsku ehitada: mööduv märk. Kuvatakse dialoogiboks pildi valimise võimalustega. Jätke haru meistriks. Valige pildi URL-i asemel Markdown. Kopeerige teile antud tekst.

Kleebi see README.old.md, mis oli meile loodud loo-reageeri-rakenduse poolt. Kirjutage oma sisu.

Vaikehoidla README.md saab hoidlast kustutada ja nime README.old.md ümber nimetada README.md.

Lisage muudatused Giti lavastusse, kinnitage ja lükake pilve. Nüüd peaks hoidla näitama partiid, mida olete alati soovinud. Siin on meie lemmikloomaprojekti URL.

https://travis-ci.org/pineboat/react-continuous-deployment.svg?branch=master

Selle URL-i saate lisada ülaosas olevasse README.md-sse. Siin on pilt:

Oleme siin valmis! Aeg tähistada.

Tahaksin teile esitada küsimuse. Kui töötate suurtes meeskondades, kasutades sarnast töövoogu, siis millised väljakutsed teil ees on ja kuidas neid lahendada? Kirjutage kommentaar ja andke mulle sellest teada.

Tänan teid väga lugemise eest. Loodetavasti leidsite selle kasulikuks.

See avaldati algselt saidil pineboat.in.

Plaksutamine näitab, kui palju te seda artiklit hindasite.