PricingLoginStart free
React Academy · Oppitunti

GitHub Actionsin CI/CD Reactille

Automatisoi lint-, testi-, build- ja käyttöönottovaiheet GitHub Actions -työnkulussa jokaisella pushilla.

Oppitunti 4/413 vaihetta

GitHub Actionsin CI/CD Reactille on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Mikä GitHub Actions on?

GitHub Actions on GitHubiin sisäänrakennettu CI/CD-alusta. Määritelkää YAML-tiedostoihin perustuvat työnkulut hakemistoon .github/workflows/; ne suoritetaan push-, pull request- tai ajastettujen tapahtumien yhteydessä.

Perustason CI-työnkulku

Vähimmäistyönkulku, joka asentaa riippuvuudet, suorittaa lintauksen ja testit jokaisen pushin ja pull requestin yhteydessä.

# .github/workflows/ci.yml
name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci
      - run: npm run lint
      - run: npm test -- --coverage

node_modules-välimuisti

Tallentakaa välimuistiin ~/.npm (npm:n välimuisti, ei node_modules) riippuvuuksien asennuksen nopeuttamiseksi. actions/setup-node hoitaa tämän cache-valitsimella.

- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: 'npm' # caches ~/.npm based on package-lock.json hash

Koontivaihe

Lisätkää testien jälkeen koontivaihe varmistaaksenne, että projekti kääntyy virheittä.

- name: Build
  run: npm run build

# For Next.js — catch TypeScript errors:
- name: Type Check
  run: npx tsc --noEmit

Julkaisu Verceliin yhdistämisen yhteydessä

Julkaiskaa sovellus Verceliin main-haaraan tehtävien pushien yhteydessä käyttämällä työnkulussa Vercel CLI:tä.

- name: Deploy to Vercel
  env:
    VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
    VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
  run: |
    npm install -g vercel
    vercel pull --yes --environment=production --token=$VERCEL_TOKEN
    vercel build --prod --token=$VERCEL_TOKEN
    vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN

Julkaisu S3:een yhdistämisen yhteydessä

Synkronoi koontituloste S3:een ja mitätöi CloudFront-välimuisti main-haaran onnistuneen koonnin jälkeen.

- name: Deploy to S3
  if: github.ref == 'refs/heads/main'
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  run: |
    aws s3 sync dist/ s3://my-bucket/ --delete
    aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"

Playwrightin E2E-testit CI:ssä

Suorittakaa Playwrightin E2E-testit CI:ssä koonnin jälkeen. Asentakaa selainten binäärit erillisessä vaiheessa.

- name: Install Playwright Browsers
  run: npx playwright install --with-deps chromium

- name: Run E2E Tests
  run: npx playwright test

- uses: actions/upload-artifact@v4
  if: failure()
  with:
    name: playwright-report
    path: playwright-report/

Rinnakkaiset matriisityöt

Käyttäkää matriisistrategiaa testien suorittamiseen rinnakkain useilla Node.js-versioilla tai eri ympäristöissä.

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18, 20, 22]
    steps:
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

Salaisuuksien hallinta

Tallentakaa arkaluonteiset arvot (API-avaimet, julkaisutunnukset) GitHub Secrets -salaisuuksiksi (repo → Settings → Secrets). Käyttäkää niitä työnkuluissa muodossa ${{ secrets.MY_SECRET }}.

Ehdolliset vaiheet

Käyttäkää if:-ehtoja vaiheiden suorittamiseen vain tietyissä haaroissa, pull request -tapahtumissa tai aiempien vaiheiden onnistuttua.

- name: Deploy
  if: github.ref == 'refs/heads/main' && github.event_name == 'push'
  run: npm run deploy

Tilamerkit

Lisätkää README-tiedostoon koonnin tilamerkki, joka näyttää CI:n tilan yhdellä silmäyksellä.

<!-- README.md -->
![CI](https://github.com/myorg/myrepo/actions/workflows/ci.yml/badge.svg)

Pikatarkistus

Mikä GitHub Actionsin ominaisuus suorittaa saman työn samanaikaisesti useilla määrityksillä, kuten eri Node.js-versioilla?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Määritelkää CI-työnkulut hakemiston .github/workflows/ YAML-tiedostoissa. Käyttäkää actions/setup-node-toimintoa yhdessä asetuksen cache: 'npm' kanssa nopeisiin asennuksiin. Lisätkää lintaus-, tyyppitarkistus-, testi- ja koontivaiheet. Julkaiskaa ehdollisesti main-haaraan tehtävien pushien yhteydessä. Tallentakaa salaisuudet GitHub Secretsiin ja käyttäkää matriisikoontia moniversiotestaukseen.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
88
Oppitunnit
324
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”GitHub Actionsin CI/CD Reactille” ilmainen?

Kyllä – oppitunnin ”GitHub Actionsin CI/CD Reactille” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”GitHub Actionsin CI/CD Reactille”?

Automatisoi lint-, testi-, build- ja käyttöönottovaiheet GitHub Actions -työnkulussa jokaisella pushilla. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”GitHub Actionsin CI/CD Reactille”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Julkaiseminen Verceliin: nollamääritykset ja preview-URL-osoitteet
  2. React-SPA:n hostaus AWS S3:ssa ja CloudFrontissa
  3. React/Next.js-sovelluksen Dockerisointi
  4. GitHub Actionsin CI/CD Reactille
← Takaisin: React Academy