Een statische web-app maken met een serverloze API
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.
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, zoalsswa-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: Instellingen voor GitHub Actions: 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
.Tags 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 voegt vervolgens een configuratie-instelling toe voor de Azure-functie Node.js v4-runtime met de 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, zoalsfirst-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 Selecteer Free
Details van Azure Functions en fasering Wijzig de standaardwaarde niet. U implementeert de functie-API niet in de statische web-app. Implementatiedetails - bron Selecteer GitHub
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.
Probleemoplossing
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.