Azure App Service Flask Deployment Error: "Failed to Respond to HTTP Pings on Port 8000; Site Start Failed. Check Container Logs for Debugging."

We have started working with Flask and with immersive service reader.

Everything is working fine when we run the immersive service in debug mode from Visual Studio code. BUT, when we start deploying the the Flask Web app with Immersive Reader in one of our WebApp in Azure. It is giving us an error. Please note: We are deploying it by a ZIP file mentioned over the link below:

https://learn.microsoft.com/en-us/azure/app-service/quickstart-python?tabs=flask%2Cwindows%2Cazure-cli%2Czip-deploy%2Cdeploy-instructions-azportal%2Cterminal-bash%2Cdeploy-instructions-zip-azcli

We have gone through each and every steps mentioned in the link but still we are getting below result. (look at the attached image).

Then, After checking the logs in WebApp we find the error as given below : (when the service has been published and we try to call our deployed WebApp)

"Container api-aiml-learning-immersivereader-mpn-eastus_0_8947b5bf for site api-aiml-learning-immersivereader-mpn-eastus has exited, failing site start

Container api-aiml-learning-immersivereader-mpn-eastus_0_8947b5bf didn’t respond to HTTP pings on port: 8000, failing site start. See container logs for debugging. "

We is the page that we are expecting when we run the WebApp.

For further details, here is the code that we have used from samples provided as sample.

app.py code

from flask import Flask, render_template, jsonify
import requests
import os

app = Flask(__name__)

AZURE_CLIENT_ID = os.environ['AZURE_CLIENT_ID']
AZURE_CLIENT_SECRET = os.environ['AZURE_CLIENT_SECRET']
AZURE_TENANT_ID = os.environ['AZURE_TENANT_ID']
AZURE_RESOURCE = 'https://cognitiveservices.azure.com/.default'

@app.route('/')

def index():
    return render_template('index.html')


@app.route('/get_token', methods=['GET'])

def get_token():

    url = f'https://login.microsoftonline.com/{AZURE_TENANT_ID}/oauth2/v2.0/token'
    
    headers = {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
    data = {
        'client_id': AZURE_CLIENT_ID,
        'client_secret': AZURE_CLIENT_SECRET,
        'scope': AZURE_RESOURCE,
        'grant_type': 'client_credentials'
    }

    response = requests.post(url, headers=headers, data=data)
    if response.status_code == 200:
        token = response.json().get('access_token')
        return jsonify({'access_token': token})
    else:
        return jsonify({'error': 'Unable to fetch token'}), 500

if __name__ == '__main__':
    app.run(debug=True)

helpers.js

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('immersiveReaderButton').addEventListener('click', launchImmersiveReader);
});

function launchImmersiveReader() {
    fetch('/get_token')
        .then(response => response.json())
        .then(data => {
            console.log("data" ,data);
            if (data.access_token) {
                const token = data.access_token;
                console.log(token);
                const subdomain = '';  // Replace with your subdomain if necessary

                const content = {
                    title: "Immersive Reader Demo",
                    chunks: [
                        {
                            content: document.getElementById('contentToRead').innerHTML,
                            mimeType: 'text/html'
                        }
                    ]
                };

                const options = {
                    readAloudOptions: {
                        voice: 'en-US-JennyNeural',
                        speed: 1.0
                    },
                    uiLang: 'en'
                };

                ImmersiveReader.launchAsync(token, subdomain, content, options)
                    .then(() => {
                        console.log('Immersive Reader launched successfully');
                    })
                    .catch(error => {
                        console.error('Error launching Immersive Reader:', error);
                    });
            } else {
                console.error('Error fetching token:', data.error);
            }
        })
        
        .catch(error => {
            console.error('Error fetching token:', error);
        });
        console.log(ImmersiveReader.launchAsync);
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Immersive Reader</title>
    <script type='text/javascript' src='https://ircdname.azureedge.net/immersivereadersdk/immersive-reader-sdk.1.4.0.js'></script>
</head>
<body>
    <h1>Immersive Reader Demo</h1>
    <!-- The button with id 'immersiveReaderButton' -->
    <button id="immersiveReaderButton">Launch Immersive Reader</button>
    <!-- The paragraph with id 'contentToRead' -->
    <p id="contentToRead">This is some text to be read by the Immersive Reader.</p>
    <script type='text/javascript' src="{{ url_for('static', filename='helpers.js') }}"></script>
</body>
</html>