Hipster와 같은 GitHub Actions를 사용하여 Azure에 웹 사이트 배포

나는 한동안 GitHub Actions에서 기술을 향상시키려 했습니다. '작업'과 함께 저장소에 표시되는 작은 탭을 알고 있습니까? 자꾸만 클릭이 안되네요.

최근에 저는 총알을 깨물고 뛰어들기로 결정했습니다. 몇 가지를 배웠고 여러분도 GitHub 작업 워크플로를 사용하여 앱을 배포하고 그 모든 것을 즐길 수 있도록 공유해야겠다고 생각했습니다. 멋진 DevOps 아이들과 같은 CI/CD.

문제: Vue.js로 구축된 Azure 호스팅 웹 사이트가 있습니다. 실제로 중요한 비즈니스 사용 사례인 귀하differentiate between dalmatians and ice cream를 돕기 위한 사이트입니다. 다른 날에 더 자세히. GitHub 리포지토리에 코드를 푸시할 때마다 다시 빌드하고 재배포해야 합니다.

이전에는 Azure Pipelines를 통해 이 작업을 수행했습니다. 그러나 방법을 파악한 후 처음부터 워크플로를 작성하여 GitHub Actions로 기본 CI/CD를 설정하는 것이 더 빠릅니다. 몇 가지 약간 성가신 속임수가 있습니다.

첫째, 사전 빌드된 모듈이 여러 개 있지만 GitHub Actions에 익숙해질 수 있지만 처음부터 빌드하여 생성된 경로를 완전히 제어하는 ​​것이 더 좋습니다. 이러한 미리 빌드된 작업 중 일부를 탐색하려면 GitHub 리포지토리(실행!)에서 Actions 탭을 클릭하면 해당 작업을 찾을 수 있습니다.



Vue.js 사이트에 대해 훌륭하고 깨끗한 CI/CD(Continuous Integration and Deliver)를 설정하는 네 단계가 있습니다.

1단계: 웹사이트 루트에 .github라는 폴더를 만듭니다. 해당 폴더에서 workflows라는 다른 폴더를 만듭니다. 마지막으로 해당 폴더에 deploy.yml라는 파일을 만듭니다. 이것은 YAML 파일이며 GitHub Actions가 사이트를 빌드하고 배포하는 데 필요한 명령을 포함합니다.

2단계: deploy.yml 에서 다음 코드를 추가합니다.

on:
  push:
    branches:
      - master

env:
  AZURE_WEBAPP_NAME: "icecreamordog" # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: "dist" # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: "10.x" # set this to the node version to use

jobs:
  build-and-deploy:
    name: Build and Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ env.NODE_VERSION }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ env.NODE_VERSION }}
      - name: npm install, build, and test
        run: |
          # Build and test the project, then
          # deploy to Azure Web App.
          npm install
          npm run build --if-present
          npm run test --if-present
      - name: "Deploy to Azure WebApp"
        uses: azure/webapps-deploy@v1
        with:
          app-name: ${{ env.AZURE_WEBAPP_NAME }}
          publish-profile: ${{ secrets.PORTAL_PUBLISH_PROFILE }}
          package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

33줄의 YAML을 사용하면 마스터에 코드를 푸시할 때마다 사이트가 구축되고 배포됩니다. 참고로 Vue.js 사이트는 dist 폴더에 구축되어 있으므로 이를 앱 프로젝트 경로로 설정합니다.

3단계: 거의 다 왔습니다! 다음으로 배포를 secrets.PORTAL_PUBLISH_PROFILE에 연결해야 합니다. 이는 핸드셰이크를 생성하기 위해 Azure Portal에서 내보내고 GitHub로 가져와야 하는 비밀 키입니다. 좋은 지침here이 있지만 여기에 간략하게 설명하겠습니다.

웹 앱이 호스팅되는 Azure portal으로 이동합니다. 파일을 다운로드하려면 '게시 프로필 가져오기'를 클릭하세요.

GitHub 리포지토리에서 설정 > 비밀로 이동합니다. 해당 파일의 콘텐츠를 복사하여 이름이 PORTAL_PUBLISH_PROFILE인 새 보안 비밀에 붙여넣고 저장합니다.

4단계: 이제 코드를 리포지토리에 푸시할 준비가 되었습니다. 이것은 OAuth를 통해 GitHub에 연결되기 때문에 GitHub Desktop previously didn't easily allow pushing workflows 나에게 약간 까다로운 것으로 판명되었습니다. 더 나은 경험을 위해 GitHub Desktop 2.2 이상으로 업그레이드하십시오! 이 푸시를 활성화하려면 재인증하라는 메시지가 표시될 수 있습니다.

이 폴더와 .yml 파일을 푸시하면 GitHub Actions가 해당 위치를 선택하고 빌드를 시작합니다. 이제 코드를 푸시할 때마다 사이트가 구축 및 배포됩니다! 너무 좋아요.



훨씬 더 흥미로운 워크플로와 멋진 GitHub 작업 자동화를 탐색하여 개발 환경을 개선할 수 있습니다. 시도해 보지 않겠습니까?

Azure에서 웹 사이트를 구축하고 호스팅하는 방법에 대한 더 흥미로운 내용을 보려면 다음 기사를 살펴보십시오.