Esercitazione: Distribuire repository Bitbucket in App Web statiche di Azure

App Web statiche di Azure offre opzioni di distribuzione flessibili che consentono di lavorare con diversi provider. In questa esercitazione si distribuisce un'applicazione Web ospitata in Bitbucket in App Web statiche di Azure usando una macchina virtuale Linux.

Nota

L'attività pipeline App Web statiche attualmente funziona solo nei computer Linux.

Questa esercitazione apprendi come:

  • Importare un repository in Bitbucket
  • Creare un'app Web statica
  • Configurare il repository Bitbucket per la distribuzione in App Web statiche di Azure

Prerequisiti

Creare un repository

Questo articolo usa un repository GitHub come origine per importare il codice in un repository Bitbucket.

  1. Accedere a Bitbucket.

  2. Andare a https://bitbucket.org/repo/import per avviare il processo di importazione.

  3. Nell'etichetta Vecchio repository all'interno della casella URL immettere l'URL del repository per la scelta del framework.

  4. Accanto all'etichetta Progetto selezionare Crea nuovo progetto.

  5. Immettere MyStaticWebApp.

  6. Selezionare Importa repository e attendere un attimo mentre il sito Web crea il repository.

Impostare il ramo principale

Di tanto in tanto il repository di modelli ha più di un ramo. Seguire questa procedura per assicurarsi che Bitbucket esegua il mapping del tag principale al ramo principale nel repository.

  1. Selezionare Impostazioni repository.
  2. Espandere la sezione Avanzate.
  3. Sotto l'etichetta Ramo principale verificare che l'opzione principale sia selezionata nell'elenco a discesa.
  4. Se è stata apportata una modifica, selezionare Salva modifiche.
  5. Seleziona Indietro.

Creare un'app Web statica

Dopo aver creato il repository, è possibile creare un'app Web statica dal portale di Azure.

  1. Vai al portale di Azure.

  2. Selezionare Crea una risorsa.

  3. Cercare App Web statiche.

  4. Selezionare App Web statiche.

  5. Seleziona Crea.

  6. Nella sezione Informazioni di base iniziare configurando la nuova app.

    Impostazione Valore
    Sottoscrizione di Azure Seleziona la tua sottoscrizione di Azure.
    Gruppo di risorse Selezionare il link Crea nuovo e immettere static-web-apps-bitbucket.
    Nome Immettere my-first-static-web-app.
    Tipo di piano Selezionare Gratuito.
    Region for Azure Functions API and staging environments (Area per l'API Funzioni di Azure e gli ambienti di gestione temporanea) Selezionare l'area più vicina.
    Origine Selezionare Altro.

  7. Selezionare Rivedi e crea.

  8. Seleziona Crea.

  9. Selezionare Vai alla risorsa.

  10. Selezionare Gestisci token di distribuzione.

  11. Copiare il valore del token di distribuzione e metterlo da parte in un editor per usarlo in un secondo momento.

  12. Selezionare Chiudi nella finestra Gestisci token di distribuzione.

Creare l'attività della pipeline in Bitbucket

  1. Passare al repository in Bitbucket.

  2. Selezionare la voce di menu Origine.

  3. Verificare che il ramo principale sia selezionato nell'elenco a discesa del ramo.

  4. Seleziona pipeline.

  5. Selezionare il link di testo Creare la prima pipeline.

  6. Nella scheda Pipeline starter selezionare Seleziona.

  7. Immettere il codice YAML seguente nel file di configurazione.

    pipelines:
  branches:
   main:
    - step: 
        name: Deploy to test
        deployment: test
        script:
          - chown -R 165536:165536 $BITBUCKET_CLONE_DIR
          - pipe: microsoft/azure-static-web-apps-deploy:main
            variables:
                APP_LOCATION: '$BITBUCKET_CLONE_DIR/src'
                OUTPUT_LOCATION: '$BITBUCKET_CLONE_DIR/src'
                API_TOKEN: $deployment_token

    Nota

    In questo esempio il valore per pipe è impostato su microsoft/azure-static-web-apps-deploy:main. Sostituire main con il nome del ramo desiderato se si desidera che la pipeline funzioni con un ramo differente.

    Le proprietà di configurazione seguenti vengono usate nel file di configurazione per l'app Web statica.

    La variabile $BITBUCKET_CLONE_DIR esegue il mapping al percorso della cartella radice del repository durante il processo di compilazione.

    Proprietà Descrizione Esempio Richiesto
    app_location Percorso del codice dell'applicazione. Immettere / se il codice sorgente dell'applicazione si trova nella radice del repository o /app se il codice dell'applicazione si trova in una directory denominata app. Sì
    api_location Percorso del codice di Funzioni di Azure. Immettere /api se il codice dell'app si trova in una cartella denominata api. Se nella cartella non viene rilevata alcuna app Funzioni di Azure, la compilazione non restituisce un errore perché il flusso di lavoro presuppone che non si desideri un'API. No
    output_location Percorso della directory di output di compilazione relativa ad app_location. Se il codice sorgente dell'applicazione si trova in /app e lo script di compilazione esegue l'output dei file nella cartella /app/build, impostare build come valore di output_location. No

Definire quindi il valore per la variabile API_TOKEN.

  1. Selezionare Aggiungi variabili.
  2. Nella casella Nome immettere deployment_token, che corrisponde al nome nel flusso di lavoro.
  3. Nella casella Valore, incollare il valore del token di distribuzione che era stato messo da parte in un passaggio precedente.
  4. Selezionare la casella di controllo Protetta.
  5. Selezionare Aggiungi.
  6. Selezionare Esegui commit del file e tornare alla scheda pipeline.

Attendere un momento nella finestra Pipeline e verrà visualizzato lo stato della distribuzione. Al termine dell'esecuzione della distribuzione, è possibile visualizzare il sito Web nel browser.

Visualizzare il sito Web

La distribuzione di un'app statica è un processo in due passaggi. Il primo passaggio crea le risorse di Azure sottostanti che costituiscono l'app. Il secondo è un flusso di lavoro Bitbucket che compila e pubblica l'applicazione.

Prima di poter andare al nuovo sito statico, deve terminare l'esecuzione della compilazione di distribuzione.

La finestra della panoramica di App Web statiche visualizza una serie di collegamenti che consentono di interagire con l'app Web.

  1. Tornare all'app Web statica nel portale di Azure.
  2. Passare alla finestra Panoramica.
  3. Selezionare il collegamento sotto l'etichetta URL. Il sito Web viene caricato in una nuova scheda.

Pulire le risorse

Se non si intende continuare a usare questa applicazione, è possibile eliminare l'istanza di App Web statiche di Azure e tutti i servizi associati rimuovendo il gruppo di risorse.

  1. Selezionare il gruppo di risorse static-web-apps-bitbucket dalla sezione Panoramica.
  2. Selezionare Elimina gruppo di risorse nella parte superiore del gruppo di risorse Panoramica.
  3. Immettere il nome del gruppo di risorse static-web-apps-bitbucket nella finestra di dialogo di conferma Eliminare "static-web-apps-bitbucket"?.
  4. Selezionare Elimina.

Il completamento del processo per eliminare il gruppo di risorse può richiedere alcuni minuti.

Passaggi successivi

Aggiungere un'API

  • Last updated on