Självstudie: Publicera en Webbplats för att Azure Static Web Apps

  • Artikel
  • 3 minuter för att läsa

Den här artikeln visar hur du skapar och distribuerar en Webbapp Förser Azure Static Web Apps. Slutresultatet är en ny Azure Static Web App med tillhörande GitHub Actions som ger dig kontroll över hur appen byggs och publiceras.

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

  • Skapa en Appar-app
  • Konfigurera en Azure Static Web Apps
  • Distribuera Appar till Azure

Om du inte har en Azure-prenumerationkan du skapa ett kostnads fritt konto innan du börjar.

Förutsättningar

Skapa en Appar-app

Skapa en Appar-app med cli (Command Line Interface):

  1. Följ installationsguiden för Så här gör du i ditt operativsystem.

  2. Öppna en terminal

  3. Kör Cli för att skapa en ny app.

    hugo new site static-app

  4. Gå till den nyligen skapade appen.

    cd static-app

  5. Initiera en Git-lagringsplatsen.

    git init

  6. Kontrollera att grenen heter main .

    git branch -M main

  7. Lägg sedan till ett tema på webbplatsen genom att installera ett tema som en git-undermodul och sedan ange det i Config-filen Försent.

    git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

  8. Genomför ändringarna.

    git add -A
git commit -m "initial commit"

Push-skicka programmet till GitHub

Du behöver en lagringsplats på GitHub för att ansluta till Azure Static Web Apps. Följande steg visar hur du skapar en lagringsplats för webbplatsen.

  1. Skapa en GitHub lagringsplatsen (skapa inte ett VIKTIGT) från https://github.com/new med namnet static-app.

  2. Lägg till GitHub som en fjärrlagringsplats till din lokala lagringsplats. Se till att lägga GitHub användarnamnet i stället för <YOUR_USER_NAME> platshållaren i följande kommando.

    git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app

  3. Push-skicka din lokala lagringsplatsen upp till GitHub.

    git push --set-upstream origin main

Distribuera din webbapp

Följande steg visar hur du skapar en ny statisk webbplatsapp och distribuerar den till en produktionsmiljö.

Skapa programmet

  1. Navigera till Azure Portal

  2. Välj Skapa en resurs

  3. Sök efter Statiska webbappar

  4. Välj Static Web Apps

  5. Välj Skapa

  6. Ange följande värden på fliken Grundläggande inställningar.

    Egenskap Värde
    Prenumeration Ditt Azure-prenumerationsnamn.
    Resursgrupp my-s-group
    Namn static-app
    Plantyp Kostnadsfri
    Region för Azure Functions API och mellanlagringsmiljöer Välj den region som är närmast dig.
    Källa GitHub

  7. Välj Logga in med GitHub och autentisera med GitHub.

  8. Ange följande GitHub värden.

    Egenskap Värde
    Organisation Välj önskad GitHub organisation.
    Lagringsplats Välj den statiska appen.
    Gren Välj main.

  9. I avsnittet Build Details (Bygginformation) väljer du Build Presets (Byggförinställningar) och behåller standardvärdena.

Granska och skapa

  1. Välj knappen Granska + skapa för att kontrollera att informationen är korrekt.

  2. Välj Skapa för att börja skapa App Service Static Web App och etablera en GitHub åtgärd för distribution.

  3. När distributionen är klar klickar du på Gå till resurs.

  4. På resursskärmen klickar du på URL-länken för att öppna det distribuerade programmet. Du kan behöva vänta någon minut tills åtgärden GitHub slutföras.

    Distribuerat program

Anpassad Custom Sådd-version

När du genererar en statisk webbapp genereras en arbetsflödesfil som innehåller konfigurationsinställningarna för publicering för programmet. Du kan ange en specifik Versionsversion i arbetsflödesfilen genom att ange ett värde HUGO_VERSION för i env avsnittet . Följande exempelkonfiguration visar hur du ställer in Konfigurera till en specifik version.

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          HUGO_VERSION: 0.58.0

Rensa resurser

Om du inte kommer att fortsätta att använda det här programmet kan du ta bort Azures statiska webb program resurs genom följande steg:

  1. Öppna Azure-portalen
  2. Sök efter ditt program med det namn du angav tidigare i det övre Sök fältet
  3. Klicka på appen
  4. Klicka på knappen ta bort
  5. Bekräfta borttagnings åtgärden genom att klicka på Ja

Nästa steg

Lägga till en anpassad domän