Ćwiczenie — tworzenie i uruchamianie podstawowego przepływu pracy

  • 6 min

Ważny

Potrzebujesz własnej subskrypcji platformy Azure, aby uruchomić to ćwiczenie i możesz ponieść opłaty. Jeśli nie masz jeszcze subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto .

Chcesz zautomatyzować wdrażanie aktualizacji na stronie internetowej Twojej firmy z zabawkami. W pierwszym kroku utworzysz podstawowy przepływ pracy w funkcji GitHub Actions.

W tym ćwiczeniu wykonasz następujące czynności:

  • Utwórz konto i repozytorium GitHub.
  • Utwórz podstawowy przepływ pracy.
  • Wykonaj podstawowy przepływ pracy.

Tworzenie repozytorium w usłudze GitHub

  1. W przeglądarce przejdź do witryny GitHub. Zaloguj się przy użyciu konta usługi GitHub lub utwórz nowe konto, jeśli go nie masz.

  2. Wybierz ikonę plus (+) w prawym górnym rogu okna, a następnie wybierz Nowe repozytorium.

    Zrzut ekranu interfejsu usługi GitHub przedstawiający menu tworzenia nowego repozytorium.

  3. Wprowadź szczegóły nowego repozytorium:

    • Właściciel: Wybierz nazwę użytkownika GitHub z menu rozwijanego. Na zrzucie ekranu, mygithubuser jest nazwą konta GitHub właściciela repozytorium. W dalszej części tego modułu użyjesz swojej nazwy konta.
    • nazwa repozytorium: wprowadź zrozumiałą, ale krótką nazwę. W tym module użyj toy-website-workflow.
    • Opis: dołącz opis, aby ułatwić innym zrozumienie przeznaczenia repozytorium.
    • prywatnej: możesz użyć usługi GitHub do tworzenia repozytoriów publicznych i prywatnych. Utwórz repozytorium prywatne, ponieważ tylko osoby w organizacji powinny uzyskiwać dostęp do plików witryny sieci Web. Później możesz udzielić dostępu innym osobom.

    Po zakończeniu konfiguracja repozytorium powinna wyglądać podobnie jak na poniższym zrzucie ekranu:

    Zrzut ekranu przedstawiający interfejs GitHub, pokazujący konfigurację repozytorium do utworzenia.

  4. Wybierz pozycję Utwórz repozytorium.

Klonowanie repozytorium

W programie Visual Studio Code sklonuj repozytorium.

  1. Na stronie repozytorium wybierz przycisk kopiowania, aby skopiować adres URL do repozytorium Git.

    Zrzut ekranu interfejsu usługi GitHub przedstawiający nowe puste repozytorium z wyróżnionym przyciskiem kopiowania adresu URL repozytorium.

  2. Otwórz program Visual Studio Code.

  3. Otwórz okno terminalu programu Visual Studio Code, wybierając pozycję Terminal>New Terminal. Okno jest zwykle otwierane w dolnej części ekranu.

  4. Otwórz terminal i przejdź do katalogu, w którym chcesz sklonować repozytorium GitHub na komputerze lokalnym. Aby na przykład sklonować repozytorium do folderu toy-website-workflow, uruchom następujące polecenie:

    cd toy-website-workflow

  5. Wpisz git clone, a następnie wklej skopiowany wcześniej adres URL, który wygląda następująco:

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

    Otrzymasz ostrzeżenie, że sklonowałeś puste repozytorium. Możesz zignorować komunikat.

  6. Jest to pierwszy raz, kiedy używasz tego repozytorium, więc możesz zostać poproszony o zalogowanie się.

    W systemie Windows wpisz 1 do uwierzytelniania przy użyciu przeglądarki internetowej, a następnie wybierz pozycję Wprowadź.

    W systemie macOS wybierz Autoryzuj.

  7. Zostanie wyświetlone okno przeglądarki. Może być konieczne ponowne zalogowanie się do usługi GitHub. Wybierz pozycję Autoryzuj.

  8. Otwórz ponownie program Visual Studio Code w folderze repozytorium, uruchamiając następujące polecenie:

    code -r toy-website-workflow

Napiwek

Definicje przepływu pracy funkcji GitHub Actions można również edytować przy użyciu internetowego interfejsu użytkownika usługi GitHub. Po otwarciu definicji przepływu pracy usługa GitHub ułatwia korzystanie ze składni i wcięcia pliku YAML oraz udostępnia przykładowe fragmenty kodu dla akcji, których można użyć. W tym module będziesz pracować z plikiem definicji w programie Visual Studio Code, ale możesz zapoznać się z edytorem GitHub, aby zobaczyć, jak to działa.

Tworzenie definicji przepływu pracy YAML

Po utworzeniu i sklonowaniu repozytorium jesteś gotowy utworzyć podstawową definicję przepływu pracy.

  1. W programie Visual Studio Code otwórz Eksploratora.

  2. W katalogu głównym toy-website-workflow struktury folderów utwórz nowy folder o nazwie .github.

    Notatka

    Upewnij się, że na początku nazwy folderu dołączysz kropkę. Oznacza to, że jest to ukryty folder, a usługa GitHub wymaga okresu dla funkcji GitHub Actions w celu wykrycia definicji przepływu pracy.

  3. W folderze .github utwórz inny folder o nazwie workflows.

  4. W folderze przepływów pracy utwórz nowy plik o nazwie workflow.yml.

    Zrzut ekranu eksploratora programu Visual Studio Code z folderem .github/workflows i wyświetlonym plikiem workflow.yml.

  5. Skopiuj następującą definicję przepływu pracy do pliku:

    name: deploy-toy-website

on: [workflow_dispatch]

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

  6. Zapisz plik.

  7. Zatwierdź i wypchnij plik do repozytorium GitHub za pomocą następujących poleceń:

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

Napiwek

Program Visual Studio Code ułatwia wcięcie pliku YAML. Zwróć uwagę na faliste linie wskazujące błędy składniowe lub wybierz opcję Wyświetl>Problemy, aby zobaczyć listę problemów w pliku.

Uruchamianie przepływu pracy

Utworzono definicję przepływu pracy. Funkcja GitHub Actions automatycznie wykrywa plik przepływu pracy, ponieważ znajduje się w katalogu .github/workflows.

  1. W przeglądarce przejdź do repozytorium. Może być konieczne odświeżenie strony, aby zobaczyć zmiany.

  2. Wybierz kartę Akcje.

    Zrzut ekranu interfejsu usługi GitHub przedstawiający stronę repozytorium i wyróżnioną zakładkę Akcje.

  3. Wybierz przepływ pracy deploy-toy-website.

    Zrzut ekranu interfejsu usługi GitHub przedstawiający zakładkę Akcje z wybranym przepływem pracy deploy-toy-website.

  4. Wybierz rozwijane menu Uruchom przepływ pracy, a następnie przycisk Uruchom przepływ pracy.

    Zrzut ekranu interfejsu usługi GitHub przedstawiający kartę Akcje z wybraną listą rozwijaną

  5. Przepływ pracy zaczyna działać. Może upłynąć kilka chwil i możesz odświeżyć stronę, ale powinna być automatycznie odświeżona i wyświetlić uruchomiony przepływ pracy w kolejce, działający lub nawet już zakończony.

    Zrzut ekranu interfejsu usługi GitHub przedstawiający kartę Akcje z uruchomionym jednym przepływem pracy.

    Zwróć uwagę, że początkowo stan uruchomienia jest wyświetlany jako w kolejce. Uruchomienie przepływu pracy może zająć trochę czasu. Zadanie jest dodawane do kolejki dla agenta wykonawczego, a gdy agent wykonawczy jest dostępny, GitHub Actions przypisuje go i uruchamia zadanie. Następnie stan zadania staje się Wykonywanie.

    Każdy przebieg przepływu pracy zawiera identyfikator. Możesz użyć tego identyfikatora, gdy musisz odwołać się do przebiegu przepływu pracy i ułatwić znalezienie określonego przebiegu przepływu pracy.

Weryfikowanie przebiegu przepływu pracy

  1. Po uruchomieniu przepływu pracy wybierz pozycję deploy-toy-website, aby wyświetlić szczegóły przebiegu. Odświeżaj stronę do momentu wyświetlenia stanu zadania Powodzenie.

    Zrzut ekranu interfejsu usługi GitHub przedstawiający szczegóły przebiegu przepływu pracy z wyróżnionym identyfikatorem stanu i zatwierdzenia.

    Zwróć również uwagę, że strona zawiera identyfikator zatwierdzenia Git, który został użyty przez proces. Identyfikator zatwierdzenia wskazuje na wersję zawartości repozytorium, której używał przepływ pracy.

  2. Na liście zadań wybierz pozycję say-hello.

    Zrzut ekranu interfejsu GitHub przedstawiający menu szczegółów działania z wyróżnionym zadaniem say-hello.

  3. Zostanie wyświetlona strona informacji o zadaniu zawierająca dziennik kroków uruchomionych przez przepływ pracy. Zwróć uwagę, że uwzględniono krok symbolu zastępczego .

    Zrzut ekranu interfejsu usługi GitHub przedstawiający dziennik uruchamiania przepływu pracy z wyróżnionym krokiem zastępczym.

    Zwróć uwagę, że lista zawiera kroki, które nie zostały przez ciebie określone. Te kroki są tworzone automatycznie przez funkcję GitHub Actions.

  4. Wybierz symbol zastępczy kroku.

    Zrzut ekranu interfejsu usługi GitHub przedstawiający dziennik uruchamiania przepływu pracy z widocznym dziennikiem kroku będącego symbolem zastępczym.

    Dzienniki tego kroku obejmują zawartość polecenia, jak zostało określone w pliku YAML przepływu pracy, oraz tekst Hello world! emitowany przez skrypt.

Dobrze jest zrozumieć, jak powiązać przebieg przepływu pracy z odpowiednim zatwierdzeniem. Łączenie wykonywania przepływu pracy z zatwierdzeniem może pomóc w śledzeniu historii wdrożeń i diagnozowaniu problemów.

  1. Wybierz pozycję Podsumowanie, aby powrócić do podsumowania przebiegu.

  2. Wybierz identyfikator zatwierdzenia. Usługa GitHub wyświetla szczegóły zatwierdzenia, które wyzwoliło uruchomienie przepływu pracy.