Poprzednie

Następne

Ćwiczenie — publikowanie aplikacji internetowej i wdrażanie jej za pomocą akcji usługi GitHub

Ukończone

Teraz możesz opublikować aplikację na platformie Azure. Użyj wystąpienia systemu Windows piaskownicy do hostowania aplikacji internetowej. Użycie rozszerzenia programu Visual Studio Code platformy Azure usprawnia ten proces.

Tworzenie aplikacji internetowej na platformie Azure

Teraz nadszedł czas na uruchomienie aplikacji na platformie Azure. Należy utworzyć aplikację usługi Azure App Service i wdrożyć kod.

Tworzenie planu i aplikacji usługi App Service

Tworzenie aplikacji usługi App Service to proces dwuetapowy: najpierw utwórz plan, a następnie utwórz aplikację.

Nazwa planu musi być unikatowa tylko w ramach subskrypcji, aby można było stosować nazwę używaną przez nas: pwa-exercise-plan. Nazwa aplikacji musi być unikatowa globalnie, dlatego musisz wybrać własną.

W usłudze Azure Cloud Shell uruchom następujące polecenie, aby utworzyć plan usługi App Service.

az appservice plan create \
    --name pwa-exercise-plan \
    --sku FREE \
    --location centralus \
    --resource-group [your resource group]

Następnie uruchom następujące polecenie, aby utworzyć aplikację internetową, która używa właśnie utworzonego planu usługi App Service.

az webapp create \
    --plan pwa-exercise-plan \
    --runtime "node|10.6" \
    --resource-group [your resource group] \
    --name <your-unique-app-name>

Tworzenie akcji usługi GitHub do wdrażania aplikacji

Teraz musisz utworzyć akcję usługi GitHub, aby utworzyć aplikację za każdym razem, gdy wypchniesz do niej nowy kod, i połącz kod z aplikacją internetową utworzoną na platformie Azure. Ten proces obejmuje dwa kroki.

1. Najpierw utwórz dwa zagnieżdżone foldery w folderze głównym aplikacji o nazwie .github/workflows. W folderze workflow dodaj plik o nazwie deploy.yml. Ten plik zostanie automatycznie pobrany przez funkcję GitHub actions jako przepływ pracy po zatwierdzeniu go w usłudze GitHub. Dodaj następujący kod do pliku deploy.yml.

   on:
       push:
           branches:
               - master
   
   env:
       AZURE_WEBAPP_NAME: 'trickyimages' # set this to your application's name
       AZURE_WEBAPP_PACKAGE_PATH: 'dist' # set this to the path to your web app project, for Vue.js it's dist
       NODE_VERSION: '10.x' # set this to the node version to use
   
   jobs:
       build-and-deploy:
           name: Build and Deploy
           runs-on: ubuntu-latest
           steps:
               - uses: actions/checkout@v2
               - name: Use Node.js ${{ env.NODE_VERSION }}
                 uses: actions/setup-node@v1
                 with:
                     node-version: ${{ env.NODE_VERSION }}
               - name: npm install, build, and test
                 run: |
                     # Build and test the project, then
                     # deploy to Azure Web App.
                     npm install
                     npm run build --if-present
                     npm run test --if-present
               - name: 'Deploy to Azure WebApp'
                 uses: azure/webapps-deploy@v1
                 with:
                     app-name: ${{ env.AZURE_WEBAPP_NAME }}
                     publish-profile: ${{ secrets.PORTAL_PUBLISH_PROFILE }}
                     package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}
   

2. Zmodyfikuj ten plik, ustawiając nazwę aplikacji na nazwę nadaną aplikacji internetowej na platformie Azure.

Łączenie aplikacji z usługą GitHub przy użyciu kluczy

Utworzysz nowy klucz tajny w usłudze GitHub, aby utworzyć uzgodnienie między platformą Azure i usługą GitHub.

Przejdź do witryny Azure Portal, w której jest hostowana Twoja aplikacja internetowa. Wybierz pozycję Pobierz profil publikowania, aby pobrać plik.

W repozytorium GitHub przejdź do pozycji Ustawienia > Wpisy tajne. Skopiuj i wklej zawartość tego pliku do nowego wpisu tajnego o nazwie PORTAL_PUBLISH_PROFILE i zapisz go.

Gdy wypchniesz teraz nowy kod do repozytorium, akcja usługi GitHub skompiluje i opublikuje nową bazę kodu, a aplikacja internetowa zostanie odświeżona.

Wypróbuj to przy użyciu nowego modelu, aby zaobserwować zmiany wykonywane automatycznie.

Kontynuuj