login VS functions-action

name: Static Web App - Build and Deploy 🏗️ on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main workflow_dispatch: permissions: id-token: write contents: write pull-requests: write env: LOCATION: westeurope STATICWEBAPPNAME: blog.johnnyreilly.com jobs: build_and_deploy_swa_job: if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') runs-on: ubuntu-latest name: Site build and deploy 🏗️ steps: - name: Checkout 📥 uses: actions/checkout@v3 # Auth between GitHub and Azure is handled by https://github.com/jongio/github-azure-oidc # https://github.com/Azure/login#sample-workflow-that-uses-azure-login-action-using-oidc-to-run-az-cli-linux # other login options are possible too - name: AZ CLI login 🔑 uses: azure/login@v1 with: client-id: ${{ secrets.AZURE_CLIENT_ID }} tenant-id: ${{ secrets.AZURE_TENANT_ID }} subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }} - name: Get preview URL 📝 id: static_web_app_preview_url uses: azure/CLI@v1 with: inlineScript: | DEFAULTHOSTNAME=$(az staticwebapp show -n '${{ env.STATICWEBAPPNAME }}' | jq -r '.defaultHostname') PREVIEW_URL="https://${DEFAULTHOSTNAME/.[1-9]./-${{github.event.pull_request.number }}.${{ env.LOCATION }}.1.}" echo "PREVIEW_URL=$PREVIEW_URL" >> $GITHUB_OUTPUT - name: Setup Node.js 🔧 uses: actions/setup-node@v3 with: node-version: '18' cache: 'yarn' - name: Install and build site 🔧 run: | cd blog-website yarn install --frozen-lockfile yarn run build cp staticwebapp.config.json build/staticwebapp.config.json - name: Get API key 🔑 id: static_web_app_apikey uses: azure/CLI@v1 with: inlineScript: | APIKEY=$(az staticwebapp secrets list --name '${{ env.STATICWEBAPPNAME }}' | jq -r '.properties.apiKey') echo "APIKEY=$APIKEY" >> $GITHUB_OUTPUT - name: Deploy site 🚀 id: static_web_app_build_and_deploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ steps.static_web_app_apikey.outputs.APIKEY }} repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) action: 'upload' skip_app_build: true app_location: '/blog-website/build' # App source code path api_location: '/blog-website/api' # Api source code path - optional outputs: preview-url: ${{steps.static_web_app_preview_url.outputs.PREVIEW_URL}} integration_tests_job: name: Integration tests 💡🏠 needs: build_and_deploy_swa_job if: github.event_name == 'pull_request' && github.event.action != 'closed' runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Wait for preview ${{ needs.build_and_deploy_swa_job.outputs.preview-url }} ⌚ id: static_web_app_wait_for_preview uses: nev7n/wait_for_response@v1 with: url: '${{ needs.build_and_deploy_swa_job.outputs.preview-url }}' responseCode: 200 timeout: 600000 interval: 1000 - uses: actions/setup-node@v3 with: node-version: 18 - name: Install dependencies run: npm ci working-directory: ./blog-website-tests - name: Install Playwright Browsers run: npx playwright install --with-deps working-directory: ./blog-website-tests - name: Run Playwright tests env: PLAYWRIGHT_TEST_BASE_URL: '${{ needs.build_and_deploy_swa_job.outputs.preview-url }}' run: npx playwright test working-directory: ./blog-website-tests - uses: actions/upload-artifact@v3 if: always() with: name: playwright-report path: blog-website-tests/playwright-report/ retention-days: 30 close_pull_request_job: if: github.event_name == 'pull_request' && github.event.action == 'closed' runs-on: ubuntu-latest name: Cleanup staging 💥 steps: - name: AZ CLI login 🔑 uses: azure/login@v1 with: client-id: ${{ secrets.AZURE_CLIENT_ID }} tenant-id: ${{ secrets.AZURE_TENANT_ID }} subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }} - name: Get API key 🔑 id: apikey uses: azure/CLI@v1 with: inlineScript: | APIKEY=$(az staticwebapp secrets list --name '${{ env.STATICWEBAPPNAME }}' | jq -r '.properties.apiKey') echo "APIKEY=$APIKEY" >> $GITHUB_OUTPUT - name: Destroy staging environment 💥 id: closepullrequest uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ steps.apikey.outputs.APIKEY }} action: 'close'

Azure Login

We leveraged many existing GitHub Actions such as actions/checkout, azure/CLI and azure/login to build our pipeline. The built-in support for bash scripts provides all the flexibilities we needed to complete it.

Interesting - do you use https://github.com/Azure/login in GitHub Actions, or do you just create GitHub secrets and use those as env vars in the action steps?

In order for the workflow to successfully log in to the Azure subscriptions, you will need to make sure that you have created a Service Principal with the appropriate permissions. Once the Service Principal has been created you can add the details to a repository secret on GitHub. You can find out more about how to create this Service Principal on the ‘Azure/Login’ GitHub repo. Once created, you secrets might look like the below.

This error actually makes sense. If you've seen any of my recent talks / posts, you may have noticed that I talk about how each GitHub Action is just another GitHub repository that follows a specific standard. Each GitHub Action has an action.yml file in the root of the GitHub repository. This is available for the Azure/login action here.

GitHub Actions for deploying to Azure Functions

The final step is for deployment to take place to our Function App. We specify environment variables and GitHub secrets to complete the app name, package and publish profile parameters. This uses a supplied GitHub action from Microsoft called functions-action.