login VS starter-workflows

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, as one of the leading web-based Git repository hosting service, provides a powerful suite of CI/CD tools in the form of GitHub Actions. These are directly integrated into the platform which empowers developers to increase the speed, efficiency and reliability of delivering products. In this brief article, we will take a look at what CI/CD is, why we should use it, as well as some of its applications in my projects.

GitHub Actions is a modern CI/CD tool integrated natively on GitHub. Itenables the rapid automation of build, test, deployment, and other custom workflows on GitHub with no need for external tools.

GitHub Actions is GitHub's CI/CD solution. You can use it to run automated tasks each time you change your code. Although the platform lacks a built-in Kubernetes integration, third-party plugins such as Azure's Deploy to Kubernetes Cluster action can automate deployments and manage different rollout strategies.

GitHub Actions is a feature-rich CI/CD platform embedded within GitHub, enabling developers to automate, customize, and execute software development workflows directly in their repositories. An Action inside GitHub Actions is a discrete unit of automation that performs a specific task within a workflow. All the Actions are reusable, and there are many to choose from. You can even create your own reusable ones.

actions/starter-workflows

The real power of using PHP code-quality tools is when it’s added to your continuous integration process, which means it automatically checks the code every time someone makes a push or pull request to your project repo. In this section, we'll be looking at how to do just that. GitHub actions is available for free so we'll use it for demo purposes. Note that there are some limits to private repos, so set your test repo to public if you can.

You can even automate the running of this script — hence the directory name automation — to happen every time the data changes, using GitHub Actions.

# Based on https://github.com/actions/starter-workflows/blob/main/ci/node.js.yml name: CI on: pull_request: branches: - main jobs: ci: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: node-version: lts/* cache: 'npm' - run: npm ci - run: npm run build --if-present - run: npm test

You might remember that I’ve been taking an interest in GitHub Actions for the last year or so (I even wrote a book on the subject). And at the Perl Conference in Toronto last summer I gave a talk called “GitHub Actions for Perl Development” (here are the slides and the video).