Ćwiczenie — tworzenie i uruchamianie podstawowego przepływu pracy

Ukończone

Ważne

Do wykonania tego ćwiczenia potrzebna jest własna subskrypcja platformy Azure. Ponadto mogą zostać naliczone opłaty. Jeśli nie masz jeszcze subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto.

Chcesz zautomatyzować wdrażanie aktualizacji w firmowej witrynie internetowej twojej firmy. 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ę znaku plus (+) w prawym górnym rogu okna, a następnie wybierz pozycję Nowe repozytorium.

    Screenshot of the GitHub interface that shows the menu for creating a new repository.

  3. Wprowadź szczegóły nowego repozytorium:

    • Właściciel: wybierz nazwę użytkownika usługi GitHub z menu rozwijanego. Na zrzucie ekranu mygithubuser znajduje się nazwa konta właściciela repozytorium GitHub. 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 polecenia toy-website-workflow.
    • Opis: dołącz opis, aby ułatwić innym osobom zrozumienie przeznaczenia repozytorium.
    • Prywatny: 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:

    Screenshot of the GitHub interface showing the configuration for the repository to create.

  4. Kliknij przycisk Create repository (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.

    Screenshot of the GitHub interface showing the new empty repository, with the repository URL copy button highlighted.

  2. Otwórz Visual Studio Code.

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

  4. Przejdź do terminalu 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 i wklej skopiowany wcześniej adres URL, który wygląda następująco:

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

    Zostanie wyświetlone ostrzeżenie o sklonowanym pustym repozytorium. Możesz zignorować komunikat.

  6. Po raz pierwszy użyto tego repozytorium, więc może zostać wyświetlony monit o zalogowanie się.

    W systemie Windows wpisz 1 , aby uwierzytelnić się przy użyciu przeglądarki internetowej, a następnie wybierz klawisz Enter.

    W systemie macOS wybierz pozycję Autoryzuj.

  7. Pojawi się 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 sklonowanym repozytorium możesz utworzyć podstawową definicję przepływu pracy.

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

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

    Uwaga

    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 workflows utwórz nowy plik o nazwie workflow.yml.

    Screenshot of the Visual Studio Code Explorer, with the .github/workflows folder and the workflow.yml file shown.

  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. Poszukaj zwijanych wierszy wskazujących błędy składniowe lub wybierz pozycję Wyświetl>problemy, aby wyświetlić listę problemów w pliku.

Uruchom przepływ 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ę Działania.

    Screenshot of the GitHub interface showing the repository page, and the Actions tab highlighted.

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

    Screenshot of the GitHub interface showing the Actions tab, with the deploy-toy-website workflow selected.

  4. Wybierz listę rozwijaną Uruchom przepływ pracy, a następnie wybierz przycisk Uruchom przepływ pracy.

    Screenshot of the GitHub interface showing the Actions tab, with the Run workflow dropdown and button selected.

  5. Przepływ pracy zaczyna działać. Może upłynąć kilka chwil i możesz odświeżyć stronę, ale powinna zostać automatycznie odświeżona i wyświetlona kolejkowana lub uruchomiona, a nawet już zakończona.

    Screenshot of the GitHub interface showing the Actions tab, with one workflow running.

    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 modułu uruchamiającego, a gdy moduł uruchamiający jest dostępny, funkcja GitHub Actions przypisuje moduł uruchamiający i uruchamia zadanie. Stan zadania staje się następnie wykonywany.

    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ż stronę do momentu wyświetlenia stanu zadania Powodzenie.

    Screenshot of the GitHub interface showing the details of the workflow run, with the status and commit identifier highlighted.

    Zwróć również uwagę, że strona zawiera identyfikator zatwierdzenia usługi Git, które zostało użyte przez przebieg. Identyfikator zatwierdzenia wskazuje wersję zawartości repozytorium używanej przez przepływ pracy.

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

    Screenshot of the GitHub interface showing the run details menu, with the say-hello job highlighted.

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

    Screenshot of the GitHub interface showing the workflow run log, with the placeholder step highlighted.

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

  4. Wybierz krok symbolu zastępczego.

    Screenshot of the GitHub interface showing the workflow run log, with the placeholder step log shown.

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

Dobrze jest zrozumieć, jak odwoływać się krzyżowo do przebiegu przepływu pracy w celu zatwierdzenia zawartego przebiegu. Łą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.