Dela via

Självstudie: Distribuera Bitbucket-lagringsplatser i Azure Static Web Apps

Azure Static Web Apps har flexibla distributionsalternativ som gör det möjligt att arbeta med olika leverantörer. I den här självstudien distribuerar du ett webbprogram som finns i Bitbucket till Azure Static Web Apps med hjälp av en virtuell Linux-dator.

Kommentar

Pipelineaktiviteten Static Web Apps fungerar för närvarande bara på Linux-datorer.

I den här självstudien får du lära dig att:

  • Importera en lagringsplats till Bitbucket
  • Skapa en statisk webbapp
  • Konfigurera Bitbucket-lagringsplatsen så att den distribueras till Azure Static Web Apps

Förutsättningar

Skapa en lagringsplats

Den här artikeln använder en GitHub-lagringsplats som källa för att importera kod till en Bitbucket-lagringsplats.

  1. Logga in på Bitbucket.

  2. Gå till för att https://bitbucket.org/repo/import påbörja importprocessen.

  3. Under etiketten Gammal lagringsplats går du till rutan URL och anger lagringsplats-URL:en för ditt val av ramverk.

  4. Bredvid projektetiketten väljer du Skapa nytt projekt.

  5. Ange MyStaticWebApp.

  6. Välj Importera lagringsplats och vänta en stund medan webbplatsen skapar lagringsplatsen.

Ange huvudgren

Malllagringsplatsen har då och då mer än en gren. Använd följande steg för att se till att Bitbucket mappar huvudtaggen till huvudgrenen på lagringsplatsen.

  1. Välj Lagringsplatsinställningar.
  2. Expandera avsnittet Avancerat.
  3. Under etiketten Main branch (Huvudgren) kontrollerar du att main är markerat i listrutan.
  4. Om du har gjort en ändring väljer du Spara ändringar.
  5. Välj Bakåt.

Skapa en statisk webbapp

Nu när lagringsplatsen har skapats kan du skapa en statisk webbapp från Azure Portal.

  1. Gå till Azure-portalen.

  2. Välj Skapa en resurs.

  3. Sök efter Static Web Apps.

  4. Välj Static Web Apps.

  5. Välj Skapa.

  6. I avsnittet Grundläggande börjar du med att konfigurera din nya app.

    Inställning Värde
    Azure-prenumeration Välj din Azure-prenumerationen.
    Resursgrupp Välj länken Skapa ny och ange static-web-apps-bitbucket.
    Name Ange my-first-static-web-app.
    Abonnemangstyp Välj Kostnadsfri.
    Region för Azure Functions API och mellanlagringsmiljöer Välj den region som är närmast dig.
    Källa Välj Annat.

  7. Välj Granska + skapa.

  8. Välj Skapa.

  9. Välj Gå till resurs.

  10. Välj Hantera distributionstoken.

  11. Kopiera värdet för distributionstoken och lägg det åt sidan i ett redigeringsprogram för senare användning.

  12. Välj Stäng i fönstret Hantera distributionstoken .

Skapa pipelineaktiviteten i Bitbucket

  1. Gå till lagringsplatsen i Bitbucket.

  2. Välj menyalternativet Källa .

  3. Kontrollera att huvudgrenen är markerad i listrutan för grenen.

  4. Välj Pipelines.

  5. Välj textlänk Skapa din första pipeline.

  6. På kortet Startpipeline väljer du Välj.

  7. Ange följande YAML i konfigurationsfilen.

    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

    Kommentar

    I det här exemplet är värdet för pipe inställt på microsoft/azure-static-web-apps-deploy:main. Ersätt main med önskat grennamn om du vill att pipelinen ska fungera med en annan gren.

    Följande konfigurationsegenskaper används i konfigurationsfilen för din statiska webbapp.

    Variabeln $BITBUCKET_CLONE_DIR mappar till lagringsplatsens rotmapp under byggprocessen.

    Property beskrivning Exempel Obligatoriskt
    app_location Plats för programkoden. Ange / om programmets källkod finns i roten på lagringsplatsen eller /app om programkoden finns i en katalog med namnet app. Ja
    api_location Plats för Din Azure Functions-kod. Ange /api om api-koden finns i en mapp med namnet api. Om ingen Azure Functions-app identifieras i mappen misslyckas inte bygget. Arbetsflödet förutsätter att du inte vill ha något API. Nej
    output_location Platsen för utdatakatalogen för bygget app_locationi förhållande till . Om programmets källkod finns på /app, och byggskriptet matar ut filer till /app/build mappen, anger du build sedan output_location som värde. Nej

Definiera sedan värdet för variabeln API_TOKEN .

  1. Välj Lägg till variabler.
  2. I rutan Namn anger du deployment_token som matchar namnet i arbetsflödet.
  3. I rutan Värde klistrar du in det distributionstokenvärde som du angav i ett tidigare steg.
  4. Markera kryssrutan Skyddad .
  5. Markera Lägga till.
  6. Välj Checka in fil och gå tillbaka till fliken Pipelines.

Vänta en stund i fönstret Pipelines så visas distributionsstatusen. När distributionen är klar kan du visa webbplatsen i webbläsaren.

Visa webbplatsen

Det finns två aspekter för att distribuera en statisk app. Det första steget skapar de underliggande Azure-resurser som utgör din app. Den andra är ett Bitbucket-arbetsflöde som skapar och publicerar ditt program.

Innan du kan gå till den nya statiska platsen måste distributionsversionen först slutföras.

Översiktsfönstret för Static Web Apps visar en serie länkar som hjälper dig att interagera med din webbapp.

  1. Gå tillbaka till din statiska webbapp i Azure Portal.
  2. Gå till fönstret Översikt .
  3. Välj länken under URL-etiketten . Webbplatsen läses in på en ny flik.

Rensa resurser

Om du inte kommer att fortsätta att använda det här programmet kan du ta bort Azure Static Web Apps-instansen och alla associerade tjänster genom att ta bort resursgruppen.

  1. Välj resursgruppen static-web-apps-bitbucket i avsnittet Översikt.
  2. Välj Ta bort resursgrupp överst i resursgruppen Översikt.
  3. Ange resursgruppens namn static-web-apps-bitbucket i dialogrutan Vill du ta bort bekräftelsedialogrutan "static-web-apps-bitbucket"?
  4. Välj Ta bort.

Det kan ta några minuter att ta bort resursgruppen.

Nästa steg

Lägga till ett API

  • Last updated on