Condividi tramite

Esercitazione: Distribuire repository GitLab in App Web statiche di Azure

App Web statiche di Azure offre opzioni di distribuzione flessibili che consentono di lavorare con diversi provider. In questo articolo si distribuisce un'applicazione Web ospitata in GitLab in App Web statiche di Azure.

Questa esercitazione apprendi come:

  • Importare un repository in GitLab
  • Creare un'app Web statica
  • Configurare il repository GitLab 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 GitLab.

  1. Accedere all'account GitLab e passare a https://gitlab.com/projects/new#import_project

  2. Selezionare Repository by URL.

  3. Nella casella URL repository Git immettere l'URL del repository per la scelta del framework.

  4. Nella casella Slug progetto immettere my-first-static-web-app.

  5. Selezionare Crea progetto e attendere qualche istante durante la configurazione del repository.

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 collegamento Crea nuovo e immettere static-web-apps-gitlab.
    Nome Immettere my-first-static-web-app.
    Tipo di piano Selezionare Gratuito.
    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 GitLab

Ora che si dispone del token di distribuzione, si può aggiungere un'attività di flusso di lavoro responsabile della compilazione e della distribuzione del sito durante l'esecuzione delle modifiche.

Aggiungere un token di distribuzione

Quando si esegue la procedura seguente, assicurarsi di selezionare * per la sezione ambienti. Potrebbe apparire che il valore predefinito sia all, ma è necessario selezionare l'elenco a discesa e scegliere manualmente *.

  1. Passare al repository in GitLab.

  2. Seleziona Impostazioni.

  3. Selezionare CI/CD.

  4. Accanto alla sezione Variabili selezionare Espandi.

  5. Selezionare Aggiungi variabile.

  6. Nella casella Chiave, immettere DEPLOYMENT_TOKEN.

  7. Nella casella Valore, incollare il valore del token di distribuzione che era stato messo da parte in un passaggio precedente.

  8. Selezionare Aggiungi variabile.

Aggiungere file

  1. Tornare alla schermata principale del repository in GitLab.

  2. Selezionare il pulsante Modifica e scegliere IDE Web.

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

  4. Creare un nuovo file denominato .gitlab-ci.yml nella radice del repository. (Assicurarsi che l'estensione del file sia .yml.)

  5. Immettere il codice YAML seguente nel file.

    variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/src'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

    Le proprietà di configurazione seguenti vengono usate in .gitlab-ci.yml per configurare l'app Web statica.

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

    Proprietà Descrizione Esempio Richiesto
    APP_PATH Percorso del codice dell'applicazione. Immettere $CI_PROJECT_DIR/ se il codice sorgente dell'applicazione si trova nella radice del repository o $CI_PROJECT_DIR/app se il codice dell'applicazione si trova in una cartella denominata app. Sì
    API_PATH Percorso del codice di Funzioni di Azure. Immettere $CI_PROJECT_DIR/api se il codice dell'app si trova in una cartella denominata api. No
    OUTPUT_PATH Percorso della cartella di output di compilazione relativa all'oggetto APP_PATH. Se il codice sorgente dell'applicazione si trova in $CI_PROJECT_DIR/app e lo script di compilazione esegue l'output dei file nella cartella $CI_PROJECT_DIR/app/build, impostare $CI_PROJECT_DIR/app/build come valore di OUTPUT_PATH. No
    API_TOKEN Token API per la distribuzione. API_TOKEN: $DEPLOYMENT_TOKEN Sì

  6. Eseguire il commit delle modifiche nel ramo principale e chiudere l'IDE Web.

  7. Tornare al sito e selezionare le voci di menu Impostazioni>> per visualizzare lo stato di avanzamento della distribuzione.

Al termine della distribuzione, è possibile visualizzare il sito Web.

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 GitLab 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-gitlab 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-gitlab nella finestra di dialogo di conferma Eliminare "static-web-apps-gitlab"?.

  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