Azure Web Apps Support Center provides developers with various features to troubleshoot their applications hosted on App Service.
Перейти к файлу
XiaoxuHU dfcf59a296
Update readme and add github action (#2228)
2023-09-11 14:41:24 -07:00
.github
AngularApp
ApplensBackend
AscProxyApp
Backend
UITest
.gitignore
LICENSE
README.md
SECURITY.md
Web.config
azure-pipelines.yml

README.md

Warning: This Repo is no longer accept new Pull Requests, please use AAPT-Antares-AppServiceDiagnostics-Portal

Azure App Services Diagnostics Portal And Applens

This is the repository for Azure App Service diagnostics experience.

Build Status

Running the project locally:

  • Install Node 18.15.*
    • Only version 18.15.* will work for this project as there are dependency changes in latter version of Node which our project is incompatible with.
  • Run npm install
  • Build the diagnostic-data lib, Applens and Diagnostics Portal: npm run build
  • Run the project locally:

Project Structure

root
│
└───AngularApp
│   │   This is the home of the angular code for App Service Diagnostics Portal and Applens
|   |
|   |   angular.json - This is the angular-cli configruation file
│   │
│   └───projects
|       |   This is the list of projects registered in angular.json
|       |
│       └───app-service-diagnostics
|       |   |    This is the code for the external App Service Diagnostics Portal
|       |
|       └───applens
|       |   |    This is the code for Applens
|       |
|       └───diagnostic-data
|           |    This is a library containing the common component and services
|           |    that are used to generate detector views in ASD/Applens.
|           |    Any component or feature that you want to use both internally
|           |    or externally should be put here
│
└───Backend
│   │   ASP.Net Core Backend for App Service Diagnostics Portal
|
└───ApplensBackend
│   │   ASP.Net Core Backend for Applens

Getting Started

  • Clone repo git clone https://github.com/Azure/Azure-AppServices-Diagnostics-Portal.git
  • Choose one of the two options below:
    • Setup local machine: Install required dependencies locally by navigating to the angular root folder AngularApp and runing npm install (This will install all the required packages.) OR
    • Docker container: Build and run a docker container that has all necessary dependencies.
      • Install and run the docker desktop client.
      • Run AngularApp/buildimage.sh (or buildimage.bat on Windows) once to build an image locally.
      • Create a container from the image created above by running AngularApp/startcontainer.sh (or startcontainer.bat on Windows) to build a container and open a terminal session on it. Alternately you can use the docker desktop UI to stop/start and open a terminal to the container.
      • From within the container, cd to the AngularApp folder and restore packages via npm install to install npm packages.
      • Continue to the next section. Note: if you are only developing the diagnostic portal and not the backend, you can skip steps 2, 3 and 4. In step 6, if working on Windows, run npm run ssl-local-poll as angular running in the container is unable to monitor the filesystem for changes (auto-recompile on file change)

App Service Diagnostics Portal

Set Up a Local Development Environment

  1. Create a Local Environment Settings file
    • Copy AngularApp\projects\app-service-diagnostics\src\environments\environment.ts to create AngularApp\projects\app-service-diagnostics\src\environments\environment.local.ts
    • Set key "useApplensBackend" to true
  2. Get Resource Auth Token from ARM Client:
    • Install ArmClient: choco install armclient
      • Ensure source chocolatey is enabled: choco source enable -n=chocolatey
    • Log in to ArmClient: ARMClient.exe login
    • Run ARMClient.exe token {SubscriptionID} with your Subscription ID, which will copy the Auth Token to the clipboard
  3. Add Auth Token and ResourceID to Local Environment Settings:
    • Paste the ArmClient token from the above step into authServiceToken in environment.local.ts
    • Copy the ID of a Resource you want to test, and paste it into authServiceResourceId in environment.local.ts
  4. Skip Authorization in ApplensBackend
    • Open appsettings.Development.json
    • Set "ServerMode": "internal"
  5. Create a self-signed certificate for Applens
    • Navigate to AngularApp\ssl
    • Follow the instructions in AngularApp\ssl\README.md to create a self-signed certficate and install the certificate for your local machine in Trusted Root
  6. Run the SSL server
    • Run npm run ssl-local
    • Navigate to https://localhost:3000 to confirm the server is up

Testing Local Changes in the Azure Portal

  • Navigate to the Auzure portal with website extension specified as local: Local Portal Test URL
  • This will load the "Diagnose and solve problems" iframe from https://localhost:3000. (Must be running in ssl mode).
  • Any changes made to the locally hosted project will be automatically refreshed in the Portal

Testing Local Changes in the Portal

  • In order to test your local changes in the portal, you can use the following links:
    • Local: This will load the iframe from https://localhost:3000. Must be running in ssl mode (npm run ssl).
    • Staging: This will load the iframe from https://supportcenter-bay-staging.azurewebsites.net

Back End

  • Right now the back end is optional as it is not required for functionality of the angular project.
  • You will need appropriate secrets to be added to appsettings.Development.json.
  • Open the Backend project in Visual Studio 2017 and run it in IIS Express mode.

Production Build

  • The production build commands for the angular projects are as follows:
    • npm run build-applens - Build Applens. Build output is placed in ApplensBackend/wwwroot.
    • npm run build-asd - Build App Service Diagnostic Portal. Build output is placed in Backend/wwwroot.
    • npm run build - Build both App Service Diagnostic Portal and Applens.
  • If you have the appropriate Publishing Profiles, you can deploy these changes to the staging slots.
  • TODO: Azure Dev Ops Integration