こんにちは、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_PACKAGE
に 1
を設定することをオススメします。