Een statische web-app maken met een serverloze API

Artikel
10/21/2023

Leer hoe u lokaal kunt uitvoeren en vervolgens een statische web-app implementeert met een serverloze API in Azure. In deze zelfstudie wordt gebruikgemaakt van de preview-versie van het nieuwste Azure Functions Node.js-programmeermodel. Omdat in dit artikel een preview-versie van Azure Functions wordt gebruikt, wordt deze geïmplementeerd als een afzonderlijke app van de statische web-app.

Leer hoe u het volgende doet:

Een statische web-app (SWA) lokaal uitvoeren met een Azure Function-app
Lokaal proxy front-endaanvragen naar lokale back-end-API met behulp van de SWA CLI.
Implementeer en voer dezelfde code op afstand uit.

De proxy tussen de front-end en backend-endis die wordt geleverd door de CLI van de statische web-app biedt:

De URL in React /api/todo, geeft niet het server- of poortnummer voor de API op. Aanvragen die deze URL gebruiken, zijn lokaal succesvol omdat de SWA CLI de proxy voor u beheert.
Een lokale verificatieemulator bij toegang tot /.auth/login/<provider>
Routebeheer en autorisatie

Verificatie in dit voorbeeld

De verificatie in dit voorbeeld wordt geleverd voor front-endgebruikers van de Azure Static Web Apps-service:

Aanmelden/afmelden
Openbare en persoonlijke inhoud

Broncode in dit voorbeeld

De broncode in dit voorbeeld is bedoeld om te leren hoe u een statische web-app bouwt en implementeert met een serverloze API. De code is niet bedoeld voor productie.

U vindt verschillende plaatsen in de code die geen aanbevolen beveiligingsprocedures volgt. De code gebruikt console.log bijvoorbeeld om naar de browserconsole te schrijven.

Wanneer u overstapt naar een productieomgeving, moet u alle code controleren en verwijderen, die de aanbevolen beveiligingsprocedures voor uw organisatie schendt.

1. Uw ontwikkelomgeving voorbereiden

Maak de volgende accounts:

Azure-abonnement - Een gratis Azure-account maken
GitHub-account : u hebt een GitHub-account nodig om in deze zelfstudie te implementeren.

Installeer het volgende op uw lokale ontwikkelcomputer:

Node.js v18+
Visual Studio Code (VS Code)
Azure Static Web Apps (SWA) CLI wereldwijd geïnstalleerd met -g vlag
Azure Functions Core Tools v4.0.5095+ (indien lokaal uitgevoerd) is wereldwijd geïnstalleerd met vlag -g
TypeScript v4+

2. Fork de voorbeeldopslagplaats op GitHub

U moet uw eigen fork van de voorbeeldopslagplaats hebben om de implementatie vanuit GitHub te voltooien. Tijdens het forkproces hoeft u alleen de main vertakking te kopiëren.

Fork de voorbeeldopslagplaats: https://github.com/Azure-Samples/azure-typescript-e2e-apps.

3. Kloon de geforkte voorbeeldopslagplaats

Kloon in een bash-terminal uw geforkte opslagplaats naar uw lokale computer. Kloon de oorspronkelijke voorbeeldopslagplaats niet. Een voorbeeld-URL is https://github.com/YOUR-ACCOUNT-NAME/azure-typescript-e2e-apps
```
git clone YOUR-FORKED-REPO-URL
```
Installeer afhankelijkheden voor de lokale front-end-app:
```
cd app-react-vite && npm install 
```
Afhankelijkheden voor de lokale back-end-app installeren:
```
cd ../api-inmemory && npm install && cd ..
```

4. Optioneel, lokale app bouwen en uitvoeren

De voorbeeldopslagplaats heeft verschillende versies van de front-end- en back-end-apps. In de volgende stappen wordt de React 18-versie (Vite) van de front-end en de Azure Function v4 gebruikt met Node.js-versie van de back-end met de /status en /todo API-routes.

Gebruik vanuit de hoofdmap van de voorbeeld-app de SWA CLI met het ./swa-cli.config.json bestand om de front-end- en back-end-apps te bouwen:
```
swa build
```
Als er fouten optreden, wat kan gebeuren, afhankelijk van de versie van verschillende pakketten en uw omgeving, lost u de fouten op voordat u doorgaat. Het is belangrijk om te weten dat uw project lokaal wordt gebouwd voordat u overstapt op implementatie naar Azure Static Web Apps.
Gebruik de SWA CLI vanuit de hoofdmap van de voorbeeld-app om de apps te starten met een proxy.
```
swa start
```

Wanneer u de volgende regels in de bash-terminal ziet, is het project gestart.

[swa] Serving static content:
[swa]   /workspaces/azure-typescript-e2e-apps/app-react-vite/dist
[swa] 
[swa] Serving API:
[swa]   /workspaces/azure-typescript-e2e-apps/api-inmemory
[swa] 
[swa] Azure Static Web Apps emulator started at http://0.0.0.0:4280. Press CTRL+C to exit.

Open een webbrowser naar de geproxiede URL. http://localhost:4280 De volgende pagina wordt weergegeven:
U kunt zich aanmelden met behulp van verificatie die is geleverd door de SWA CLI. Met het proces wordt verificatie gesimuleerd in azure Static-web-apps in de cloud. De front-endcode gebruikt het /.auth/me eindpunt om de identiteit van de gebruiker op te halen. Voer een valse gebruikersnaam in en wijzig de rest van de velden niet.

Zodra een gebruiker is geverifieerd, geeft de front-end privégegevens weer, zoals de omgevingsvariabelen van de API.

Screenshot of local React app with authentication complete.

De broncode van de Azure Function v4-app voor deze API is:

import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";

import { name, version } from '../../package.json';
function isObject(v) {
    return '[object Object]' === Object.prototype.toString.call(v);
};
function sortJson(o){
    if (Array.isArray(o)) {
        return o.sort().map(sortJson);
    } else if (isObject(o)) {
        return Object
            .keys(o)
        .sort()
            .reduce(function(a, k) {
                a[k] = sortJson(o[k]);

                return a;
            }, {});
    }
    return o;
}

export async function status(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
    context.log(`Http function processed request for url "${request.url}"`);

    const sortedEnv = sortJson(process.env);

    return { jsonBody: {
        name,
        version,
        env: sortedEnv,
        requestHeaders: request.headers 
    }};
};

app.http('status', {
    route: "status",
    methods: ['GET'],
    authLevel: 'anonymous',
    handler: status
});

Vouw de openbare en persoonlijke secties uit om de inhoud van de API weer te geven.

5. Een nieuwe Azure Functions-app maken

De vorige sectie van het uitvoeren van de statische web-app met de API was optioneel. De resterende secties van het artikel zijn vereist voor het implementeren van de app en API in de Azure-cloud.

Als u de preview-versie van de Azure Functions v4-runtime wilt gebruiken, moet u een nieuwe Azure Functions-app maken. Uw statische web-app moet ook opnieuw worden opgebouwd en opnieuw worden geïmplementeerd om de URI van de Azure Functions-app te gebruiken in de fetch-aanvragen voor de API in plaats van een geproxiede en beheerde API te gebruiken.

Open de Azure-portal in een webbrowser om een nieuwe Azure Functions-app te maken: Nieuwe app maken

Gebruik de volgende informatie om de functie-app te maken:

Tabblad:Instelling	Weergegeven als
Basisbeginselen: Abonnement	Selecteer het abonnement dat u wilt gebruiken.
Basisbeginselen: Resourcegroep	Maak een nieuwe resourcegroep, zoals `first-static-web-app-with-api`. De naam wordt niet gebruikt in de openbare URL van de app. Resourcegroepen helpen u bij het groeperen en beheren van gerelateerde Azure-resources.
Basisbeginselen: Instantiedetails: Naam van functie-app	Voer een wereldwijd unieke naam in, zoals `swa-api` met 3 willekeurige tekens aan het einde, zoals `swa-api-123`.
Basisbeginselen: Instantiedetails: Code of container	Selecteer `Code`.
Basisbeginselen: Instantiedetails: Runtimestack	Selecteer `Node.js`.
Basisbeginselen: Instantiedetails: Runtimestack	Selecteer `18LTS`.
Basisbeginselen: Besturingssysteem	Selecteer `Linux`.
Basisbeginselen: Hosting	Selecteer `Consumption`.
Opslag: Opslagaccount	Wijzig deze naam niet. Er wordt een nieuw Azure Storage-account gemaakt om u te helpen bij functie-gebeurtenissen.
Netwerken	Niets veranderen.
Bewaking: Application Insights: Application Insights inschakelen	Selecteer `Yes`. Wijzig de opgegeven standaardnaam niet.
Implementatie: GitHub Actions Instellingen: Continue implementatie	Selecteer `Enable`.
Implementatie: GitHub-account	Selecteer uw GitHub-account.
Implementatie: Organisatie	Selecteer uw GitHub-account dat u hebt gebruikt bij het splitsen van de voorbeeldopslagplaats.
Implementatie: Opslagplaats	Selecteer de naam van de gesplitste opslagplaats. `azure-typescript-e2e-apps`
Implementatie: Vertakking	Selecteer `main`.
Codes	Niets veranderen.
Controleren en maken	Selecteer `Create`.

Met de stap wordt een GitHub Yaml-werkstroombestand toegevoegd aan uw geforkte opslagplaats.

Wanneer de resource is gemaakt, selecteert u de Go to resource knop.
Selecteer Instellingen -> Configuratie en voeg vervolgens een configuratie-instelling toe voor de Azure Function Node.js v4-runtime met naam AzureWebJobsFeatureFlags en waardeEnableWorkerIndexing.
Selecteer Opslaan om de instelling op te slaan.
Gebruik git in een bash-terminal om het nieuwe yaml-werkstroombestand op te halen uit uw GitHub-forked-opslagplaats naar uw lokale computer.
```
git pull origin main
```
Open in Visual Studio Code het nieuwe yaml-werkstroombestand in ./.github/workflows/.

In het standaardwerkstroombestand dat voor u wordt opgegeven, wordt ervan uitgegaan dat de broncode van de functie zich in de hoofdmap van de opslagplaats bevindt en de enige app in de opslagplaats is, maar dat is niet het geval bij dit voorbeeld. U kunt dit oplossen door het bestand te bewerken. De regels die u wilt bewerken, zijn gemarkeerd in het volgende yaml-blok en worden hieronder uitgelegd:

# Docs for the Azure Web Apps Deploy action: https://github.com/azure/functions-action
# More GitHub Actions for Azure: https://github.com/Azure/actions

# Deploy Azure Functions Node.js v4 runtime
# with api-inmemory subdir

name: Azure Function App - api-inmemory

on:
  push:
    branches:
      - main
    paths:
      - 'api-inmemory/**'
  workflow_dispatch:

env:
  AZURE_FUNCTIONAPP_PACKAGE_PATH: 'api-inmemory' # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: '18.x' # Azure Functions v4 runtime requires 18
  VERBOSE: true # For debugging

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 'Checkout GitHub Action'
        uses: actions/checkout@v2

      - name: Setup Node ${{ env.NODE_VERSION }} Environment
        uses: actions/setup-node@v1
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: 'Resolve Project Dependencies Using Npm'
        shell: bash
        run: |
          pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}'
          npm install
          npm run build --if-present
          npm run test --if-present
          popd
      - name: 'Upload artifact for deployment job' # For debugging
        uses: actions/upload-artifact@v3
        with:
          name: azure-function-v4-app
          path: |
            ${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}}
            !${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}}/node_modules
            !${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}}/dist          
      - name: 'Run Azure Functions Action'
        uses: Azure/functions-action@v1
        id: fa
        with:
          app-name: 'swa-api' # change this to your Azure Function app name
          slot-name: 'Production'
          package: ${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}}
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_123 }}
          scm-do-build-during-deployment: false
          enable-oryx-build: false

Eigenschapswijziging	Doel
`name`	Verkort de naam zodat u deze eenvoudig kunt vinden in de GitHub-actieslijst van uw fork.
`paths`	Voeg de sectie Paden toe om de implementatie alleen uit te voeren wanneer de Azure Functions API-code wordt gewijzigd. Wanneer u het werkstroombestand bewerkt, kunt u de implementatie handmatig activeren.
`AZURE_FUNCTIONAPP_PACKAGE_PATH`	Wanneer u een submap voor broncode gebruikt, moet dit het pad en de naam van de submap zijn.
`VERBOSE`	Deze instelling is handig voor het opsporen van fouten in het build- en implementatieproces.
stap met de naam `Upload artifact for deployment job`	Met deze stap maakt u een downloadbaar artefact. Dit is handig bij het opsporen van fouten in de bestanden die in uw Azure-functie worden geïmplementeerd.

De Upload artifact for deployment job optie is optioneel. Het wordt gebruikt om te begrijpen en fouten op te sporen in welke bestanden worden geïmplementeerd in Azure Functions of om deze bestanden in een afzonderlijke omgeving te gebruiken.

Sla het bestand vervolgens op, voer het door en push het terug naar GitHub met git:
```
git add .
git commit -m "fix the workflow for a subdir"
git push origin main
```
Voer vanuit een browser de werkstroom opnieuw uit op GitHub in het actiegebied van uw fork.
Wacht totdat de actie is voltooid voordat u doorgaat.
Gebruik in een webbrowser het externe API-eindpunt van uw functie-app om te controleren of de app is geïmplementeerd.
```
https://YOUR-FUNCTION-APP-NAME.azurewebsites.net/api/todo
```
Het JSON-resultaat dat wordt geretourneerd voor de in-memory gegevens is:
```
{
    "1": "Say hello"
}
```
Noteer de URL van uw functie. U hebt dat nodig in de volgende sectie.
U weet dat uw Azure Function-app werkt in de cloud. Nu moet u uw statische web-app maken in de cloud om de API te kunnen gebruiken.

6. Een nieuwe Statische Azure-web-app maken

Met dit maakproces wordt dezelfde geforkte GitHub-voorbeeldopslagplaats geïmplementeerd in Azure. U configureert de implementatie zodanig dat alleen de front-end-app wordt gebruikt.

Open Azure Portal en meld u aan met uw Azure-account: Azure Portal.

Gebruik de volgende informatie om de stappen voor het maken te voltooien:

Prompt	Instelling
Abonnement	Selecteer het abonnement dat u wilt gebruiken.
Resourcegroep	Selecteer `Create new` en voer een nieuwe in voor de resourcegroep, zoals `first-static-web-app`. De naam wordt niet gebruikt in de openbare URL van de app. Met resourcegroepen kunt u resources groeperen die worden gebruikt voor één project.
Type hostingabonnement	`Free` selecteren
Details van Azure Functions en fasering	Wijzig de standaardwaarde niet. U implementeert de functie-API niet in de statische web-app.
Implementatiedetails - bron	`GitHub` selecteren
Implementatiedetails - GitHub	Meld u indien nodig aan bij GitHub.
Implementatiedetails - Organisatie	Selecteer uw GitHub-account.
Implementatiedetails - Opslagplaats	Selecteer de geforkte opslagplaats met de naam `azure-typescript-e2e-apps`.
Implementatiedetails - Vertakking	Selecteer de `main` vertakking.
Builddetails - Build Presents	Selecteer `Custom`.
Builddetails - App-locatie	Voer `/app-react-vite` in.
Builddetails - Api-locatie	Leeg laten
Builddetails - Uitvoerlocatie	Voer de locatie in van de uitvoermap van de front-end. `dist`

Selecteer Controleren en maken en selecteer vervolgens Maken.
Wanneer de resource is gemaakt, selecteert u de Go to resource knop.
Noteer op de pagina Overzicht de URL van uw statische web-app. U hebt dat nodig in de volgende sectie wanneer u de CORS-instelling van de Azure-functie instelt.
Tijdens het aanmaakproces wordt een GitHub Yaml-werkstroombestand gemaakt in uw geforkte GitHub-opslagplaats. Trek die wijziging omlaag met de volgende opdracht:
```
git pull origin main
```

De GitHub-actie ./.github/workflows/azure-static-web-apps-*.yml op is verantwoordelijk voor het bouwen en implementeren van de front-end-app. Bewerk het bestand om een omgevingsvariabele toe te voegen voor de back-end-API-URL in de cloud. De regels die u wilt bewerken, zijn gemarkeerd in het volgende yaml-blok en worden hieronder het yaml-blok uitgelegd.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
    paths:
      - 'app-react-vite/**'
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main
    paths:
      - 'app-react-vite/**'      
  workflow_dispatch:

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || github.event_name == 'workflow_dispatch' || (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_ORANGE_DUNE_123 }}
          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 your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/app-react-vite" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "dist" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env: 
          VITE_BACKEND_URI: https://swa-api-123.azurewebsites.net
          VITE_CLOUD_ENV: production

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_DUNE_123 }}
          action: "close"

Eigenschapswijziging	Doel
`paths`	Voeg de sectie Paden toe om de implementatie alleen uit te voeren wanneer de Azure Functions API-code wordt gewijzigd. Wanneer u het werkstroombestand bewerkt, kunt u de implementatie handmatig activeren.
`workflow_dispatch`	Voeg alleen toe `workflow_dispatch`tijdens het leren van het implementatieproces en het opsporen van fouten in de Vite-build. Verwijder deze regel wanneer u verdergaat met deze broncode dan dit artikel.
`if ... \|\| github.event_name == 'workflow_dispatch'`	Neem de `workflow_dispatch` gebeurtenis op die alleen mag worden gegenereerd tijdens het leren van het implementatieproces en het opsporen van fouten in de Vite-build.
`env`	Voeg de omgevingsvariabelen toe die nodig zijn om de URL van de Azure Function-API op te nemen in de statische build met Vite. VITE_BACKEND_URL is de URL van uw Azure Function-app. VITE_CLOUD_ENV is een parameter die aangeeft wanneer de VITE_BACKEND_URL-URL moet worden gebruikt. Gebruik geen NODE_ENV voor dit voorbeeld, omdat dit onbedoelde gevolgen heeft.

Sla het bestand vervolgens op, voer het door en push het terug naar GitHub met git:
```
git add .
git commit -m "fix the workflow for a subdir"
git push origin main
```
Voer vanuit een browser de werkstroom opnieuw uit op GitHub in het actiegebied van uw fork voor uw statische web-app.
Uw front-end-app wordt geïmplementeerd in Azure. U moet nu de Azure Function-app configureren om CORS-aanvragen van uw statische web-app toe te staan.

7. CORS configureren voor uw Azure Function-app

Wanneer u een afzonderlijke Azure Function-app gebruikt in plaats van een beheerde functie-app, moet u CORS configureren om aanvragen van uw statische web-app toe te staan.

Open uw Azure Function-app in Azure Portal.
Voeg in de sectie API -> CORS de URL van uw statische web-app toe aan de lijst met toegestane oorsprongen.

8. Uw statische web-app testen

Open uw statische web-app in een browser.
Interactie met de app om u aan te melden, openbare en persoonlijke gegevens weer te geven en u opnieuw af te melden.

9. Alle resources opschonen die in deze reeks artikelen worden gebruikt

Alle resources opschonen die in deze reeks artikelen zijn gemaakt.

Verwijder uw resourcegroep in Azure Portal, waarmee de statische web-app en de functie-app worden verwijderd.
Verwijder uw gesplitste opslagplaats in de GitHub-portal.

Problemen oplossen

In dit voorbeeld wordt een lijst met bekende problemen en oplossingen bijgehouden. Als uw probleem niet wordt vermeld, opent u een probleem.

Openbare URL's voor statische web-apps en functie-apps

U kunt de URL van uw statische web-app en de URL van uw functie-app altijd vinden in Azure Portal, op de overzichtspagina van elke resource. Deze URL's zijn standaard openbaar.