0

I have the followings TWO independent projects deployed at Azure from GitHub:

  • an Angular UI project as Static Web App (SWA)
  • an Node API project as Azure Function (AF)

AF can talk to local-run UI and Postman no problem.

When UI is deployed to Azure and talk to the same AF, it gets 405. To troubleshoot, I did

  1. Query AF logs: FunctionAppLogs | where Level contains "error" returns zero record. FunctionAppLogs | order by TimeGenerated desc | limit 100 returns all Information for Level.
  2. Thinking to get SWA's IP to AF's firewall rule, but it doesn't have networking tab for an IP.
  3. When trying to enable Application Insights for SWA log, it says SWA must have at least one function

enter image description here

I followed this to deploy my Angular SWA. Only difference is his API AF are integrated into the project, mine is a independent project outside of the Angular.

Update, this is how I setup the SWA:

  1. Add a Static Web App
  2. Choose GitHub for publish source, and log in
  3. Choose repository and branch
  4. Complete a new Pull and Merge, project is auto-build and deployed
Jeb50
  • 6,272
  • 6
  • 49
  • 87

3 Answers3

0

According to this document, you can enable Azure App Insights for Static Web Apps that use Azure Functions.

  1. Firstly, to enable Application Insights we need an Application Insights resource.
  2. Copy the instrumentation key for the SWA that you want your JavaScript telemetry to be sent. The same need to be added to the instrumentationKey or connectionString setting of the Application Insights JavaScript SDK.
  3. You can add the Application Insights JavaScript SDK to your resource following one of the following two options:

Here is a sample project that you can refer to and for remote debugging you can check this document

REFERENCES:

SwethaKandikonda
  • 7,513
  • 2
  • 4
  • 18
  • I was actually following the same author's another article [How to run and deploy Angular with NodeJS backend on Azure App Services](https://medium.com/bb-tutorials-and-thoughts/building-an-angular-app-with-azure-static-web-apps-service-8fe84ebe4709), same sample project in your answer above. Only diff between his project and mine is if API Azure Function (AF)is integrated into the project. Mine are **two independent** projects: frontend Angular and backend API Node. With the backend API Node running as AF at cloud, it talks to local-run frontend and Postman perfect, but 405 to cloud frontend – Jeb50 Feb 17 '22 at 20:00
0

Study shows Static Web App (SWA) have integrated API when needs one, and this MS Doc has a Note SWA must have an API to use App Insights.

Another reason SWA must have an Azure Function is because it's backend running at AZ.

Jeb50
  • 6,272
  • 6
  • 49
  • 87
0

I was able to send telemetry from a Static Web App to an App Insights instance after having linked them via the APIs blade setting on the Static Web App, even though the error you mentioned in the question is still there.

The command I used for that effect is as follows:

az staticwebapp backends link --backend-resource-id /subscriptions/xxxxxxxx-yyyy-zzzz-hhhh-kkkkkkkkkk/resourceGroups/my-resource-group/providers/Microsoft.Web/sites/my-webapp-name \
                              --name my-static-webapp-name \
                              --resource-group my-webapp-resource-group \
                              --backend-region my-webapp-region
ccoutinho
  • 3,308
  • 5
  • 39
  • 47