Övning – Skapa och köra ett grundläggande arbetsflöde

  • 6 minuter

Viktig

Du behöver en egen Azure-prenumeration för att köra den här övningen och du kan debiteras. Om du inte redan har en Azure-prenumeration skapar du ett kostnadsfritt konto innan du börjar.

Du vill automatisera distributionen av uppdateringar till leksaksföretagets webbplats. Som ett första steg skapar du ett grundläggande arbetsflöde i GitHub Actions.

I den här övningen ska du:

  • Skapa ett GitHub-konto och en lagringsplats.
  • Skapa ett grundläggande arbetsflöde.
  • Kör ditt grundläggande arbetsflöde.

Skapa en lagringsplats i GitHub

  1. I en webbläsare går du till GitHub-. Logga in med ditt GitHub-konto eller skapa ett nytt konto om du inte har något.

  2. Välj plusikonen (+) längst upp till höger i fönstret och välj sedan Ny lagringsplats.

    Skärmbild av GitHub-gränssnittet som visar menyn för att skapa en ny lagringsplats.

  3. Ange information om den nya lagringsplatsen:

    • Ägare: Välj ditt GitHub-användarnamn i den nedrullningsbara menyn. På skärmbilden är mygithubuser lagringsplatsens ägares GitHub-kontonamn. Du använder ditt kontonamn senare i den här modulen.
    • Lagringsplatsnamn: Ange ett beskrivande men kort namn. I den här modulen använder du toy-website-workflow.
    • Beskrivning: Inkludera en beskrivning som hjälper andra att förstå lagringsplatsens syfte.
    • Privat: Du kan använda GitHub för att skapa offentliga och privata lagringsplatser. Skapa en privat lagringsplats eftersom endast personer i organisationen ska ha åtkomst till din leksakswebbplatss filer. Du kan ge åtkomst till andra senare.

    När du är klar bör lagringsplatsens konfiguration se ut som följande skärmbild:

    Skärmbild av GitHub-gränssnittet som visar konfigurationen för lagringsplatsen som ska skapas.

  4. Välj Skapa lagringsplats.

Klona lagringsplatsen

Klona lagringsplatsen i Visual Studio Code.

  1. På lagringsplatsen väljer du kopieringsknappen för att kopiera URL:en till Git-lagringsplatsen.

    Skärmbild av GitHub-gränssnittet som visar den nya tomma lagringsplatsen med kopieringsknappen för lagringsplatsens URL markerad.

  2. Öppna Visual Studio Code.

  3. Öppna ett Terminalfönster i Visual Studio Code genom att välja Terminal>New Terminal. Fönstret öppnas vanligtvis längst ned på skärmen.

  4. Navigera i terminalen till den katalog där du vill klona GitHub-lagringsplatsen på den lokala datorn. Om du till exempel vill klona lagringsplatsen till mappen toy-website-workflow kör du följande kommando:

    cd toy-website-workflow

  5. Skriv git clone och klistra sedan in url:en som du kopierade tidigare, vilket ser ut ungefär så här:

    git clone https://github.com/mygithubuser/toy-website-workflow

    Du får en varning om att du klonade en tom lagringsplats. Du kan ignorera meddelandet.

  6. Det här är första gången du använder den här lagringsplatsen, så du kan uppmanas att logga in.

    I Windows skriver du 1 för att autentisera med en webbläsare och väljer Ange.

    På macOS väljer du Auktorisera.

  7. Ett webbläsarfönster visas. Du kan behöva logga in på GitHub igen. Välj Auktorisera.

  8. Öppna Visual Studio Code igen i lagringsplatsens mapp genom att köra följande kommando:

    code -r toy-website-workflow

Tips

Du kan också redigera dina GitHub Actions-arbetsflödesdefinitioner med hjälp av GitHub-webbanvändargränssnittet. När du öppnar en arbetsflödesdefinition hjälper GitHub dig med YAML-filsyntax och indrag och tillhandahåller exempelkodfragment för de åtgärder som du kanske vill använda. I den här modulen arbetar du med definitionsfilen i Visual Studio Code, men du kan utforska GitHub-redigeraren för att se hur den fungerar.

Skapa en YAML-arbetsflödesdefinition

Nu när du har skapat och klonat lagringsplatsen är du redo att skapa en grundläggande arbetsflödesdefinition.

  1. Öppna Utforskaren i Visual Studio Code.

  2. Skapa en ny mapp med namnet .githubi roten på din mappstruktur för toy-website-workflow.

    Not

    Se till att du inkluderar perioden i början av mappnamnet. Detta indikerar att det här är en dold mapp, och GitHub kräver perioden för GitHub Actions för att identifiera arbetsflödesdefinitionen.

  3. I mappen .github skapar du en annan mapp med namnet arbetsflöden.

  4. I mappen arbetsflöden skapar du en ny fil med namnet workflow.yml.

    Skärmbild av Visual Studio Code Explorer, med mappen .github/workflows och den workflow.yml fil som visas.

  5. Kopiera följande arbetsflödesdefinition till filen:

    name: deploy-toy-website

on: [workflow_dispatch]

jobs:
  say-hello:
    runs-on: ubuntu-latest
    steps:
      - name: 'placeholder step'
        run: echo "Hello world!"

  6. Spara filen.

  7. Göra en commit och pusha filen till ditt GitHub-repository med följande kommandon:

    git add .
git commit -m "Add initial workflow definition"
git push

Tips

Visual Studio Code hjälper dig med indraget i din YAML-fil. Håll utkik efter vågiga rader som indikerar syntaxfel eller välj Visa>Problem för att visa en lista över problem i filen.

Kör arbetsflödet

Du har skapat en arbetsflödesdefinition. GitHub Actions identifierar automatiskt arbetsflödesfilen eftersom den finns i katalogen .github/workflows.

  1. Gå till din lagringsplats i webbläsaren. Du kan behöva uppdatera sidan för att se dina ändringar.

  2. Välj fliken Åtgärder.

    Skärmbild av GitHub-gränssnittet som visar lagringsplatsens sida och fliken Åtgärder markerad.

  3. Välj arbetsflödet deploy-toy-website.

    Skärmbild av GitHub-gränssnittet som visar fliken Åtgärder med arbetsflödet deploy-toy-website valt.

  4. Välj listrutan Kör arbetsflöde och välj sedan knappen Kör arbetsflöde.

    Skärmbild av GitHub-gränssnittet som visar fliken Åtgärder med listrutan Kör arbetsflöde och knappen markerad.

  5. Arbetsflödet börjar köras. Det kan ta en stund och du kan uppdatera sidan, men den bör uppdateras automatiskt och visa en arbetsflödeskörning som står i kö, är pågående eller redan är slutförd.

    Skärmbild av GitHub-gränssnittet som visar fliken Åtgärder, där ett arbetsflöde körs.

    Observera att körningsstatusen initialt visas som i kö. Det kan ta lite tid innan arbetsflödet startas. Jobbet läggs till i en kö för en löpare, och när en löpare är tillgänglig tilldelar GitHub Actions löparen och startar jobbet. Jobbstatusen blir sedan Kör.

    Varje arbetsflödeskörning innehåller en identifierare. Du kan använda den här identifieraren när du behöver referera till arbetsflödeskörningen och för att hitta en specifik arbetsflödeskörning.

Verifiera arbetsflödeskörningen

  1. När arbetsflödeskörningen startar väljer du deploy-toy-website för att visa detaljer om körningen. Uppdatera sidan tills jobbstatusen visar Lyckades.

    Skärmbild av GitHub-gränssnittet som visar detaljer om arbetsflödeskörningen, där status och commit-ID har markerats.

    Observera också att sidan innehåller en identifierare för Git-commit som körningen använde. Commitets identifierare anger vilken version av arkivets innehåll som arbetsflödet använde.

  2. I listan över jobb väljer du say-hello.

    Skärmbild av GitHub-gränssnittet som visar menyn körningsinformation med say-hello-jobbet markerat.

  3. Jobbinformationssidan visas och visar loggen över de steg som arbetsflödet körde åt dig. Observera att platshållarsteget ingår.

    Skärmbild av GitHub-gränssnittet som visar loggen för körning av arbetsflöde, med platshållarsteget markerat.

    Observera att listan innehåller steg som du inte angav. De här stegen skapas automatiskt av GitHub Actions.

  4. Välj platshållarsteg.

    Skärmbild av GitHub-gränssnittet som visar arbetsflödeskörningsloggen med platshållarstegsloggen visad.

    Loggarna för det här steget innehåller innehållet i kommandot som det angavs i ditt arbetsflödes YAML-fil och Hello World! text som skriptet har genererat.

Det är bra att förstå hur du korsrefererar en arbetsflödeskörning till den commit som körningen innehöll. Genom att länka arbetsflödesutförande till ett commit kan du spåra historiken för dina distributioner och diagnostisera problem.

  1. Välj Sammanfattning för att återgå till sammanfattningen.

  2. Välj commitidentifieraren. GitHub visar detaljerna för commiten som utlöste arbetsflödeskörningen.