通过DevOps部署Angular代码至Linux Web App后无UI显示的问题及解决方案咨询

Hey there, let's tackle this issue step by step— I’ve run into this exact scenario many times when deploying Angular apps to Linux Web Apps, even when the pipeline says it succeeded. Here’s what to check:

1. Validate Your Angular Build Output #

• Always build for production: Never deploy a development build (from ng build without flags) to production. Run ng build --configuration production (or the older ng build --prod) to generate optimized, production-ready files. Double-check that your deployment pipeline is uploading the contents of the dist/your-app-name folder (not the folder itself) to the Web App's root directory.
• Fix the base href: If your app is deployed to a subpath (e.g., your-app.azurewebsites.net/my-app), you need to set the base href during build: ng build --configuration production --base-href "/my-app/". If you forget this, the browser will look for static assets (JS/CSS) in the root path, leading to 404 errors and a blank UI.

2. Check Web App Deployment & Startup Settings #

• Confirm deployment target folder: Linux Web Apps serve content from /home/site/wwwroot by default. Make sure your Angular build files are directly in this folder— not nested inside a subfolder like /home/site/wwwroot/dist. If they’re nested, the server won’t find your index.html.
• Set the right startup command: Angular is a static app, so you need a web server (like Nginx or serve) to host it.
  • For a quick test, use npx serve -s /home/site/wwwroot -l 8080 as your startup command (this uses the serve package to serve static files and handle routing).
  • For production, use Nginx. Upload a custom nginx.conf to /home/site/wwwroot (see the config snippet below) and set the startup command to nginx -c /home/site/wwwroot/nginx.conf -g "daemon off;".

3. Debug with Browser DevTools #

Open your browser’s DevTools (F12) and check these tabs:

• Console: Look for 404 errors (missing JS/CSS files, pointing to wrong paths) or runtime errors (like failed API calls). 404s usually point to base href or deployment path issues.
• Network: Check if all assets are loading with 200 status codes. If any fail, hover over the request to see the full URL— this will tell you if the path is incorrect.
• Application: Clear your browser cache and try again— sometimes old cached assets cause unexpected issues.

4. Inspect Web App Logs #

Head to your Web App in the Azure Portal and:

• Use Log Stream to watch real-time logs from the server. Look for errors related to file permissions, server startup, or missing files.
• Go to Advanced Tools > Kudu > Debug Console > Bash to access the server’s file system. Check:
  • /home/LogFiles for server logs (especially Nginx logs if you’re using it).
  • File permissions: Run chmod -R 755 /home/site/wwwroot to ensure all files are readable (avoid 777—it’s insecure).

5. Fix Angular Routing with Nginx #

If you’re using Nginx, you need to configure it to handle Angular’s client-side routing. Otherwise, direct visits to routes like /about will return 404. Here’s a basic nginx.conf to use:

events {
    worker_connections 1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen        8080;
        server_name   localhost;
        root          /home/site/wwwroot;
        index         index.html;
        # Redirect all routes to index.html for Angular routing
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

Upload this file to /home/site/wwwroot and update your startup command to point to it.

6. Verify Port Configuration #

Linux Web Apps listen on port 8080 by default. Ensure your web server is using this port:

• For serve, add -l 8080 to the command: npx serve -s /home/site/wwwroot -l 8080.
• For Nginx, make sure the listen directive in nginx.conf is set to 8080.

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