Deploy Vue on Azure with GitHub Actions

💚 Vue 🔷 Microsoft Azure ⚙️ GitHub Actions

Configuration Files

Production-ready configuration files with detailed comments and best practices. Each file works together as a complete deployment solution.
name: Deploy Vue to Azure Static Web Apps

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Build and Deploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "/"
          api_location: ""
          output_location: "dist"

Prerequisites

  • Azure account (free tier available)
  • Vue project with build script
  • GitHub repository
  • Azure Static Web Apps resource created

Deployment Steps

  • Create Azure Static Web Apps resource in Azure Portal
  • Copy deployment token from Azure
  • Add AZURE_STATIC_WEB_APPS_API_TOKEN to GitHub Secrets
  • Create .github/workflows/deploy.yml
  • Push to main branch to deploy

Additional Notes

  • Free tier includes 100GB bandwidth/month
  • Automatic SSL certificates
  • Global CDN included
  • Supports custom domains