Alternative Architecture DOJO

オルターブースのクラウドネイティブ特化型ブログです。

ファイル数が多いせいで時間のかかるGitHub Actionsのデプロイを短縮する

こんにちは、MLBお兄さんこと松村です。
99日間のロックアウトを経て、ようやく MLB が開幕しました! MLBファンの皆様あけましておめでとうございます!!


最近は GitHub Actions から Azure へのデプロイを色々試しながら遊んでいます。
普段は Azure Pipelines を使うことが多いですが、 YAML の書き方の違いはあれど CI/CD を実現する仕組みとして面白いです。

ファイル数が多いとデプロイに時間がかかる

そんな GitHub Actions ですが、例えば NuxtJS のようなアプリケーションでは node_modules にあるファイル数が多いため、Artifacts に対するアップロード(ビルド時)とダウンロード(デプロイ時)にとても時間がかかってしまいます。

そこで回避策として、 Artifacts にアップロードしたいファイル群を事前に Zip ファイルにする方法があります。
デプロイしたいアプリケーションを Zip ファイルにすることで、ファイル数を「1」にすることができ、 Artifacts に対するアップロードとダウンロードにかかる時間を短縮することができます。

Zip を使わずに NuxtJS をデプロイするパイプライン

検証に使用したパイプライン定義を載せます。まずは Zip を使わない方法です。

name: Nodejs NuxtJS on App Service

on:
  push:
    branches: [ main ]
    paths:
    - 'nodejs/nuxtjs/**'
  workflow_dispatch:

env:
  NODE_VERSION: '16.x'
  WORKING_DIRECTORY: nodejs/nuxtjs
  PACKAGE_NAME: node-app

jobs:
  build:
    runs-on: ubuntu-latest

    defaults:
      run:
        working-directory: ${{ env.WORKING_DIRECTORY }}

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'npm'
          cache-dependency-path: ${{ env.WORKING_DIRECTORY }}

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: ${{ env.PACKAGE_NAME }}
          path: ${{ env.WORKING_DIRECTORY }}

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: ${{ env.PACKAGE_NAME }}

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: ${{ secrets.AZURE_WEBAPP_NAME }}
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
          package: .

Zip を使って NuxtJS をデプロイするパイプライン

続いて Zip を使う方法がこちらです。
Artifacts にアップロードする前に Zipファイルを作成しています。

name: Nodejs NuxtJS on App Service with Zip

on:
  push:
    branches: [ main ]
    paths:
    - 'nodejs/nuxtjs/**'
  workflow_dispatch:

env:
  NODE_VERSION: '16.x'
  WORKING_DIRECTORY: nodejs/nuxtjs
  PACKAGE_NAME: node-app
  ARCHIVE_NAME: nuxtjs.zip

jobs:
  build:
    runs-on: ubuntu-latest

    defaults:
      run:
        working-directory: ${{ env.WORKING_DIRECTORY }}

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'npm'
          cache-dependency-path: ${{ env.WORKING_DIRECTORY }}

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Install zip
        uses: montudor/action-zip@v1

      - name: Zip output
        run: zip -qq -r ${{ env.ARCHIVE_NAME }} .
        working-directory: ${{ env.WORKING_DIRECTORY }}

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: ${{ env.PACKAGE_NAME }}
          path: ${{ env.WORKING_DIRECTORY }}/${{ env.ARCHIVE_NAME }}

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: ${{ env.PACKAGE_NAME }}

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: ${{ secrets.AZURE_WEBAPP_NAME }}
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
          package: ${{ env.ARCHIVE_NAME }}

以下の画像のように大幅に短縮することができました。

Azure App Service の設定

なお、上記のパイプライン定義のように Azure App Service に Zipファイルを用いてデプロイを行う場合、アプリケーション設定 WEBSITE_RUN_FROM_PACKAGE1 を設定することをオススメします。

docs.microsoft.com

www.alterbooth.com

cloudpointer.tech

www.alterbooth.com