이 게시물에서는 코드가 마스터 브랜치에 병합된 후 내 Angular 프로젝트 중 하나에 최신 코드를 배포하기 위해 GitHub 워크플로를 설정하는 방법을 보여줍니다.

틀림없이 저는 GitHub Actions 파티에 늦었습니다. 최신 코드를 GitHub 페이지에 자동으로 배포하는 워크플로를 설정하기로 했습니다. 저는 angular-cli-ghpages을 사용하여 Angular 앱을 GitHub 페이지에 배포했으며 이 프로세스를 자동화할 수 있는 방법이 있기를 바랐습니다. 작업 흐름을 만드는 것이 상대적으로 쉬웠습니다.

필요한 작업을 정확히 수행하는 Angular Deploy gh-pages Actions이라는 작업을 찾았습니다. 작업의 홈페이지에 따라 "이 GitHub 작업은 GitHub 페이지에 대한 각도 응용 프로그램의 배포 프로세스를 처리합니다."

시작하자

가장 먼저 한 일은 GitHub 페이지에서 호스팅하려는 Angular 프로젝트의 GitHub 저장소로 이동하는 것이었습니다. 거기에서 다음과 같은 작업 버튼을 클릭했습니다.



여기에서 "직접 워크플로 설정"링크를 클릭했습니다.

실제로 Angular Deploy gh-pages Actions 홈페이지에서 예제 yml 파일을 복사해서 붙여넣었습니다. 홈페이지에서 아래로 스크롤하면 '시작하기'라는 섹션이 있으며 예제 yml 파일이 있습니다. 물론 나는 약간의 조정을해야했습니다. 먼저 github_access_token의 값을 ${{ secrets.GITHUB_TOKEN }}로 변경했습니다. base_href에 방금 내 저장소 이름을 붙여넣었습니다. angular_dist_build_folder에서 값을 dist/highlightSearch로 변경했습니다. 여기서 highlightSearch는 내 프로젝트의 이름입니다. 최종 결과는 다음과 같습니다.

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  push:
    branches: 
    - master
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      # Runs a single command using the runners shell
      - name: Angular Deploy gh-pages Actions
        uses: AhsanAyaz/[email protected]
        with:
          github_access_token: ${{ secrets.GITHUB_TOKEN  }} 
          build_configuration: production 
          base_href: /angular-highlight-search-pipe/  
          deploy_branch: gh-pages 
          angular_dist_build_folder: dist/highlightSearch

편집을 마친 후 커밋 시작 버튼을 클릭하고 새 yml 파일을 마스터 브랜치에 직접 커밋하도록 선택했습니다.



workflows라는 하위 폴더가 있는 .github 폴더가 생성되었습니다. 이 폴더 내에서 main.yml 파일을 찾을 수 있습니다.

작업 탭을 다시 클릭하면 다음과 같은 내용이 표시됩니다.



그런 다음 yml 파일을 클릭한 다음 빌드를 클릭하고 빌드를 지켜봤습니다. 다음과 같이 생겼습니다.



녹색 확인 표시는 빌드가 오류 없이 완료되었음을 의미합니다.



이 워크플로우를 사용하면 마스터에 병합할 때마다 새 빌드가 자동으로 시작되고 최신 변경 사항이 GitHub Pages 호스팅 사이트에 배포됩니다.

결론

이 워크플로우를 시작하고 실행하는 것이 얼마나 쉬운지 감명받았습니다. Angular Deploy gh-pages Actions 액션을 제작한 팀에 큰 감사를 드립니다. 네 생각을 말해봐. 읽어 주셔서 감사합니다!