연습 - 기본 워크플로 만들기 및 실행

완료됨

중요

이 연습을 수행하려면 사용자의 Azure 구독이 필요하며 요금이 발생할 수 있습니다. Azure 구독이 아직 없는 경우 시작하기 전에 체험 계정을 만듭니다.

장난감 회사의 웹 사이트에 대한 업데이트 배포를 자동화하려고 합니다. 첫 번째 단계로 GitHub Actions에서 기본 워크플로를 만듭니다.

이 연습에서는 다음을 수행합니다.

  • GitHub 계정 및 리포지토리를 만듭니다.
  • 기본 워크플로를 만듭니다.
  • 기본 워크플로를 실행합니다.

GitHub에서 리포지토리 만들기

  1. 브라우저에서 GitHub로 이동합니다. GitHub 계정을 사용하여 로그인하거나, 계정이 없는 경우 새 계정을 만듭니다.

  2. 창의 오른쪽 위에서 더하기(+) 아이콘을 선택한 다음, 새 리포지토리를 선택합니다.

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

  3. 새 리포지토리의 세부 정보를 입력합니다.

    • 소유자: 드롭다운 메뉴에서 GitHub 사용자 이름을 선택합니다. 스크린샷에서 mygithubuser는 리포지토리 소유자의 GitHub 계정 이름입니다. 이후 모듈에서 계정 이름을 사용합니다.
    • 리포지토리 이름: 의미 있지만 짧은 이름을 입력합니다. 이 모듈에서는 toy-website-workflow라는 이름을 사용합니다.
    • 설명: 다른 사람들이 리포지토리의 용도를 쉽게 이해할 수 있도록 설명을 포함합니다.
    • 프라이빗: GitHub를 사용하여 퍼블릭 및 프라이빗 리포지토리를 만들 수 있습니다. 조직 내의 사용자만 장난감 웹 사이트 파일에 액세스해야 하므로 프라이빗 리포지토리를 만듭니다. 나중에 다른 사람에게 액세스 권한을 부여할 수 있습니다.

    여기까지 마치면 리포지토리 구성이 다음 스크린샷과 같습니다.

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

  4. 리포지토리 만들기를 선택합니다.

리포지토리 복제

Visual Studio Code에서 리포지토리를 복제합니다.

  1. 리포지토리 페이지에서 복사 단추를 선택하여 URL을 Git 리포지토리에 복사합니다.

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

  2. Visual Studio Code를 엽니다.

  3. 터미널>새 터미널을 선택하여 Visual Studio Code 터미널 창을 엽니다. 이 창은 일반적으로 화면 하단에 열립니다.

  4. 터미널에서 로컬 컴퓨터의 GitHub 리포지토리를 복제하려는 디렉터리로 이동합니다. 예를 들어 toy-website-workflow 폴더에 리포지토리를 복제하려면 다음 명령을 실행합니다.

    cd toy-website-workflow
    
  5. git clone을 입력한 다음 이전에 복사한 다음과 같은 URL을 붙여넣습니다.

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

    빈 리포지토리를 복제했다는 경고가 표시됩니다. 이 메시지는 무시해도 됩니다.

  6. 이 리포지토리를 처음 사용하는 것이므로 로그인하라는 메시지가 표시될 수 있습니다.

    Windows에서는 1을 입력하여 웹 브라우저로 인증하고 Enter를 선택합니다.

    macOS에서는 권한 부여를 선택합니다.

  7. 브라우저 창이 표시됩니다. GitHub에 다시 로그인해야 할 수도 있습니다. 권한 부여를 선택합니다.

  8. 다음 명령을 실행하여 리포지토리 폴더에서 Visual Studio Code를 다시 엽니다.

    code -r toy-website-workflow
    

GitHub 웹 사용자 인터페이스를 사용하여 GitHub Actions 워크플로 정의를 편집할 수도 있습니다. 워크플로 정의를 열 때 GitHub는 YAML 파일 구문 및 들여쓰기를 지원하며 사용하려는 작업에 대한 예제 코드 조각을 제공합니다. 이 모듈에서는 Visual Studio Code의 정의 파일을 사용하지만 GitHub 편집기를 탐색하여 작동 방식을 확인할 수 있습니다.

YAML 워크플로 정의 만들기

리포지토리를 만들고 복제했으므로 이제 기본 워크플로 정의를 만들 준비가 되었습니다.

  1. Visual Studio Code에서 탐색기를 엽니다.

  2. toy-website-workflow 폴더 구조의 루트에서 .github라는 새 폴더를 만듭니다.

    참고

    폴더 이름의 시작 부분에 마침표가 포함되어 있는지 확인합니다. 이는 이 폴더가 숨겨진 폴더임을 나타내며, GitHub에는 GitHub Actions가 워크플로 정의를 검색할 기간이 필요합니다.

  3. .github 폴더에서 워크플로라는 다른 폴더를 만듭니다.

  4. 워크플로 폴더에서 workflow.yml라는 새 파일을 만듭니다.

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

  5. 다음 워크플로 정의를 파일에 복사합니다.

    name: deploy-toy-website
    
    on: [workflow_dispatch]
    
    jobs:
      say-hello:
        runs-on: ubuntu-latest
        steps:
          - name: 'placeholder step'
            run: echo "Hello world!"
    
  6. 파일을 저장합니다.

  7. 다음 명령을 사용하여 파일을 커밋하고 GitHub 리포지토리에 푸시합니다.

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

Visual Studio Code로 YAML 파일을 들여쓰기할 수 있습니다. 구문 오류를 나타내는 물결선을 찾아 보거나 보기>문제를 선택하여 파일의 문제 목록을 봅니다.

워크플로 실행

워크플로 정의를 만들었습니다. GitHub Actions는 워크플로 파일이 .github/workflows 디렉터리에 있으므로 자동으로 감지합니다.

  1. 브라우저에서 리포지토리로 이동합니다. 변경 사항을 확인하려면 페이지를 새로 고쳐야 할 수 있습니다.

  2. 작업 탭을 선택합니다.

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

  3. deploy-toy-website 워크플로를 선택합니다.

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

  4. 워크플로 실행 드롭다운을 선택하고 워크플로 실행 단추를 선택합니다.

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

  5. 워크플로가 실행을 시작합니다. 몇 분 정도 걸리고 페이지를 고칠 수 있지만 페이지가 자동으로 새로 고쳐지고 큐에 대기 중이거나 실행 중이거나 이미 완료된 워크플로 실행이 표시됩니다.

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

    처음에는 실행 상태가 대기 중으로 표시됩니다. 워크플로를 시작하려면 다소 시간이 걸릴 수 있습니다. 작업이 실행기의 큐에 추가되고 실행기를 사용할 수 있게 되면 GitHub Actions가 실행기를 할당하고 작업을 시작합니다. 그러면 작업 상태가 실행 중이 됩니다.

    각 워크플로 실행에는 식별자가 포함됩니다. 워크플로 실행을 참조하고 특정 워크플로 실행을 찾아야 하는 경우 이 식별자를 사용할 수 있습니다.

워크플로 실행을 확인합니다.

  1. 워크플로 실행이 시작되면 deploy-toy-website를 선택하여 실행의 세부 정보를 확인합니다. 작업 상태가 성공으로 표시될 때까지 페이지를 새로 고칩니다.

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

    또한 페이지에는 실행에서 사용한 Git 커밋의 식별자가 포함됩니다. 커밋 식별자는 워크플로에서 사용한 리포지토리 콘텐츠의 버전을 나타냅니다.

  2. 작업 목록에서 say-hello를 선택합니다.

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

  3. 워크플로에서 실행한 단계의 로그를 보여주는 작업 정보 페이지가 표시됩니다. 자리 표시자 단계가 포함되어 있습니다.

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

    목록에 지정하지 않은 단계가 포함되어 있습니다. 이 단계는 GitHub Actions에서 자동으로 생성됩니다.

  4. 자리 표시자 단계를 선택합니다.

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

    이 단계의 로그에는 워크플로의 YAML 파일에 지정된 대로 명령 콘텐츠가 포함되고, 스크립트에서 내보낸 Hello world! 텍스트가 포함됩니다.

워크플로 실행을 실행에 포함된 커밋에 상호 참조하는 방법을 이해하는 것이 좋습니다. 워크플로 실행을 커밋에 연결하면 배포 기록을 추적하고 문제를 진단할 수 있습니다.

  1. 요약을 선택하여 실행 요약으로 돌아갑니다.

  2. 커밋 식별자를 선택합니다. GitHub에 워크플로 실행을 트리거한 커밋의 세부 정보가 표시됩니다.