Helpota tuotanto- ja käyttöönottoongelmiasi CI/CD-putkilinjalla, joka huolehtii työläistä yksityiskohdista.

Verkkosovellusten käyttöönotto Firebase Hostingissa voi olla vaivalloista. Käyttämällä GitHub-toimintoja voit kuitenkin yksinkertaistaa ja virtaviivaistaa käyttöönottoprosessia ja tehdä käyttöönottotyönkulkujen hallinta ohjelmiston koko elinkaaren ajan on uskomattoman helppoa hanke.

Muutaman yksinkertaisen vaiheen avulla voit määrittää käyttöönoton työnkulun prosessin automatisoimiseksi. Tämä sisältää haarojen uusien muutosten seurannan ja mahdollisten virheiden kirjaamisen. Lue lisää React-sovelluksen käyttöönotosta Firebasen isännöintipalvelussa.

Mikä on CI/CD Pipeline?

CI/CD (Continuous Integration/Continuous Delivery) -putki on joukko automatisoituja prosesseja, jotka on toteutettu mahdollistamaan sovellusten jatkuvan rakentamisen, testauksen ja käyttöönoton.

Yksinkertaisesti sanottuna, CI/CD-putki on perustettu automatisoimaan ohjelmistokehityksen elinkaaren prosesseja. Tämä sisältää varsinaisen kehityksen, testauksen, julkaisut (beta, alfa ja lopullinen julkaisu), virheenkorjauksia ja jopa ominaisuuspäivityksiä. Pohjimmiltaan tämä prosessi mahdollistaa laadukkaan ohjelmiston lähettämisen helposti ja nopeasti.

CI/CD-liukuhihna kattaa tyypillisesti pari vaihetta, joihin kuuluvat:

  1. Lähdevaihe: Tämä vaihe kattaa sovelluksen koodin varsinaisen kehittämisen ja ylläpidon versionhallintatyökalulla, kuten Git.
  2. Build Stage: Tämä vaihe kokoaa lähdekoodin kaikkine riippuvuuksineen suoritettavaan muotoon.
  3. Testausvaihe: Tämä vaihe sisältää automaattiset testit ohjelmiston laadun vahvistamiseksi. Lopullisena tavoitteena on havaita ja korjata mahdolliset virheet. Tässä vaiheessa voit suorittaa erilaisia ​​testejä, ja kun koodi on läpäissyt testit, se on valmis käyttöön.
  4. Käyttöönotto: Tämä vaihe automatisoi käyttöönottoprosessin tuotantoympäristössä.

Putkilinjan tulee valvoa jokaista vaihetta varmistaakseen, ettei virheitä ole, ja parantaakseen koko prosessia tulevia julkaisuja varten.

Mitä GitHub Actions on?

GitHub Actions on GitHubin tarjoama ominaisuus, joka automatisoi ohjelmiston käyttöönoton työnkulkuprosesseja CI/CD-putkissa. Sen avulla on mahdollista määrittää ja automatisoida käyttöönoton työnkulkuja suoraan projektisi GitHub-arkistosta.

GitHub Actionsilla on useita etuja:

  1. Helppokäyttöinen: GitHub Actions tarjoaa käyttäjäystävällisen käyttöliittymän ja yksinkertaisen syntaksin käyttöönottotyönkulkujen määrittämiseen. Voit helposti ja nopeasti määrittää projektisi työnkulkuja GitHubin sisäänrakennetun editorin avulla.
  2. Natiiviintegraatio: GitHub Actions on osa GitHubia, mikä tekee työnkulkujen määrittämisestä, hallinnasta ja yhteistyöstä projektisi koodin rinnalla helppoa.
  3. Joustava ja muokattavissa: GitHub Actions tarjoaa joustavan ja muokattavan alustan, joka varmistaa, että voit rakentaa työnkulkuja, jotka sopivat sinun tarpeisiisi. Lisäksi se tukee useita ohjelmointikieliä. Tämä tarkoittaa, että voit käyttää sitä haluamallasi tekniikalla.

Määritä Firebase-projekti ja React Client

Aloita siirtymällä kohtaan Firebase ja kirjaudu sisään Google-tililläsi. Napsauta konsolin yleiskatsaussivulla Luo projekti perustaa uusi projekti ja antaa projektin nimi.

Seuraava, luo React-sovellus ja asenna Firebasen komentorivityökalut:

npm install -g firebase-tools

Löydät tämän projektin koodin siitä GitHub-arkisto.

Kirjaudu Firebaseen päätteestäsi Firebase-tilisi kirjautumistiedoilla.

firebase kirjautuminen: ci

Tämä käynnistää Firebase-todennusprosessin, joka pyytää sinua antamaan kirjautumistietosi, jos et ole jo kirjautunut sisään. Kun Firebase todentaa sinut, se tulostaa tunnuksen. Kopioi tämä tunnus; käytät sitä Firebase-komentojen suorittamiseen GitHub Actions -asetuksissa.

Luo lopuksi sovelluksestasi tuotantovalmis versio:

npm run build

Tämä komento luo tarvittavat tiedostot ja resurssit juurihakemiston uudessa 'build'-kansiossa, joita tarvitaan sovelluksen käyttöönottoon.

Alusta Firebase React-sovelluksessasi

Suorita tämä komento käynnistääksesi Firebase projektikansiossasi:

firebase init

Vahvista seuraavaksi, että haluat alustaa Firebasen projektissasi, ja valitse Isännöinti: Määritä tiedostot Firebase-isännöintiä varten ja (valinnaisesti) määritä GitHub Action -käyttöönottovaihtoehtojen luettelosta.

Määritä, että haluat käyttää olemassa olevaa projektia, ja valitse projektin nimi, jonka loit alun perin Firebasen kehittäjäkonsolissa.

Määritä seuraavaksi 'build'-kansioksi julkinen hakemisto, valitse Ei Jos haluat kirjoittaa kaikki URL-osoitteet /index.html-vaihtoehtoon, valitse Ei vaihtoehtoon määrittää automaattiset koontiversiot ja käyttöönotot GitHubista ja lopuksi Valitse Joo Voit korvata build/index.html-tiedoston.

Kun olet tehnyt yllä olevat muutokset, CLI luo firebase.json-tiedoston juurihakemistoon. Tämä tiedosto sisältää kaikki isännöintimääritykset, joita GitHub Actions -työnkulku vaatii.

Lopuksi, ennen kuin määrität GitHub Actions -työnkulun, luo arkisto GitHubissa, ja työnnä projektitiedostot siihen.

GitHub-toimintojen määrittäminen

Valitse projektisi arkistosta GitHubissa asetukset > Salaisuudet ja muuttujat > Toiminnot. Kirjoita arkiston salaiselle sivulle FIREBASE_TOKEN salaisuuden nimeksi ja liitä Firebase-tunnus, jonka kopioit Salaisuudet kentät.

Ota käyttöön työnkulku

Napsauta projektisi arkiston Toiminnot-välilehteä ja valitse Määritä Nodejs työnkulku Jatkuva integraatio osio.

Nimeä seuraavaksi tiedoston nimi uudelleen firebase.yml, poista yleiskoodi editorista ja lisää alla oleva koodi:

# Tämä työnkulku suorittaa solmuriippuvuuksien puhtaan asennuksen,
# välimuistiin/palauta ne, rakentaa lähde koodata ja suorittaa testejä eri puolilla
# solmun versiot
# Katso lisätietoja:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
nimi: Firebase CI


päällä:
 työntää:
 sivukonttorit: [ main ]
 pull_request:
 haarat: [ pää]


työpaikat:
 rakentaa:


 käynnissä: ubuntu-latest


 strategia:
 matriisi:
 solmun versio: [14.x]

 askeleet:
 - käyttää: action/checkout@v2
 - nimi: Käytä Node.js ${{ matrix.node-version }}
 käyttötarkoitukset: action/setup-node@v1
 kanssa:
 solmun versio: ${{ matrix.node-version }}
 - Suorita: npm install -g npm
 - nimi: npm asentaa, rakentaa ja testata
 juoksu: |
 npm asennus
 npm run build
 - nimi: Archive Build
 käyttää: action/upload-artifact@v2
 kanssa:
 nimi: rakentaa
 polku: rakentaa

 ottaa käyttöön:
 nimi: käyttöönotto
 tarpeet: rakentaa
 käynnissä: ubuntu-latest
 askeleet:
 - käyttää: action/checkout@v2
 - nimi: Lataa Build
 käyttää: action/download-artifact@v2
 kanssa:
 nimi: rakentaa
 polku: rakentaa
 - nimi: Ota käyttöön Firebasessa
 käyttää: w9jds/firebase-action@master
 kanssa:
 args: ota käyttöön --only hosting
 env:
 FIREBASE_TOKEN: ${{ salaisuuksia. FIREBASE_TOKEN }}

Tässä on joitain tärkeimmistä ominaisuuksista selitettynä:

  1. Päällä: Tapahtumat, jotka käynnistävät toiminnot tässä työnkulussa.
  2. Työpaikat: Määrittää työt, jotka tietyn toiminnon tulee suorittaa. Tässä tapauksessa on kaksi työtä: rakentaminen ja käyttöönotto.
  3. Käy: kone, jolla tämän toiminnon on suoritettava.
  4. Askeleet: Määrittää vaiheiden sarjan, jonka toiminto suorittaa tietylle työlle.
  5. Kanssa:Määrittää suoritettavien toimintojen edellyttämät argumentit.
  6. Nimi: työn tietyn vaiheen nimi.

Lopuksi vahvista tähän tiedostoon tehdyt muutokset. GitHub käynnistää tämän työnkulun automaattisesti rakentamalla ja ottamalla käyttöön React-sovelluksen Firebasen isännöintipalvelussa. Voit tarkistaa sovelluksen live-URL-osoitteen käyttöönottolokeista.

Sovellusten käyttöönotto GitHub-toimintojen avulla

GitHub Actions tarjoaa virtaviivaistetun käyttöönottotavan. Se varmistaa, että voit ottaa sovelluksia käyttöön johdonmukaisesti ja luotettavasti riippumatta tekniikasta, johon ne rakennetaan.

Lisäksi voit helposti mukauttaa käyttöönoton työnkulkua käyttämällä sisäänrakennettuja käyttöönottotyökaluja vastaamaan erityisiä CI/CD-putkistotarpeitasi.