How to deploy Blazor to Azure with YAML? I´m almost there!

[sturlath]

Ok, I´m trying to deploy the apb.io Blazor to Azure using YAML.

My two-part Azure pipeline builds everything and then publishes the code with the DB is created just fine and the Blazor part published to its web service

But there is something that I'm missing because I don't get any other DLL's dropped to azure but the Blazor ones and I get the following error in the browser.

The error makes total sense if half of the code is missing... and it's probably missing because of dynamic dependency discovery (or something like that)?

So my question is

Do I need to deploy something else ( HttpApi.Host?) separately to another service and configure them to talk to each other? Or some other trickery?

Sorry for my ignorance with this Blazor setup but I haven't tried to deploy one before! But I have been at this for 2 days now and red half the internet but in every article e.g. this one or this one everything just works out of the box and that's probably because there the underlying projects are strongly referenced, correct?

Extra info

I leave the YAML pipeline code here as help for others. I have started a blog post on this that I´ll post here when finished so it would be really great to get some help with this.

The build pipeline

trigger:
- master

pool:
  vmImage: 'windows-latest'

variables:
  BuildConfiguration: release
  BuildPlatform: 'Any CPU'
  LocalPublishWebAppFolder: WebApp
  LocalPublishDbMigratorFolder: DbMigrator

steps:

- powershell: |      
      Write-Host "System.DefinitionId (9)": $(System.DefinitionId)
      Write-Host "System.DefinitionName": $(System.DefinitionName)
      Write-Host "Project GUID": $(System.TeamProjectId)
      Write-Host "BuildId is:  $(Build.BuildId)" 
      Write-Host "$(Build.SourceBranch) value is: $(Build.SourceBranch)"
      Write-Host "$(Build.ArtifactStagingDirectory) value is: $(Build.ArtifactStagingDirectory)"
  displayName: Variable output

- task: NuGetAuthenticate@0
  inputs:
    nuGetServiceConnections: 'MyGet feed'

- task: NuGetToolInstaller@1
 
- task: NuGetCommand@2
  displayName: Nuget restore
  inputs:
    restoreSolution: '$(solution)'
    feedsToUse: 'config'
    nugetConfigPath: 'NuGet.config'
    externalFeedCredentials: 'MyGet feed'  

- task: DotNetCoreCLI@2
  displayName: Build solution
  inputs:
    command: build
    arguments: --configuration $(BuildConfiguration) 
    configuration: $(BuildConfiguration)
  condition: succeeded()

- task: DotNetCoreCLI@2
  displayName: Run tests
  inputs:
    command: test
    projects: '**/*.Tests.csproj'
    publishTestResults: true
    arguments: --configuration $(BuildConfiguration) --collect "Code coverage"
    nobuild: true
  condition: succeeded()

- task: DotNetCoreCLI@2
  displayName: Gather web app binaries for publication
  inputs:
    command: publish
    publishWebProjects: false
    projects: '**/*.Blazor.csproj'
    modifyOutputPath: false
    configuration: $(BuildConfiguration)
    arguments: --configuration $(BuildConfiguration) --no-restore --no-build --output $(Build.ArtifactStagingDirectory)/$(LocalPublishWebAppFolder)
    nobuild: true
  # condition: succeeded()
  condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/master'))

- task: DotNetCoreCLI@2
  displayName: Gather migration app binaries for publication
  inputs:
    command: publish
    publishWebProjects: false
    projects: 'src\MySolution.DbMigrator.csproj'
    configuration: $(BuildConfiguration)
    arguments: --configuration $(BuildConfiguration) --no-restore --no-build --output $(Build.ArtifactStagingDirectory)/$(LocalPublishDbMigratorFolder)
    nobuild: true
  # condition: succeeded()
  condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/master'))

- task: PublishBuildArtifacts@1
  displayName: Upload web app publication files to artifact
  inputs:
    PathtoPublish: $(Build.ArtifactStagingDirectory)/$(LocalPublishWebAppFolder)
    ArtifactName: WebApp
  # condition: succeeded()
  condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/master'))

- task: PublishBuildArtifacts@1
  displayName: Upload migration app publication files to artifact
  inputs:
    PathtoPublish: $(Build.ArtifactStagingDirectory)
    ArtifactName: DbMigrator
  # condition: succeeded()
  condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/master'))

The Release pipeline

trigger:
- main

pool:
  vmImage: 'windows-latest'

variables:
  ConnectedServiceName: 'MyResourceManagerSubscription'
  WebAppName: 'MySolution'
  LocalPublishDbMigratorFolder: DbMigrator
  UnzippedMigrationAppFolderPath: 'UnzippedMigrationApp'
  LocalPublishWebAppFolder: WebApp
  MigratorDllFilename: 'MySolution.DbMigrator.dll'
  ConnectionStrings.DefaultConnection: $(DBConnectionString) //This swaps out the connections string with a DevOps variable

steps:
- task: AzureAppServiceManage@0
  displayName: Stop web app
  inputs:
    azureSubscription: '$(ConnectedServiceName)'
    Action: 'Stop Azure App Service'
    WebAppName: '$(WebAppName)'

- task: DownloadPipelineArtifact@2
  displayName: "Download the DbMigration artifact from the Build pipeline"
  inputs:
    source: specific 
    project: 'project guid' # This is $(System.TeamProjectId) from the Build pipeline
    pipeline: 'Build' # You can also use System.DefinitionId from the Build pipeline
    buildVersionToDownload: latest
    artifact: DbMigrator
    path: $(LocalPublishDbMigratorFolder)

- task: ExtractFiles@1
  displayName: Unzip migrator binaries
  inputs:
    archiveFilePatterns: '$(LocalPublishDbMigratorFolder)/*.zip'
    overwriteExistingFiles: true
    cleanDestinationFolder: true
    destinationFolder: '$(UnzippedMigrationAppFolderPath)'

- task: DownloadPipelineArtifact@2
  displayName: "Download the WebApp artifact from the Build pipeline"
  inputs:
    source: specific 
    project: 'project guid'
    pipeline: 'Build' 
    buildVersionToDownload: latest
    artifact: 'WebApp'
    path: $(LocalPublishWebAppFolder)

- task: FileTransform@1
  displayName: Set migrator connection string
  inputs:
    folderPath: $(UnzippedMigrationAppFolderPath)
    fileType: json
    targetFiles: appsettings.json

- powershell: 'dotnet $(MigratorDllFilename)'
  workingDirectory: $(UnzippedMigrationAppFolderPath)
  displayName: Run the EFCore migrator

- task: AzureRmWebAppDeployment@4
  displayName: Deploy web app
  inputs:
    ConnectionType: AzureRM
    azureSubscription: '$(ConnectedServiceName)'
    appType: 'webApp'
    WebAppName: '$(WebAppName)'
    packageForLinux: '$(LocalPublishWebAppFolder)/*.zip'
    # enableCustomDeployment: true
    # ExcludeFilesFromAppDataFlag: false

- task: AzureAppServiceManage@0
  displayName: Start web app
  inputs:
    azureSubscription: '$(ConnectedServiceName)'
    Action: 'Start Azure App Service'
    WebAppName: '$(WebAppName)'

[ilkayilknur]

Yes, You need to deploy HttpApi.Host separately to another service(app service or other options) and configure the WASM project to communicate with the Host service.

[sturlath]

Thanks, @ilkayilknur I deployed HttpApi.Host right away to a new service and have been trying to tie them together.

But I always get this error net::ERR_CONNECTION_TIMED_OUT. I have tried quite a few versions without much success...

Could you take a look at this for me and give me a pointer if you see what I´m wrong?

HttpApi.Host appsettings.json

{
  "App": {
    "SelfUrl": "https://MySolutionApi.azurewebsites.net:44387",
    "CorsOrigins": "https://*.MySolutionApi.com,https://MySolutionApi.azurewebsites.net:4200,https://MySolutionApi.azurewebsites.net:44307",
    "RedirectAllowedUrls": "https://MySolutionApi.azurewebsites.net:4200,https://MySolutionApi.azurewebsites.net:44307"
  },
  "ConnectionStrings": {
    "Default": "Server=tcp:MySolutionApi.database.windows.net,1433;Initial Catalog=MySolution;Persist Security Info=False;User ID=myuser;Password=mypass;MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;"
  },
  "AuthServer": {
    "Authority": "https://MySolutionApi.azurewebsites.net:44387",
    "RequireHttpsMetadata": "false",
    "SwaggerClientId": "MySolution_Swagger",
    "SwaggerClientSecret": "1q2w3e*"
  },
  "StringEncryption": {
    "DefaultPassPhrase": "RZ2VqjZiZTOTOitW"
  },
  "Settings": {
    "Abp.Mailing.Smtp.Host": "127.0.0.1",
    "Abp.Mailing.Smtp.Port": "25",
    "Abp.Mailing.Smtp.UserName": "",
    "Abp.Mailing.Smtp.Password": "",
    "Abp.Mailing.Smtp.Domain": "",
    "Abp.Mailing.Smtp.EnableSsl": "false",
    "Abp.Mailing.Smtp.UseDefaultCredentials": "true",
    "Abp.Mailing.DefaultFromAddress": "noreply@abp.io",
    "Abp.Mailing.DefaultFromDisplayName": "ABP application"
  }
}

My Blazor appsettings.json

{
  "App": {
    "SelfUrl": "https://MySolution.azurewebsites.net:44307"
  },
  "AuthServer": {
    "Authority": "https://MySolutionApi.azurewebsites.net:44387",
    "ClientId": "MySolution_Blazor",
    "ResponseType": "code"
  },
  "RemoteServices": {
    "Default": {
      "BaseUrl": "https://MySolutionApi.azurewebsites.net:44387"
    }
  },
  "AbpCli": {
    "Bundle": {
      "Mode": "BundleAndMinify", /* Options: None, Bundle, BundleAndMinify */
      "Name": "global",
      "Parameters": {
      }
    }
  }
}

[clinically-au]

Have you checked that your API is available at that URL?

I'm not an Azure expert but am pretty sure it only opens port 80 by default.

[sturlath]

Hi sorry I had to do something else this week so I had to leave my experiment on hold.

But I managed to get things almost up and running today with the config below

I say almost because things don't work that great when I try to log in. I have got some 500 invalid_request errors in the UI but a 404 error in the logs, but I still get logged in. Note that if I'm not logged in I get this error also if I click Login but I can log in by clicking it again... super strange behavior!

@wojtj In the error, the requested URL is with port 80. I have tried to play with that in the config but no version I have tried with it seems to work.

My config

HttpApi.Host appsettings.json

Now I can open up swagger and hit the endpoints here https://MySolutionApi.azurewebsites.net/swagger/index.html

{
  "App": {
    "SelfUrl": "https://MySolutionApi.azurewebsites.net:44387",
    "CorsOrigins": "https://*.MySolution.azurewebsites.net,https://MySolution.azurewebsites.net:4200,https://MySolution.azurewebsites.net:44307",
    "RedirectAllowedUrls": "http://MySolution.azurewebsites.net:4200,https://MySolution.azurewebsites.net:44307"
  },
  "ConnectionStrings": {
    "Default": "Server=tcp:MySolution.database.windows.net,1433;Initial Catalog=MySolution;Persist Security Info=False;User ID=myUser;Password=myPass;MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;"
  },
  "AuthServer": {
    "Authority": "https://MySolutionApi.azurewebsites.net",
    "RequireHttpsMetadata": "false",
    "SwaggerClientId": "EventVideoStreaming_Swagger",
    "SwaggerClientSecret": "1q2w3e*"
  },
  "StringEncryption": {
    "DefaultPassPhrase": "RZ2VqjZiZTOTOitW"
  },
  "Settings": {
    "Abp.Mailing.Smtp.Host": "127.0.0.1",
    "Abp.Mailing.Smtp.Port": "25",
    "Abp.Mailing.Smtp.UserName": "",
    "Abp.Mailing.Smtp.Password": "",
    "Abp.Mailing.Smtp.Domain": "",
    "Abp.Mailing.Smtp.EnableSsl": "false",
    "Abp.Mailing.Smtp.UseDefaultCredentials": "true",
    "Abp.Mailing.DefaultFromAddress": "noreply@abp.io",
    "Abp.Mailing.DefaultFromDisplayName": "ABP application"
  }
}

Blazor appsettings.json

The page loads up on https://MySolution.azurewebsites.net (rather slowly but that might be my cheap ass dev servers)

{
  "App": {
    "SelfUrl": "https://MySolution.azurewebsites.net:44307"
  },
  "AuthServer": {
    "Authority": "https://MySolutionApi.azurewebsites.net",
    "ClientId": "EventVideoStreaming_Blazor",
    "ResponseType": "code"
  },
  "RemoteServices": {
    "Default": {
      "BaseUrl": "https://MySolutionApi.azurewebsites.net"
    }
  },
  "AbpCli": {
    "Bundle": {
      "Mode": "BundleAndMinify", /* Options: None, Bundle, BundleAndMinify */
      "Name": "global",
      "Parameters": {

      }
    }
  }
}

It's a shame there isn't any guide on how to set this up... I´m almost starting to think I´m too early trying this out...

[clinically-au]

Looks like you're almost there, and the errors now are different - CORS errors in the console.

@bartvanhoey has written a guide on deploying to Azure that addresses this in section 10.

[sturlath]

yes so close yet so far away!

I have been at it for few hours and gone through the article by @bartvanhoey and for some reason, I can´t get past this 404 error here above from the logs with UI error [500] Error! invalid_request after I click the login button.

I can see in dbo.AbpSecurityLogs that I "LoginSucceded" and can then "Logout"... I´m at a loss what this error is trying to tell me..

I have made sure all is like in the article and code. I have even hand-copied the appsettings.json code to correct places with Kudu so no reason to think that the build/release is not putting the right stuff in there...

I´ll try again later... ;-(