InternalServerError when trying to deploy a simple Angular SWA

Daniel Saner 0 Reputation points
2023-03-16T14:08:12.2733333+00:00

Hello,

Since yesterday, I've been trying to deploy an extremely simple Static Web App based on Angular and Azure Functions. The project is hosted in an Azure DevOps repository and literally consists of nothing more but the automatically generated Angular skeleton app from ng new and a dummy Azure Function generated through the Azure CLI.

I have used swa init to generate an SWA configuration in the project's root, and when running swa start everything works on my local machine. I can open my web browser to port 4280 and see the Angular app's start page, and I can send requests to the locally hosted Azure Function and get the proper response.

However, every which way I've tried to deploy this app to Azure fails in an InternalServerError with seemingly no further information to go on. All it says is to "try again later", but I've been trying for almost 24 hours now.

These are the steps I follow:

  1. I create a new SWA on my existing subscription and resource group, and name it test.
  2. I choose the Free hosting plan and West Europe region, although I've tried others without success.
  3. For source, I choose Azure DevOps and from the listboxes choose my organisation, project, repository and branch. They all show up fine.
  4. I choose the Angular build preset and set /source/test-app for the app location (which is the subdirectory for the Angular app, i.e. the folder containing angular.json), /functions for the API location (which is the subdirectory containing the Azure Functions project, i.e. the folder containing host.json), and dist/test-app for the output location (which is where the Angular app build ends up). I use the same paths for my local SWA CLI config, and there it works fine.
  5. I click Review & create and then Create. Azure creates a PAT in my Azure DevOps account and creates a commit with the SWA YAML.
  6. After a few seconds, I get the red error bar saying "Deployment failed. Click here for details." The details shown are:
    {
    "code":"DeploymentFailed",
    "message":"At least one resource deployment operation failed. Please list deployment operations for details. Please see https://aka.ms/arm-deployment-operations for usage details.",
    "details":[
    {
    "code":"InternalServerError",
    "message":"There was an unexpected InternalServerError. Please try again later. x-ms-correlation-request-id: 912731e7-7029-484a-b0e5-81017d6e74c7"
    }
    ]
    }
  7. The operation details show:
    Operation ID: /subscriptions/<redacted>/resourceGroups/<redacted>/providers/Microsoft.Resources/deployments/Microsoft.Web-StaticApp-Portal-2ac791b3-9f5a/operations/<redacted>
    Provisioning operation: Create
    Provisioning state: Failed
    Duration: 4 seconds
    Status: BadRequest
    Type: Microsoft.Web/staticSites

This is all the information I can find. The generated YAML committed to the repo, if that helps any, looks like this:

name: Azure Static Web Apps CI/CD

pr:
  branches:
    include:
      - main
trigger:
  branches:
    include:
      - main

jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Job
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
    vmImage: ubuntu-latest
  variables:
  - group: Azure-Static-Web-Apps-<redacted>-variable-group
  steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_<redacted>)
      app_location: "/app/test-app" # App source code path
      api_location: "/functions" # Api source code path - optional
      output_location: "dist/test-app" # Built app content directory - optional

How can I find out what the actual problem is here? Because after 24 hours I doubt that "try again later" is really the way to go here.

Thanks for any help!

Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
757 questions
{count} votes