如何使用GitHub代码自定义API Management开发者门户？修改APIM门户后变更未生效的解决办法

Hey there! Let's tackle your two questions about customizing the Azure API Management (APIM) Developer Portal using the GitHub repo and fixing those changes that aren't showing up.

Here's a step-by-step guide to get you started with customizations using the official repository:

• Clone the repository: First, pull down the source code to your local machine with:

  git clone https://github.com/Azure/api-management-developer-portal.git
  

• Match your APIM version: Make sure to check out the tag that corresponds to your APIM instance's version (this avoids compatibility issues). You can find your APIM version in the Azure portal, then run:

  git checkout tags/<your-matching-release-tag>
  

• Set up local environment: Ensure you have a supported LTS version of Node.js installed. Then install dependencies:

  npm install
  

• Preview changes locally: Start the local development server to test your modifications in real-time:

  npm start
  

• Make your customizations: Edit the source files (most of the UI and logic lives in the src folder) to tweak the portal's look, add features, or modify behavior.
• Build the production package: Once you're happy with your changes, compile the code into a deployable bundle:

  npm run build
  

• Deploy to your APIM instance: Upload the generated dist folder to your APIM service. You can use the Azure CLI for this:

  az apim devportal upload --resource-group <your-resource-group-name> --service-name <your-apim-service-name> --source dist
  

If your modifications aren't showing up after making changes, here are the most common fixes to check:

• Did you build and deploy? It's easy to forget this critical step—modifying local source code won't automatically update your live portal. You need to run npm run build and then upload the dist folder to APIM as outlined above.
• Check version compatibility: If the GitHub repo version you're using doesn't match your APIM instance's version, customizations might fail silently. Double-check that you checked out the correct tag for your APIM version.
• Clear browser cache: The APIM Developer Portal caches static assets aggressively. Force a hard refresh of your browser (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on Mac) to bypass cached files.
• Verify deployment status: In the Azure portal, navigate to your APIM service > Developer Portal > Overview, and check if the deployment completed successfully. You can also use the CLI to confirm:

  az apim devportal show --resource-group <your-resource-group-name> --service-name <your-apim-service-name>
  

• Check for errors in the browser: Open your browser's developer tools (F12), go to the Console tab, and look for any loading errors or JavaScript exceptions. This can help pinpoint if a modified file is missing or has syntax issues.
• If using a release zip instead of source code: If you downloaded a release package directly and modified it, ensure you re-upload the entire modified package to APIM and wait a few minutes for the deployment to finish—partial uploads can cause issues.

Hope these steps help you get your customizations working as expected!

内容的提问来源于stack exchange，提问作者Mahima Appana