Delen via

Zelfstudie: GitLab-opslagplaatsen implementeren in Azure Static Web Apps

Azure Static Web Apps heeft flexibele implementatieopties waarmee u met verschillende providers kunt werken. In dit artikel implementeert u een webtoepassing die wordt gehost in GitLab in Azure Static Web Apps.

In deze zelfstudie leert u het volgende:

  • Een opslagplaats importeren in GitLab
  • Statische web-app maken
  • De GitLab-opslagplaats configureren voor implementatie in Azure Static Web Apps

Vereisten

Een opslagplaats maken

In dit artikel wordt een GitHub-opslagplaats gebruikt als bron voor het importeren van code in een GitLab-opslagplaats.

  1. Meld u aan bij uw GitLab-account en ga naar https://gitlab.com/projects/new#import_project

  2. Selecteer Opslagplaats op URL.

  3. Voer in het vak URL van de Git-opslagplaats de URL van de opslagplaats in voor uw keuze van framework.

  4. Voer in het vak Project slug my-first-static-web-app in.

  5. Selecteer Project maken en wacht even terwijl uw opslagplaats is ingesteld.

Statische web-app maken

Nu de opslagplaats is gemaakt, kunt u een statische web-app maken in de Azure-portal.

  1. Ga naar de Azure Portal.

  2. Selecteer Een resource maken.

  3. Zoek Static Web Apps.

  4. Selecteer Statische web-apps.

  5. Selecteer Maken.

  6. Begin in de sectie Basisbeginselen door de nieuwe app te configureren.

    Instelling Weergegeven als
    Azure-abonnement Selecteer uw Azure-abonnement.
    Resourcegroep Selecteer de koppeling Nieuwe maken en voer static-web-apps-gitlab in.
    Naam Voer my-first-static-web-app in.
    Abonnementtype Selecteer Gratis.
    Bron Selecteer Overige.

  7. Selecteer Controleren + maken.

  8. Selecteer Maken.

  9. Selecteer Naar resource.

  10. Selecteer Implementatietoken beheren.

  11. Kopieer de waarde van het implementatietoken en zet deze opzij in een editor voor later gebruik.

  12. Selecteer Sluiten in het venster Implementatietoken beheren.

De pijplijntaak maken in GitLab

Nu u uw implementatietoken hebt, voegt u een werkstroomtaak toe die verantwoordelijk is voor het bouwen en implementeren van uw site wanneer u wijzigingen aanbrengt.

Implementatietoken toevoegen

Zorg ervoor dat u bij het doorlopen van de volgende stappen de sectie omgevingen selecteert * . Het lijkt erop dat de standaardwaarde is all, maar u moet de vervolgkeuzelijst selecteren en handmatig kiezen *.

  1. Ga naar de opslagplaats in GitLab.

  2. Selecteer Instellingen.

  3. Selecteer CI/CD.

  4. Selecteer Uitvouwen naast de sectie Variabelen.

  5. Selecteer Variabele toevoegen.

  6. Voer in het vak Sleutel DEPLOYMENT_TOKEN in.

  7. Plak in het vak Waarde de waarde van het implementatietoken dat u in een vorige stap hebt opgeslagen.

  8. Selecteer Variabele toevoegen.

Bestand toevoegen

  1. Ga terug naar het hoofdscherm van uw opslagplaats in GitLab.

  2. Selecteer de knop Bewerken en kies Web IDE.

  3. Zorg ervoor dat de hoofdvertakking is geselecteerd in de vervolgkeuzelijst vertakking.

  4. Maak een nieuw bestand met de naam .gitlab-ci.yml in de hoofdmap van de opslagplaats. (Controleer of de bestandsextensie .yml.)

  5. Voer de volgende YAML in het bestand in.

    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."

    De volgende configuratie-eigenschappen worden gebruikt in het .gitlab-ci.yml-bestand om uw statische web-app te configureren.

    De $CI_PROJECT_DIR variabele wordt tijdens het buildproces toegewezen aan de locatie van de hoofdmap van de opslagplaats.

    Eigenschappen Beschrijving Voorbeeld Vereist
    APP_PATH Locatie van uw toepassingscode. Voer $CI_PROJECT_DIR/ in of uw toepassingsbroncode zich in de hoofdmap van de opslagplaats bevindt of $CI_PROJECT_DIR/app als uw toepassingscode zich in een map bevindt met de naam app. Ja
    API_PATH Locatie van uw Azure Functions-code. Voer $CI_PROJECT_DIR/api in of uw app-code zich in een map bevindt met de naam api. Nee
    OUTPUT_PATH Locatie van de build-uitvoermap ten opzichte van de APP_PATH. Als de broncode van uw toepassing zich bevindt en $CI_PROJECT_DIR/apphet buildscript bestanden naar de $CI_PROJECT_DIR/app/build map uitvoert, stelt u $CI_PROJECT_DIR/app/build deze in als de OUTPUT_PATH waarde. Nee
    API_TOKEN API-token voor implementatie. API_TOKEN: $DEPLOYMENT_TOKEN Ja

  6. Wijzigingen doorvoeren in de hoofdbranch en de web-IDE sluiten.

  7. Ga terug naar uw site en selecteer de menu-items Instellingen>> om de voortgang van uw implementatie weer te geven.

Zodra de implementatie is voltooid, kunt u uw website bekijken.

De website weergeven

Het implementeren van een statische app heeft twee aspecten. Met de eerste stap maakt u de onderliggende Azure-resources waaruit uw app bestaat. De tweede is een GitLab-werkstroom waarmee uw toepassing wordt gebouwd en gepubliceerd.

Voordat u naar uw nieuwe statische site kunt gaan, moet de implementatie-build eerst worden uitgevoerd.

In het overzichtsvenster van Static Web Apps wordt een reeks koppelingen weergegeven die u helpen te werken met uw web-app.

  1. Ga terug naar uw statische web-app in Azure Portal.

  2. Ga naar het venster Overzicht .

  3. Selecteer de koppeling onder het URL-label . Uw website wordt geladen op een nieuw tabblad.

Resources opschonen

Als u deze toepassing niet meer gaat gebruiken, kunt u het Azure Static Web Apps-exemplaar en alle bijbehorende services verwijderen door de resourcegroep te verwijderen.

  1. Selecteer de resourcegroep static-web-apps-gitlab in de sectie Overzicht .

  2. Selecteer Resourcegroep verwijderen boven aan het overzicht van de resourcegroep.

  3. Voer de naam van de resourcegroep static-web-apps-gitlab in in het bevestigingsdialoogvenster 'static-web-apps-gitlab'? wilt verwijderen.

  4. Selecteer Verwijderen.

Het verwijderen van de resourcegroep kan enkele minuten duren.

Volgende stappen

Een API toevoegen

  • Last updated on