Creare un'applicazione Web Python Flask con Azure Cosmos DBBuild a Python Flask web application using Azure Cosmos DB

Questa esercitazione illustra come usare Azure Cosmos DB per archiviare e accedere ai dati da un'applicazione Web Python Flask ospitata in Servizio app di Azure.This tutorial shows you how to use Azure Cosmos DB to store and access data from a Python Flask web application hosted on Azure App Service. Questa esercitazione presuppone una certa esperienza nell'uso di Python e dei siti Web di Azure.This tutorial presumes that you have some prior experience using Python and Azure websites.

In questa esercitazione del database vengono trattati i seguenti argomenti:This database tutorial covers:

  1. Creazione e provisioning di un account Azure Cosmos DB.Creating and provisioning an Azure Cosmos DB account.
  2. Creazione di un'applicazione Python Flask.Creating a Python Flask application.
  3. Connessione ad Azure Cosmos DB e relativo utilizzo dall'applicazione Web.Connecting to and using Azure Cosmos DB from your web application.
  4. Distribuzione dell'applicazione Web in Servizio app di Azure.Deploying the web application to Azure App Service.

Seguendo questa esercitazione, si creerà una semplice applicazione di voto che consente di votare per un sondaggio.By following this tutorial, you will build a simple voting application that allows you to vote for a poll.

Screenshot dell'applicazione di voto creata in questa esercitazione del database

Prerequisiti per l'esercitazione del databaseDatabase tutorial prerequisites

Prima di seguire le istruzioni di questo articolo, verificare che siano disponibili i seguenti elementi:Before following the instructions in this article, you should ensure that you have the following installed:

Importante

Se si installa Python 2.7 per la prima volta, nella schermata Customize Python 2.7.13 (Personalizza Python 2.7.13) assicurarsi di selezionare Add python.exe to Path (Aggiungi python.exe a percorso).If you are installing Python 2.7 for the first time, ensure that in the Customize Python 2.7.13 screen, you select Add python.exe to Path.

Schermata Customize Python 2.7.11, in cui è necessario selezionare Add python.exe to Path

Passaggio 1: Creare un account del database di Azure Cosmos DBStep 1: Create an Azure Cosmos DB database account

Creare prima di tutto un account Azure Cosmos DB.Let's start by creating an Azure Cosmos DB account. Se si ha già un account o si usa l'emulatore Azure Cosmos DB per questa esercitazione, è possibile andare al Passaggio 2: Creare una nuova applicazione Web Python Flask.If you already have an account or if you are using the Azure Cosmos DB Emulator for this tutorial, you can skip to Step 2: Create a new Python Flask web application.

  1. In una nuova finestra del browser accedere al portale di Azure.In a new browser window, sign in to the Azure portal.
  2. Fare clic su Nuovo > Database > Azure Cosmos DB.Click New > Databases > Azure Cosmos DB.

    Riquadro Database nel portale di Azure

  3. Nella pagina Nuovo account immettere le impostazioni per il nuovo account Azure Cosmos DB.In the New account page, enter the settings for the new Azure Cosmos DB account.

    ImpostazioneSetting Valore consigliatoSuggested value DescrizioneDescription
    IDID Immettere un nome univocoEnter a unique name Immettere un nome univoco per identificare l'account Azure Cosmos DB.Enter a unique name to identify this Azure Cosmos DB account. Poiché alI'ID fornito viene aggiunto documents.azure.com per creare l'URI, usare un ID univoco ma facilmente identificabile.Because documents.azure.com is appended to the ID that you provide to create your URI, use a unique but identifiable ID.

    L'ID può contenere solo lettere minuscole, numeri e il segno meno (-) e deve avere una lunghezza compresa tra 3 e 50 caratteri.The ID can contain only lowercase letters, numbers, and the hyphen (-) character, and it must contain 3 to 50 characters.
    APIAPI SQLSQL L'API determina il tipo di account da creare.The API determines the type of account to create. Azure Cosmos DB offre cinque API per soddisfare le esigenze dell'applicazione, ovvero SQL (database di documenti) Gremlin (grafo), MongoDB, SQL (database di documenti), Tabella di Azure e Cassandra, per ognuna delle quali è attualmente necessario un account separato.Azure Cosmos DB provides five APIs to suits the needs of your application: SQL (document database), Gremlin (graph database), MongoDB (document database), Azure Table, and Cassandra, each which currently require a separate account.

    Selezionare SQL perché in questo avvio rapido si sta creando un database di documenti su cui è possibile eseguire query tramite la sintassi SQL e a cui è possibile accedere tramite l'API DocumentDB.Select SQL because in this quickstart you are creating a document database that is queryable using SQL syntax and accessible with the DocumentDB API.

    Altre informazioni sull'API di DocumentDBLearn more about the DocumentDB API
    SottoscrizioneSubscription Sottoscrizione in usoYour subscription Selezionare la sottoscrizione di Azure da usare per l'account Azure Cosmos DB.Select Azure subscription that you want to use for this Azure Cosmos DB account.
    Gruppo di risorseResource Group Creare un nuovo gruppo di risorseCreate new

    Immettere quindi lo stesso nome univoco specificato sopra in IDThen enter the same unique name as provided above in ID
    Selezionare Crea nuovo, quindi immettere il nome di un nuovo gruppo di risorse per l'account.Select Create New, then enter a new resource-group name for your account. Per semplicità si può usare lo stesso nome usato come ID.For simplicity, you can use the same name as your ID.
    PercorsoLocation Selezionare l'area più vicina agli utentiSelect the region closest to your users Selezionare la posizione geografica in cui ospitare l'account Azure Cosmos DB.Select geographic location in which to host your Azure Cosmos DB account. Usare la località più vicina agli utenti per offrire loro la massima velocità di accesso ai dati.Use the location that's closest to your users to give them the fastest access to the data.
    Abilita ridondanza geograficaEnable geo-redundancy Lasciare vuotoLeave blank Consente di creare una versione replicata del database in una seconda area abbinata.This creates a replicated version of your database in a second (paired) region. Lasciare vuoto.Leave this blank.
    Aggiungi al dashboardPin to dashboard SelezionareSelect Selezionare questa casella per aggiungere il nuovo account di database al dashboard del portale e accedervi più facilmente.Select this box so that your new database account is added to your portal dashboard for easy access.

    Fare quindi clic su Crea.Then click Create.

    Pannello Nuovo account per Azure Cosmos DB

  4. La creazione dell'account richiede alcuni minuti,The account creation takes a few minutes. Durante la creazione dell'account il portale visualizza il riquadro Deploying Azure Cosmos DB (Distribuzione di Azure Cosmos DB) a destra, quindi potrebbe essere necessario scorrere a destra del dashboard per visualizzare il riquadro.During account creation the portal displays the Deploying Azure Cosmos DB tile on the right side, you may need to scroll right on your dashboard to see the tile. È presente anche un indicatore di stato nella parte superiore della schermata.There is also a progress bar displayed near the top of the screen. È possibile esaminare lo stato di avanzamento nelle due aree.You can watch either area for progress.

    Riquadro Notifiche del portale di Azure

    Al termine della creazione dell'account verrà visualizzata la pagina L'account Azure Cosmos DB è stato creato.Once the account is created, the Congratulations! Your Azure Cosmos DB account was created page is displayed.


Viene ora illustrata in dettaglio la procedura per creare un'applicazione Web Python Flask completamente nuova.Now let's walk through how to create a new Python Flask web application from the ground up.

Passaggio 2: Creare una nuova applicazione Web Python FlaskStep 2: Create a new Python Flask web application

  1. Scegliere Nuovo dal menu File di Visual Studio e quindi fare clic su Progetto.In Visual Studio, on the File menu, point to New, and then click Project.

    Verrà visualizzata la finestra di dialogo Nuovo progetto .The New Project dialog box appears.

  2. Nel riquadro sinistro espandere Modelli e quindi Python, quindi fare clic su Web.In the left pane, expand Templates and then Python, and then click Web.
  3. Selezionare Flask Web Project (Progetto Web Flask) nel riquadro centrale, quindi digitare tutorial (esercitazione) nella casella Nome e fare clic su OK.Select Flask Web Project in the center pane, then in the Name box type tutorial, and then click OK. Tenere presente che i nomi di pacchetto Python devono essere tutti in lettere minuscole, come descritto nella guida di stile per il codice Python.Remember that Python package names should be all lowercase, as described in the Style Guide for Python Code.

    Se è la prima volta che si usa Python Flask, si tratta di un framework di sviluppo di applicazioni Web che consente di creare applicazioni Web in Python più velocemente.For those new to Python Flask, it is a web application development framework that helps you build web applications in Python faster.

    Schermata della finestra Nuovo progetto in Visual Studio con Python selezionato a sinistra, progetto web Flask selezionato nella parte centrale ed esercitazioni sul nome nella casella nome

  4. Nella finestra Python Tools for Visual Studio selezionare Install into a virtual environment (Installa in un ambiente virtuale).In the Python Tools for Visual Studio window, click Install into a virtual environment.

    Schermata dell'esercitazione del database - Python Tools per la finestra di Visual Studio

  5. Nella finestra Aggiungi ambiente virtuale selezionare Python 2.7 o Python 3.5 nella casella di selezione di un interprete, accettare gli altri valori predefiniti e quindi fare clic su Crea.In the Add Virtual Environment window, select Python 2.7 or Python 3.5 in the Select an interpreter box, accept the other defaults, and then click Create. Questo permette di configurare l'ambiente virtuale Python per il progetto.This sets up the required Python virtual environment for your project.

    Schermata dell'esercitazione del database - Python Tools per la finestra di Visual Studio

    Se l'installazione dell'ambiente riesce, nella finestra di output verrà visualizzato il messaggio Successfully installed Flask-0.10.1 Jinja2-2.8 MarkupSafe-0.23 Werkzeug-0.11.5 itsdangerous-0.24 'requirements.txt' was installed successfully. .The output window displays Successfully installed Flask-0.10.1 Jinja2-2.8 MarkupSafe-0.23 Werkzeug-0.11.5 itsdangerous-0.24 'requirements.txt' was installed successfully. when the environment is successfully installed.

Passaggio 3: Modificare l'applicazione Web Python FlaskStep 3: Modify the Python Flask web application

Aggiungere i pacchetti Python Flask al progettoAdd the Python Flask packages to your project

Dopo la configurazione del progetto sarà necessario aggiungere i pacchetti Flask necessari per il progetto, compreso pydocumentdb, il pacchetto python per DocumentDB.After your project is set up, you'll need to add the required Flask packages to your project, including pydocumentdb, the Python package for DocumentDB.

  1. In Esplora soluzioni aprire il file denominato requirements.txt e sostituire il contenuto esistente con quello riportato di seguito:In Solution Explorer, open the file named requirements.txt and replace the contents with the following:

     flask==0.9
     flask-mail==0.7.6
     sqlalchemy==0.7.9
     flask-sqlalchemy==0.16
     sqlalchemy-migrate==0.7.2
     flask-whooshalchemy==0.55a
     flask-wtf==0.8.4
     pytz==2013b
     flask-babel==0.8
     flup
     pydocumentdb>=1.0.0
    
  2. Salvare il file requirements.txt .Save the requirements.txt file.
  3. In Esplora soluzioni fare clic con il pulsante destro del mouse su env e scegliere Install from requirements.txt.In Solution Explorer, right-click env and click Install from requirements.txt.

    Schermata che mostra env (Python 2.7) selezionata con l'installazione da requirements.txt evidenziato nell'elenco

    Al termine dell'installazione, la finestra di output visualizza quanto segue:After successful installation, the output window displays the following:

     Successfully installed Babel-2.3.2 Tempita-0.5.2 WTForms-2.1 Whoosh-2.7.4 blinker-1.4 decorator-4.0.9 flask-0.9 flask-babel-0.8 flask-mail-0.7.6 flask-sqlalchemy-0.16 flask-whooshalchemy-0.55a0 flask-wtf-0.8.4 flup-1.0.2 pydocumentdb-1.6.1 pytz-2013b0 speaklater-1.3 sqlalchemy-0.7.9 sqlalchemy-migrate-0.7.2
    

    Nota

    In rari casi è possibile che venga visualizzato un errore nella finestra di output.In rare cases, you might see a failure in the output window. Verificare in tal caso se l'errore è correlato all'operazione di pulizia.If this happens, check if the error is related to clean up. La pulizia ha talvolta esito negativo, ma l'installazione viene comunque completata (scorrere la finestra di output verso l'alto per verificarne l'esito).Sometimes the clean up fails, but the installation will still be successful (scroll up in the output window to verify this). È possibile controllare l'installazione verificando l'ambiente virtuale.You can check your installation by Verifying the virtual environment. Se l'installazione non è riuscita, ma la verifica ha esito positivo, è possibile continuare.If the installation failed but the verification is successful, it's OK to continue.

Verifica dell'ambiente virtualeVerify the virtual environment

È importante verificare che tutto sia installato correttamente.Let's make sure that everything is installed correctly.

  1. Premere CTRL+MAIUSC+B per compilare la soluzione.Build the solution by pressing Ctrl+Shift+B.
  2. Al termine della compilazione, avviare il sito Web premendo F5.Once the build succeeds, start the website by pressing F5. Verranno avviati il server di sviluppo Flask e il Web browser.This launches the Flask development server and starts your web browser. Dovrebbe essere visualizzata la pagina seguente:You should see the following page.

    Il progetto di sviluppo web Python Flask vuoto visualizzato in un browser

  3. Per arrestare il debug del sito Web, premere MAIUSC+F5.Stop debugging the website by pressing Shift+F5 in Visual Studio.

Creare definizioni di database, raccolta e documentoCreate database, collection, and document definitions

Ora viene creata l'applicazione di voto aggiungendo nuovi file e aggiornandone altri.Now let's create your voting application by adding new files and updating others.

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto tutorial, (esercitazione) quindi scegliere Aggiungi e infine Nuovo elemento.In Solution Explorer, right-click the tutorial project, click Add, and then click New Item. Selezionare Empty Python File (File di Python vuoto) e denominare il file forms.py.Select Empty Python File and name the file forms.py.
  2. Aggiungere il codice seguente al file forms.py e quindi salvare il file.Add the following code to the forms.py file, and then save the file.
from flask.ext.wtf import Form
from wtforms import RadioField

class VoteForm(Form):
    deploy_preference  = RadioField('Deployment Preference', choices=[
        ('Web Site', 'Web Site'),
        ('Cloud Service', 'Cloud Service'),
        ('Virtual Machine', 'Virtual Machine')], default='Web Site')

Aggiungere le importazioni necessarie a views.pyAdd the required imports to views.py

  1. In Esplora soluzioni espandere la cartella tutorial (esercitazione) e aprire il file views.py.In Solution Explorer, expand the tutorial folder, and open the views.py file.
  2. Aggiungere le istruzioni import seguenti all'inizio del file views.py e quindi salvare il file.Add the following import statements to the top of the views.py file, then save the file. Queste istruzioni importano i pacchetti Flask e Python SDK di Azure Cosmos DB.These import Azure Cosmos DB's PythonSDK and the Flask packages.

    from forms import VoteForm
    import config
    import pydocumentdb.document_client as document_client
    

Creare il database, la raccolta e il documentoCreate database, collection, and document

  • Ancora in views.pyaggiungere il codice seguente alla fine del file.Still in views.py, add the following code to the end of the file. Verrà creato il database usato dal form.This takes care of creating the database used by the form. Non eliminare nessuna porzione del codice esistente dal file views.py.Do not delete any of the existing code in views.py. Aggiungere semplicemente la parte nuova alla fine del file.Simply append this to the end.
@app.route('/create')
def create():
    """Renders the contact page."""
    client = document_client.DocumentClient(config.DOCUMENTDB_HOST, {'masterKey': config.DOCUMENTDB_KEY})

    # Attempt to delete the database.  This allows this to be used to recreate as well as create
    try:
        db = next((data for data in client.ReadDatabases() if data['id'] == config.DOCUMENTDB_DATABASE))
        client.DeleteDatabase(db['_self'])
    except:
        pass

    # Create database
    db = client.CreateDatabase({ 'id': config.DOCUMENTDB_DATABASE })

    # Create collection
    collection = client.CreateCollection(db['_self'],{ 'id': config.DOCUMENTDB_COLLECTION })

    # Create document
    document = client.CreateDocument(collection['_self'],
        { 'id': config.DOCUMENTDB_DOCUMENT,
          'Web Site': 0,
          'Cloud Service': 0,
          'Virtual Machine': 0,
          'name': config.DOCUMENTDB_DOCUMENT 
        })

    return render_template(
       'create.html',
        title='Create Page',
        year=datetime.now().year,
        message='You just created a new database, collection, and document.  Your old votes have been deleted')

Leggere il database, la raccolta e il documento e inviare il formRead database, collection, document, and submit form

  • Ancora in views.pyaggiungere il codice seguente alla fine del file.Still in views.py, add the following code to the end of the file. Verrà configurato il form e verranno letti il database, la raccolta e il documento.This takes care of setting up the form, reading the database, collection, and document. Non eliminare nessuna porzione del codice esistente dal file views.py.Do not delete any of the existing code in views.py. Aggiungere semplicemente la parte nuova alla fine del file.Simply append this to the end.
@app.route('/vote', methods=['GET', 'POST'])
def vote(): 
    form = VoteForm()
    replaced_document ={}
    if form.validate_on_submit(): # is user submitted vote  
        client = document_client.DocumentClient(config.DOCUMENTDB_HOST, {'masterKey': config.DOCUMENTDB_KEY})

        # Read databases and take first since id should not be duplicated.
        db = next((data for data in client.ReadDatabases() if data['id'] == config.DOCUMENTDB_DATABASE))

        # Read collections and take first since id should not be duplicated.
        coll = next((coll for coll in client.ReadCollections(db['_self']) if coll['id'] == config.DOCUMENTDB_COLLECTION))

        # Read documents and take first since id should not be duplicated.
        doc = next((doc for doc in client.ReadDocuments(coll['_self']) if doc['id'] == config.DOCUMENTDB_DOCUMENT))

        # Take the data from the deploy_preference and increment our database
        doc[form.deploy_preference.data] = doc[form.deploy_preference.data] + 1
        replaced_document = client.ReplaceDocument(doc['_self'], doc)

        # Create a model to pass to results.html
        class VoteObject:
            choices = dict()
            total_votes = 0

        vote_object = VoteObject()
        vote_object.choices = {
            "Web Site" : doc['Web Site'],
            "Cloud Service" : doc['Cloud Service'],
            "Virtual Machine" : doc['Virtual Machine']
        }
        vote_object.total_votes = sum(vote_object.choices.values())

        return render_template(
            'results.html', 
            year=datetime.now().year, 
            vote_object = vote_object)

    else :
        return render_template(
            'vote.html', 
            title = 'Vote',
            year=datetime.now().year,
            form = form)

Creare i file HTMLCreate the HTML files

  1. In Esplora soluzioni, nella cartella tutorial (esercitazione) fare clic con il pulsante destro del mouse sulla cartella modelli, fare clic su Aggiungi e quindi su Nuovo elemento.In Solution Explorer, in the tutorial folder, right-click the templates folder, click Add, and then click New Item.
  2. Selezionare Pagina HTML e nella casella del nome digitare create.html.Select HTML Page, and then in the name box type create.html.
  3. Ripetere i passaggi 1 e 2 per creare altri due file HTML: results.html e vote.html.Repeat steps 1 and 2 to create two additional HTML files: results.html and vote.html.
  4. Aggiungere il codice seguente al file create.html in the <body> .Add the following code to create.html in the <body> element. Consente di visualizzare un messaggio che comunica l'avvenuta creazione di un nuovo database, di una raccolta e di un documento.It displays a message stating that we created a new database, collection, and document.

    {% extends "layout.html" %}
    {% block content %}
    <h2>{{ title }}.</h2>
    <h3>{{ message }}</h3>
    <p><a href="{{ url_for('vote') }}" class="btn btn-primary btn-large">Vote &raquo;</a></p>
    {% endblock %}
    
  5. Aggiungere il codice seguente al file results.html nell'elemento <body>.Add the following code to results.html in the <body> element. Consente di visualizzare i risultati del sondaggio.It displays the results of the poll.

    {% extends "layout.html" %}
    {% block content %}
    <h2>Results of the vote</h2>
        <br />
    
    {% for choice in vote_object.choices %}
    <div class="row">
        <div class="col-sm-5">{{choice}}</div>
            <div class="col-sm-5">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="{{vote_object.choices[choice]}}" aria-valuemin="0" aria-valuemax="{{vote_object.total_votes}}" style="width: {{(vote_object.choices[choice]/vote_object.total_votes)*100}}%;">
                                {{vote_object.choices[choice]}}
                </div>
            </div>
            </div>
    </div>
    {% endfor %}
    
    <br />
    <a class="btn btn-primary" href="{{ url_for('vote') }}">Vote again?</a>
    {% endblock %}
    
  6. Aggiungere il codice seguente al file vote.html nell'elemento <body>.Add the following code to vote.html in the <body> element. Consente di visualizzare il sondaggio e di accettare i voti.It displays the poll and accepts the votes. Durante la registrazione dei voti, il controllo viene passato a views.py, dove Azure Cosmos DB riconosce il voto espresso e aggiunge il documento di conseguenza.On registering the votes, the control is passed over to views.py where Azure Cosmos DB recognizes the vote cast and appends the document accordingly.

    {% extends "layout.html" %}
    {% block content %}
    <h2>What is your favorite way to host an application on Azure?</h2>
    <form action="" method="post" name="vote">
        {{form.hidden_tag()}}
            {{form.deploy_preference}}
            <button class="btn btn-primary" type="submit">Vote</button>
    </form>
    {% endblock %}
    
  7. Nella cartella modelli sostituire il contenuto del file index.html con il codice seguente.In the templates folder, replace the contents of index.html with the following. Questo fungerà da pagina di destinazione per l'applicazione.This serves as the landing page for your application.

    {% extends "layout.html" %}
    {% block content %}
    <h2>Python + Azure Cosmos DB Voting Application.</h2>
    <h3>This is a sample Cosmos DB voting application using PyDocumentDB</h3>
    <p><a href="{{ url_for('create') }}" class="btn btn-primary btn-large">Create/Clear the Voting Database &raquo;</a></p>
    <p><a href="{{ url_for('vote') }}" class="btn btn-primary btn-large">Vote &raquo;</a></p>
    {% endblock %}
    

Aggiungere un file di configurazione e modificare __init__.pyAdd a configuration file and change the __init__.py

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto tutorial (esercitazione), scegliere Aggiungi, Nuovo elemento e infine Empty Python File (File di Python vuoto), quindi denominare il file config.py.In Solution Explorer, right-click the tutorial project, click Add, click New Item, select Empty Python File, and then name the file config.py. Questo file config è necessario per i moduli in Flask.This config file is required by forms in Flask. È possibile usarlo anche per fornire una chiave privata.You can use it to provide a secret key as well. Tale chiave non sarà tuttavia necessaria per questa esercitazione.This key is not needed for this tutorial though.
  2. Aggiungere il codice seguente al file config.py. Nel passaggio successivo sarà necessario modificare i valori di DOCUMENTDB_HOST e DOCUMENTDB_KEY.Add the following code to config.py, you'll need to alter the values of DOCUMENTDB_HOST and DOCUMENTDB_KEY in the next step.

    CSRF_ENABLED = True
    SECRET_KEY = 'you-will-never-guess'
    
    DOCUMENTDB_HOST = 'https://YOUR_DOCUMENTDB_NAME.documents.azure.com:443/'
    DOCUMENTDB_KEY = 'YOUR_SECRET_KEY_ENDING_IN_=='
    
    DOCUMENTDB_DATABASE = 'voting database'
    DOCUMENTDB_COLLECTION = 'voting collection'
    DOCUMENTDB_DOCUMENT = 'voting document'
    
  3. Nel portale di Azure passare alla pagina Chiavi facendo clic su Sfoglia, Account Azure Cosmos DB, fare doppio clic sul nome dell'account da usare e quindi fare clic sul pulsante Chiavi nell'area Informazioni di base.In the Azure portal, navigate to the Keys page by clicking Browse, Azure Cosmos DB Accounts, double-click the name of the account to use, and then click the Keys button in the Essentials area. Nella pagina Chiavi copiare il valore di URI e incollarlo nel file config.py, come valore della proprietà DOCUMENTDB_HOST.On the Keys page, copy the URI value and paste it into the config.py file, as the value for the DOCUMENTDB_HOST property.
  4. Tornare al portale di Azure e nella pagina Chiavi copiare il valore della Chiave primaria o della Chiave secondaria e incollarlo nel file config.py come valore della proprietà DOCUMENTDB_KEY.Back in the Azure portal, on the Keys page, copy the value of the Primary Key or the Secondary Key, and paste it into the config.py file, as the value for the DOCUMENTDB_KEY property.
  5. Nel file __init__.py aggiungere la riga seguente:In the __init__.py file, add the following line:

     app.config.from_object('config')
    

    Il contenuto del file deve essere analogo al seguente:So that the content of the file is:

    from flask import Flask
    app = Flask(__name__)
    app.config.from_object('config')
    import tutorial.views
    
  6. Dopo aver aggiunto tutti i file, l'aspetto di Esplora soluzioni dovrebbe risultare simile al seguente:After adding all the files, Solution Explorer should look like this:

    Schermata della finestra Esplora soluzioni di Visual Studio

Passaggio 4: Esecuzione dell'applicazione Web in localeStep 4: Run your web application locally

  1. Premere CTRL+MAIUSC+B per compilare la soluzione.Build the solution by pressing Ctrl+Shift+B.
  2. Al termine della compilazione, avviare il sito Web premendo F5.Once the build succeeds, start the website by pressing F5. Dovrebbe venire visualizzata la schermata seguente.You should see the following on your screen.

    Screenshot di Python e dell'applicazione per votazione di Azure Cosmos DB visualizzati in un Web browser

  3. Fare clic su Create/Clear the Voting Database per generare il database.Click Create/Clear the Voting Database to generate the database.

    Schermata della pagina di creazione dell'applicazione web - informazioni dettagliate sullo sviluppo

  4. Fare quindi clic su Voto e selezionare un'opzione.Then, click Vote and select your option.

    Schermata dell'applicazione Web con una domanda relativa al voto

  5. Ogni voto espresso va a incrementare il contatore appropriato.For every vote you cast, it increments the appropriate counter.

    Schermata dei risultati della pagina voto visualizzata

  6. Per arrestare il debug del sito Web, premere MAIUSC+F5.Stop debugging the project by pressing Shift+F5.

Passaggio 5: Distribuire l'applicazione Web in AzureStep 5: Deploy the web application to Azure

L'applicazione completa a questo punto funziona correttamente con Azure Cosmos DB localmente. Si procede quindi con la creazione di un file web.config, l'aggiornamento dei file nel server in modo che corrispondano all'ambiente locale e quindi la visualizzazione dell'app completata in Azure.Now that you have the complete application working correctly against Azure Cosmos DB locally, we're going to create a web.config file, update the files on the server to match the local environment, and then view the completed app on Azure. Questa procedura è specifica di Visual Studio 2017.This procedure is specific to Visual Studio 2017. Se si usa una versione diversa di Visual Studio, vedere la pagina relativa alla pubblicazione in Servizio app di Azure.If you are using a different version of Visual Studio, see Publishing to Azure App Service.

  1. In Esplora soluzioni di Visual Studio fare clic con il pulsante destro del mouse sul progetto e selezionare Aggiungi > Nuovo elemento. Nella finestra di dialogo che viene visualizzata selezionare il modello Azure web.config (Fast CGI) e fare clic su OK.In Visual Studio Solution Explorer, right-click the project and select Add > New Item.... In the dialog that appears, selecting the Azure web.config (Fast CGI) template and select OK. Verrà creato un file web.config nella radice del progetto.This creates a web.config file in your project root.

  2. Modificare la sezione <system.webServer> in web.config in modo che il percorso corrisponda all'installazione di Python.Modify the <system.webServer> section in web.config so that the path matches the Python installation. Per Python 2.7 x64, ad esempio, la voce deve apparire come segue:For example, for Python 2.7 x64 the entry should appear as follows:

    <system.webServer>
        <handlers>
            <add name="PythonHandler" path="*" verb="*" modules="FastCgiModule" scriptProcessor="D:\home\Python27\python.exe|D:\home\Python27\wfastcgi.py" resourceType="Unspecified" requireAccess="Script"/>
        </handlers>
    </system.webServer>
    
  3. Impostare la voce WSGI_HANDLER in web.config come tutorial.app in modo da corrispondere al nome del progetto.Set the WSGI_HANDLER entry in web.config as to tutorial.app to match your project name.

    <!-- Flask apps only: change the project name to match your app -->
    <add key="WSGI_HANDLER" value="tutorial.app"/>
    
  4. In Esplora soluzioni di Visual Studio espandere la cartella tutorial (esercitazione), fare clic con il pulsante destro del mouse sulla cartella static, selezionare Aggiungi > Nuovo elemento, selezionare il modello "web.config di file statici di Azure" e fare clic su OK.In Visual Studio Solution Explorer, expand the tutorial folder, right-click the static folder, select Add > New Item..., select the "Azure static files web.config" template, and select OK. Questa azione crea un altro file web.config nella cartella static che disabilita l'elaborazione Python per la cartella.This action creates another web.config in the static folder that disables Python processing for that folder. Questa configurazione invia richieste di file statici al server Web predefinito, anziché usare l'applicazione Python.This configuration sends requests for static files to the default web server rather than using the Python application.

  5. Salvare i file, fare clic con il pulsante destro del mouse sul progetto in Esplora soluzioni (assicurarsi che non sia ancora in esecuzione localmente) e selezionare Pubblica.Save the files, then right-click the project in Solution Explorer (make sure you're not still running it locally) and select Publish.

    Schermata dell'esercitazione selezionata in Esplora soluzioni, con l'opzione Pubblica evidenziata

  6. Nella finestra di dialogo Pubblica selezionare Servizio app di Microsoft Azure, selezionare Crea nuovo e quindi fare clic su Pubblica.In the Publish dialog box, select Microsoft Azure App Service, select Create New, and then click Publish.

    Screenshot della finestra Pubblica sul Web con Servizio app di Microsoft Azure evidenziato

  7. Nella finestra di dialogo Crea servizio app immettere il nome dell'app Web, specificando anche Sottoscrizione, Gruppo di risorse e Piano di Servizio app, quindi fare clic su Crea.In the Create App Service dialog box, enter the name for your web app along with your Subscription, Resource Group, and App Service Plan, then click Create.

    Screenshot della finestra App Web di Microsoft Azure

  8. In pochi secondi Visual Studio completa la copia dei file nel server e visualizza il messaggio "Impossibile visualizzare la pagina a causa di un errore interno del server."In a few seconds, Visual Studio finishes copying your files to the server and displays "The page cannot be displayed because an internal server error has occurred." nella pagina http://<your app service>.azurewebsites.net/.on the http://<your app service>.azurewebsites.net/ page.

  9. Nel portale di Azure aprire il nuovo account del servizio app, quindi nel menu di spostamento scorrere verso il basso fino alla sezione Strumenti di sviluppo, selezionare Estensioni e quindi fare clic su + Aggiungi.In the Azure portal, open your new App Service account, then in the navigation menu, scroll down to the Development Tools section, select Extensions, then click + Add.

  10. Nella pagina Scegliere l'estensione scorrere fino all'installazione di Python 2.7 più recente e selezionare l'opzione x86 o x64 bit. Fare quindi clic su OK per accettare le note legali.In the Choose extension page, scroll down to the most recent Python 2.7 installation and select the x86 or x64 bit option, then click OK to accept the legal terms.

  11. Usare la console di Kudu, che è disponibile in https://<your app service name>.scm.azurewebsites.net/DebugConsole, per installare i pacchetti elencati nel file requirements.txt dell'app.Use the Kudu console, which you can browse to at https://<your app service name>.scm.azurewebsites.net/DebugConsole, to install the packages listed in your app's requirements.txt file. A tale scopo, nella console di diagnostica di Kudu, passare alla cartella di Python D:\home\Python27 quindi eseguire questo comando, come descritto nella sezione Console di Kudu:To do this, in the Kudu Diagnostic Console, navigate to your Python folder D:\home\Python27 then run the following command as described in the Kudu console section:

    D:\home\Python27>python -m pip install --upgrade -r /home/site/wwwroot/requirements.txt
    
  12. Riavviare il servizio app nel portale di Azure dopo avere installato i nuovi pacchetti scegliendo il pulsante Riavvia.Restart the App Service in the Azure portal after installing the new packages by pressing the Restart button.

    Suggerimento

    Se si apportano modifiche al file requirements.txt dell'app, assicurarsi di usare di nuovo la console di Kudu per installare i pacchetti che sono ora elencati nel file.If you make any changes to your app's requirements.txt file, be sure to again use the Kudu console to install any packages that are now listed in that file.

  13. Dopo aver configurato completamente l'ambiente del server, aggiornare la pagina nel browser. Verrà visualizzata l'app Web.Once you've fully configured the server environment, refresh the page in the browser and the web app should appear.

    Risultati della pubblicazione di app Bottle, Flask e Django nel servizio app

    Suggerimento

    Se la pagina Web non viene visualizzata o se viene visualizzato di nuovo il messaggio "Impossibile visualizzare la pagina a causa di un errore interno del server.",If the web page does not appear, or you still get the "The page cannot be displayed because an internal server error has occurred." aprire il file web.config in Kudo e aggiungere <httpErrors errorMode="Detailed"></httpErrors> nella sezione system.webServer, quindi aggiornare la pagina.message, open the web.config file in Kudo and add <httpErrors errorMode="Detailed"></httpErrors> to the system.webServer section, then refresh the page. Verrà visualizzato l'output dettagliato dell'errore nel browser.This will provided detailed error output to the browser.

Risoluzione dei problemiTroubleshooting

Se si tratta della prima app Python eseguita nel computer, assicurarsi che le cartelle seguenti o i percorsi di installazione equivalenti siano inclusi nella variabile PATH:If this is the first Python app you've run on your computer, ensure that the following folders (or the equivalent installation locations) are included in your PATH variable:

C:\Python27\site-packages;C:\Python27\;C:\Python27\Scripts;

Se si riceve un errore nella pagina di voto e il progetto ha un nome diverso da tutorial (esercitazione), assicurarsi che __init__.py faccia riferimento al nome di progetto corretto nella riga import tutorial.view.If you receive an error on your vote page, and you named your project something other than tutorial, make sure that __init__.py references the correct project name in the line: import tutorial.view.

Passaggi successiviNext steps

Congratulazioni.Congratulations! È stata appena creata la prima applicazione Web Python con Azure Cosmos DB ed è stata pubblicata in Azure.You have completed your first Python web application using Azure Cosmos DB and published it to Azure.

Per aggiungere altre funzionalità all'applicazione Web, esaminare le API disponibili in Azure Cosmos DB Python SDK.To add additional functionality to your web application, review the APIs available in the Azure Cosmos DB Python SDK.

Per altre informazioni su Azure, Visual Studio e Python, vedere il centro per sviluppatori di Python.For more information about Azure, Visual Studio, and Python, see the Python Developer Center.

Per altre esercitazioni su Python Flask, vedere The Flask Mega-Tutorial, Part I: Hello, World!(Esercitazione su Flask, parte I: Hello, World!).For additional Python Flask tutorials, see The Flask Mega-Tutorial, Part I: Hello, World!.