Een afbeelding uploaden naar een Azure Storage-blob met JavaScript

Artikel
12/06/2023

Gebruik een statische web-app om een bestand te uploaden naar een Azure Storage-blob met behulp van een Azure Storage -@azure-/storage-blob npm-pakket met een AZURE Storage SAS-token.

Vereisten

Een Azure-abonnement. Als u nog geen Azure-abonnement hebt, kunt u zich aanmelden voor een gratis Azure-account.
GitHub-account voor fork en push naar een opslagplaats.

Toepassingsarchitectuur

Deze toepassingsarchitectuur bevat twee Azure-resources:

Azure Static Web Apps voor de statisch gegenereerde clienttoepassing. De resource biedt ook de beheerde Azure Functions-API. Beheerd betekent dat de Static Web Apps-resource de API-resource voor eigen gebruik beheert.
Azure Storage voor de blobopslag.

Diagram showing how a customer interacts from their computer to use the website to upload a file to Azure Storage directly.

Stap	Omschrijving
1	De klant maakt verbinding met de statisch gegenereerde website. De website wordt gehost in Azure Static Web Apps.
2	De klant gebruikt die website om een bestand te selecteren dat moet worden geüpload. Voor deze zelfstudie is het front-endframework Vite React en het geüploade bestand is een afbeeldingsbestand.
3	De website roept de Azure Functions-API`sas` aan om een SAS-token op te halen op basis van de exacte bestandsnaam van het bestand dat moet worden geüpload. De serverloze API maakt gebruik van de Azure Blob Storage SDK om het SAS-token te maken. De API retourneert de volledige URL die moet worden gebruikt om het bestand te uploaden, inclusief het SAS-token als de querytekenreeks. `https://YOUR-STORAGE-NAME.blob.core.windows.net/YOUR-CONTAINER/YOUR-FILE-NAME?YOUR-SAS-TOKEN`
4	De front-endwebsite maakt gebruik van de SAS-token-URL om het bestand rechtstreeks te uploaden naar Azure Blob Storage.

Lokale omgevingen en omgevingen bouwen

In deze zelfstudie worden de volgende omgevingen gebruikt:

Lokale ontwikkeling met GitHub Codespaces of Visual Studio Code.
Bouwen en implementeren met GitHub Actions.

1. Opslagplaats voor fork-voorbeeldtoepassingen met GitHub

In deze zelfstudie worden GitHub-acties gebruikt om de voorbeeldtoepassing in Azure te implementeren. U hebt een GitHub-account en een fork van de opslagplaats van de voorbeeldtoepassing nodig om die implementatie te voltooien.

Gebruik in een webbrowser de volgende koppeling om de fork te starten voor uw eigen account van de voorbeeldopslagplaats: Azure-Samples/azure-typescript-e2e-apps.
Voer de stappen uit om het voorbeeld alleen te forkeren met de hoofdbranch .

2. Ontwikkelomgeving configureren

Een ontwikkelcontaineromgeving is beschikbaar met alle afhankelijkheden die nodig zijn om elke oefening in dit project te voltooien. U kunt de ontwikkelcontainer uitvoeren in GitHub Codespaces of lokaal met behulp van Visual Studio Code.

GitHub Codespaces
Visual Studio Code

GitHub Codespaces voert een ontwikkelcontainer uit die wordt beheerd door GitHub met Visual Studio Code voor het web als de gebruikersinterface. Voor de eenvoudigste ontwikkelomgeving gebruikt u GitHub Codespaces zodat u de juiste ontwikkelhulpprogramma's en afhankelijkheden vooraf hebt geïnstalleerd om deze trainingsmodule te voltooien.

Belangrijk

Alle GitHub-accounts kunnen Codespaces elke maand maximaal 60 uur gratis gebruiken met 2 kernexemplaren. Zie GitHub Codespaces maandelijks inbegrepen opslag- en kernuren voor meer informatie.

Start in een webbrowser op uw GitHub-fork van de voorbeeldopslagplaats het proces om een nieuwe GitHub Codespace te maken op de main vertakking van uw fork door de knop CODE te selecteren.
Selecteer op het tabblad Codespaces het beletselteken. ...
Selecteer + Nieuw met opties om een specifieke Codespaces dev-container te selecteren.
Selecteer de volgende opties en selecteer vervolgens Codespace maken.
- Branch: main
- Configuratie van dev-container: Tutorial: Upload file to storage with SAS Token
- Regio: standaard accepteren
- Type machine: standaard accepteren
Wacht tot de coderuimte is gestart. Dit opstartproces kan enkele minuten duren.
Open een nieuwe terminal in de codespace.

Tip

U kunt het hoofdmenu gebruiken om naar de menuoptie Terminal te navigeren en vervolgens de optie Nieuwe terminal te selecteren.
Controleer de versies van de hulpprogramma's die u in deze zelfstudie gebruikt.
```
node --version
npm --version
func --version
```
Voor deze zelfstudie zijn de volgende versies van elk hulpprogramma vereist, die vooraf zijn geïnstalleerd in uw omgeving:

Hulpprogramma Versie

Node.js ≥ 18

npm ≥ 9,5

Azure Functions-kernhulpprogramma's ≥ 4,5098
Sluit de terminal.
De resterende stappen in deze zelfstudie vinden plaats in de context van deze ontwikkelingscontainer.

Hulpprogramma	Versie
Node.js	≥ 18
npm	≥ 9,5
Azure Functions-kernhulpprogramma's	≥ 4,5098

Voor de Dev Containers-extensie voor Visual Studio Code moet Docker op uw lokale computer worden geïnstalleerd. De extensie host de ontwikkelcontainer lokaal met behulp van de Docker-host met de juiste ontwikkelhulpprogramma's en afhankelijkheden die vooraf zijn geïnstalleerd om deze trainingsmodule te voltooien.

Open Visual Studio Code in de context van een lege map.
Zorg ervoor dat de Dev Containers-extensie is geïnstalleerd in Visual Studio Code.
Open een nieuwe terminal in de editor.

Tip

U kunt het hoofdmenu gebruiken om naar de menuoptie Terminal te navigeren en vervolgens de optie Nieuwe terminal te selecteren.
Kloon uw fork naar de huidige map. Vervang YOUR-ACCOUNT in de volgende opdracht door uw accountnaam.
```
git clone https://github.com/YOUR-ACCOUNT/azure-typescript-e2e-apps
```
Open het opdrachtenpalet, zoek naar de Dev Containers-opdrachten en selecteer vervolgens Dev Containers: Opnieuw openen in container.

Tip

Visual Studio Code kan u mogelijk automatisch vragen om de bestaande map in een ontwikkelingscontainer opnieuw te openen. Dit is functioneel gelijk aan het gebruik van het opdrachtpalet om de huidige werkruimte in een container opnieuw te openen.
Controleer de versies van de hulpprogramma's die u in deze zelfstudie gebruikt.
```
node --version
npm --version
func --version
```
Voor deze zelfstudie zijn de volgende versies van elk hulpprogramma vereist, die vooraf zijn geïnstalleerd in uw omgeving:

Hulpprogramma Versie

Node.js ≥ 18

npm ≥ 9,5

Azure Functions-kernhulpprogramma's ≥ 4,5098
Sluit de terminal.
De resterende stappen in deze zelfstudie vinden plaats in de context van deze ontwikkelingscontainer.

Hulpprogramma	Versie
Node.js	≥ 18
npm	≥ 9,5
Azure Functions-kernhulpprogramma's	≥ 4,5098

3. Afhankelijkheden installeren

De voorbeeld-app voor deze zelfstudie bevindt zich in de azure-upload-file-to-storage map. U hoeft geen andere mappen in het project te gebruiken.

Open in Visual Studio Code een terminal en ga naar de projectmap.
```
cd azure-upload-file-to-storage
```
Splits de terminal zodat u twee terminals hebt, één voor de client-app en één voor de API-app.
Voer in een van de terminals de volgende opdracht uit om de afhankelijkheden van de API-app te installeren en de app uit te voeren.
```
cd api && npm install
```
Voer in de andere terminal de opdracht uit om de client-app te installeren.
```
cd app && npm install
```

4. Opslagresource maken met Visual Studio-extensie

Maak de Opslagresource die u wilt gebruiken met de voorbeeld-app. De opslag wordt gebruikt voor:

Triggers in de Azure Functions-app
Blob -opslag (bestand)

Navigeer naar de Azure Storage-extensie.
Meld u indien nodig aan bij Azure.
Klik met de rechtermuisknop op het abonnement en selecteer Create Resource....
Selecteer Opslagaccount maken in de lijst.

Volg de aanwijzingen in de volgende tabel om te begrijpen hoe u uw opslagresource maakt.

Eigenschappen	Weergegeven als
Voer een wereldwijd unieke naam in voor de nieuwe web-app.	Voer een unieke waarde in, bijvoorbeeld `fileuploadstor`voor de naam van uw opslagresource. Deze unieke naam is de resourcenaam die in de volgende sectie wordt gebruikt. Gebruik alleen tekens en cijfers, tot 24 tekens lang. U hebt deze accountnaam nodig om later te gebruiken.
Selecteer een locatie voor nieuwe resources.	Gebruik de aanbevolen locatie.

Wanneer het proces voor het maken van de app is voltooid, wordt er een melding weergegeven met informatie over de nieuwe resource.

5. Opslag-CORS configureren

Omdat de browser wordt gebruikt om het bestand te uploaden, moet het Azure Storage-account CORS configureren om cross-origin-aanvragen toe te staan.

Navigeer naar de Azure Storage-extensie. Klik met de rechtermuisknop op uw opslagresource en selecteer Openen in de portal.
Selecteer in de sectie Azure Portal-opslagaccount Instellingen de optie Resource delen (CORS).
Gebruik de volgende eigenschappen om CORS in te stellen voor deze zelfstudie.
- Toegestane oorsprongen: *
- Toegestane methoden: Alle behalve patch
- Toegestane headers: *
- Weergegeven headers: *
- Maximale leeftijd: 86400
Deze instellingen worden gebruikt voor deze zelfstudie om de stappen te vereenvoudigen en zijn niet bedoeld om aanbevolen procedures of beveiliging aan te geven. Meer informatie over CORS voor Azure Storage.
Selecteer Opslaan.

6. Anonieme toegang verlenen tot opslag

Het uploaden van bestanden wordt beveiligd vanaf de client wanneer u een tijdslimiet en een beperkt SAS-token maakt. Zodra het bestand echter is geüpload, wilt u in dit zelfstudiescenario dat iedereen het kan zien. Hiervoor moet u de opslagmachtiging wijzigen zodat deze openbaar toegankelijk is.

Hoewel het account openbaar toegankelijk is, kunnen elke container en elke blob privétoegang hebben. Een veiligere methode, maar te ingewikkeld voor deze zelfstudie is om te uploaden naar één opslagaccount met het SAS-token en de blob vervolgens te verplaatsen naar een ander opslagaccount met openbare toegang.

Als u openbare toegang wilt inschakelen in Azure Portal, selecteert u de pagina Overzicht voor uw opslagaccount, selecteert u in de sectie Eigenschappen de optie Anonieme blobtoegang en selecteert u Uitgeschakeld.
Schakel op de pagina Configuratie anonieme toegang tot Blob toestaan in.

7. Uploadcontainer maken

Selecteer Containers in de sectie Gegevensopslag in het opslagaccount van Azure Portal.
Selecteer + Container om uw upload container te maken met de volgende instellingen:
- Naam: upload
- Niveau openbare toegang: Blob
Selecteer Maken.

8. Uzelf toegang verlenen tot blobgegevens

Tijdens het maken van de resource bent u niet gemachtigd om de inhoud van de container weer te geven. Dat is gereserveerd voor specifieke IAM-rollen. Voeg uw account toe zodat u de blobs in de containers kunt bekijken.

Selecteer Toegangsbeheer (IAM) in het Azure Portal-opslagaccount.
Selecteer Roltoewijzingen toevoegen.
Zoek en selecteer Inzender voor Opslagblobgegevens. Selecteer Volgende.
Selecteer + Leden selecteren.
Zoek en selecteer uw account.
Selecteer Controleren + toewijzen.
Selecteer Containers en vervolgens de uploadcontainer . U moet kunnen zien dat er geen blobs in de container zijn zonder autorisatiefouten.

9. Opslagresourcereferenties ophalen

De opslagresourcereferenties worden gebruikt in de Azure Functions API-app om verbinding te maken met de Storage-resource.

Terwijl u zich nog in Azure Portal bevindt, selecteert u toegangssleutels in de sectie Beveiliging en netwerken.
Onthoud dat de API-bestanden zijn gevonden op ./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/api.
Wijzig de naam van het bestand in local.settings.json.sample de API-map in local.settings.json. Het bestand wordt genegeerd door Git, zodat het niet wordt ingecheckt bij broncodebeheer.

Werk de instellingen voor local.settings.json het gebruik van de volgende tabel bij.

Eigenschappen	Weergegeven als	Beschrijving
Azure_Storage_AccountName	Azure Storage-accountnaam, bijvoorbeeld: `fileuploadstor`.	Wordt gebruikt in broncode om verbinding te maken met opslagresource.
Azure_Storage_AccountKey	Azure Storage-accountsleutel	Wordt gebruikt in broncode om verbinding te maken met opslagresource.
AzureWebJobsStorage	Azure Storage-account verbindingsreeks	Gebruik door Azure Functions Runtime om de status en logboeken op te slaan.

Het lijkt erop dat u dezelfde accountreferenties twee keer hebt ingevoerd, één keer als een sleutel en één keer als een verbindingsreeks. U hebt het gedaan, maar specifiek voor deze eenvoudige zelfstudie. Over het algemeen moeten Azure Functions-apps een afzonderlijke opslagresource hebben die niet opnieuw wordt gebruikt voor een ander doel. Wanneer u de Azure Function-resource verderop in de zelfstudie maakt, hoeft u de AzureWebJobsStorage-waarde niet in te stellen voor de cloudresource. U hoeft alleen de Azure_Storage_AccountName en Azure_Storage_AccountKey waarden in te stellen die worden gebruikt in de broncode.

10. Voer de API-app uit

Voer de Functions-app uit om ervoor te zorgen dat deze correct werkt voordat u deze implementeert in Azure.

Voer in de terminal van de API-app de volgende opdracht uit om de API-app te starten.
```
npm run start
```
Wacht totdat de Azure Functions-app is gestart. U ziet dat de poort van de Azure Functions-app 7071 nu beschikbaar is. U ziet ook de API's die worden vermeld in de terminal voor de API-app.
```
Functions:

        list: [POST,GET] http://localhost:7071/api/list

        sas: [POST,GET] http://localhost:7071/api/sas

        status: [GET] http://localhost:7071/api/status
```
Selecteer het tabblad Poorten in het onderste deelvenster en klik met de rechtermuisknop op de poort 7071 en selecteer Poortzichtbaarheid en selecteer Vervolgens Openbaar.

Als u deze app niet openbaar maakt, krijgt u een foutmelding wanneer u de API van de client-app gebruikt.
Als u wilt testen of de API werkt en verbinding maakt met opslag, selecteert u op het tabblad Poorten in het onderste deelvenster het wereldbolpictogram in het gebied Lokaal adres voor poort 7071. Hiermee opent u een webbrowser naar de functions-app.
Voeg de API-route toe aan de URL-adresbalk: /api/sas?container=upload&file=test.png. Het bestand bevindt zich nog niet in de container. De API maakt het SAS-token op basis van de locatie waarnaar u het wilt uploaden.

Het JSON-antwoord moet er ongeveer als volgt uitzien:

{
    "url":"https://YOUR-STORAGE-RESOURCE.blob.core.windows.net/upload/test.png?sv=2023-01-03&spr=https&st=2023-07-26T22%3A15%3A59Z&se=2023-07-26T22%3A25%3A59Z&sr=b&sp=w&sig=j3Yc..."
}

Kopieer de basis van de API-URL in de adresbalk van de browser (niet de SAS-token-URL in het JSON-object) die u in de volgende stap wilt gebruiken. De basis-URL is al eerder /api/sas.

11. De client-app configureren en uitvoeren

Wijzig de naam van het ./azure-upload-file-to-storage/app/.env.sample bestand in .env.
Open het .env bestand en plak de basis-URL uit de vorige sectie als de waarde voor de VITE_API_SERVER.

Een voorbeeld van een Codespaces-omgeving kan er ongeveer uitzien als VITE_API_SERVER=https://improved-space-fishstick-pgvxvxjpqgrh6qxp-7071.app.github.dev
Start in de andere gesplitste terminal de client-app met de volgende opdracht:
```
npm run dev
```

Wacht totdat de terminal de volgende melding retourneert dat de app beschikbaar is op poort 5173.

  VITE v4.4.4  ready in 410 ms

  ➜  Local:   https://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Selecteer het tabblad Poorten in het onderste deelvenster en klik met de rechtermuisknop op de poort 5173 en selecteer het wereldbolpictogram.
U ziet nu de eenvoudige web-app.
Interactie met de web-app:
- Selecteer een afbeeldingsbestand (*.jpg of *.png) van uw lokale computer om te uploaden.
- Selecteer de knop Een SAS ophalen om een SAS-token aan te vragen vanuit de API-app. Het antwoord toont de volledige URL die moet worden gebruikt om het bestand te uploaden naar Storage.
- Selecteer de knop Uploaden om het afbeeldingsbestand rechtstreeks naar Storage te verzenden.
De client-app en de API-app werken samen in een containeromgeving voor ontwikkelaars.

12. Codewijzigingen doorvoeren

Open in Visual Studio Code het tabblad Broncodebeheer .
Selecteer het + pictogram om alle wijzigingen klaar te maken. Deze wijzigingen mogen alleen nieuwe package-lock.json-bestanden voor de app en api mappen voor deze zelfstudie bevatten.

13. Statische web-app implementeren in Azure

De Azure Functions-app maakt gebruik van een preview-functie. Deze moet worden geïmplementeerd in VS - west 2 om goed te kunnen functioneren.

Selecteer in Visual Studio Code de Azure-verkenner.
Klik in Azure Explorer met de rechtermuisknop op de naam van het abonnement en selecteer Create Resource....
Selecteer Statische web-app maken in de lijst.

Volg de aanwijzingen in de volgende tabel om te begrijpen hoe u uw statische web-app-resource maakt.

Eigenschappen	Weergegeven als
Voer een wereldwijd unieke naam in voor de nieuwe web-app.	Voer een unieke waarde in, bijvoorbeeld `fileuploadstor`voor de naam van uw opslagresource. Deze unieke naam is de resourcenaam die in de volgende sectie wordt gebruikt. Gebruik alleen tekens en cijfers, tot 24 tekens lang. U hebt deze accountnaam nodig om later te gebruiken.
Selecteer een locatie voor nieuwe resources.	Gebruik de aanbevolen locatie.

Volg de aanwijzingen om de volgende informatie op te geven:

Prompt	Enter
Selecteer een resourcegroep voor nieuwe resources.	Gebruik de resourcegroep die u hebt gemaakt voor uw opslagresource.
Voer de naam in voor de nieuwe statische web-app.	Accepteer de standaardnaam.
Een SKU selecteren	Selecteer de gratis SKU voor deze zelfstudie. Als u al een gratis Static Web App-resource in uw abonnement hebt, selecteert u de volgende prijscategorie.
Kies vooraf ingestelde build om de standaardprojectstructuur te configureren.	Selecteer Aangepast.
Selecteer de locatie van uw toepassingscode	`azure-upload-file-to-storage/app`
Selecteer de locatie van uw Azure Functions-code	`azure-upload-file-to-storage/api`
Voer het pad van de build-uitvoer in...	`dist` Dit is het pad van uw app naar uw statische (gegenereerde) bestanden.
Selecteer een locatie voor nieuwe resources.	Selecteer een regio bij u in de buurt.

Wanneer het proces is voltooid, wordt er een pop-upmelding weergegeven. Selecteer De werkstroom weergeven/bewerken.
Uw externe fork heeft een nieuw werkstroombestand voor implementatie in Static Web Apps. Sleep dat bestand naar uw omgeving met de volgende opdracht in de terminal:
```
git pull origin main
```
Open het werkstroombestand op /.github/workflows/.

Controleer of de sectie van de werkstroom die specifiek is voor de statische web-app van deze zelfstudie er als volgt uitziet:

###### 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: "/azure-upload-file-to-storage/app" # App source code path
api_location: "/azure-upload-file-to-storage/api" # Api source code path - optional
output_location: "dist" # Built app content directory - optional
###### End of Repository/Build Configurations ######

Ga naar uw GitHub-fork van het voorbeeld https://github.com/YOUR-ACCOUNT/azure-typescript-e2e-apps/actions om te controleren of de build- en implementatieactie, met de naam Azure Static Web Apps CI/CD, is voltooid. Dit kan enkele minuten duren.
Ga naar azure Portal voor uw app en bekijk de sectie API's van Instellingen. De naam van de back-endresource in de productieomgeving (managed) geeft aan dat uw API's zijn geïmplementeerd.
Selecteer (beheerd) om de lijst met API's weer te geven die in de app zijn geladen:
- lijst
- Sas
- status
Ga naar de pagina Overzicht om de URL voor uw geïmplementeerde app te vinden.
De implementatie van de app is voltooid.

14. API configureren met opslagresourcenaam en -sleutel

De app heeft de naam en sleutel van de Azure Storage-resource nodig voordat de API correct werkt.

Klik nog steeds in Azure Explorer met de rechtermuisknop op de resource statische web-app en selecteer Openen in de portal.
Selecteer Configuratie in de sectie Instellingen.

Voeg toepassingsinstellingen toe met behulp van de volgende tabel.

Eigenschappen	Weergegeven als	Beschrijving
Azure_Storage_AccountName	Azure Storage-accountnaam, bijvoorbeeld: `fileuploadstor`.	Wordt gebruikt in broncode om verbinding te maken met opslagresource.
Azure_Storage_AccountKey	Azure Storage-accountsleutel	Wordt gebruikt in broncode om verbinding te maken met opslagresource.

Selecteer Opslaan op de pagina Configuratie om beide instellingen op te slaan.

Notitie

U hoeft de env-variabele van de client-app niet in te stellen VITE_API_SERVER omdat de client-app en de API worden gehost vanuit hetzelfde domein.

15. De door Azure geïmplementeerde statische web-app gebruiken

Controleer of de implementatie en configuratie is geslaagd met behulp van de website.

Klik in Visual Studio Code met de rechtermuisknop op uw statische web-app in Azure Explorer en selecteer Site bladeren.
Selecteer Bestand kiezen in het nieuwe browservenster en selecteer vervolgens een afbeeldingsbestand (*.png of *.jpg) dat u wilt uploaden.
Selecteer Sas-token ophalen. Met deze actie wordt de bestandsnaam doorgegeven aan de API en ontvangt u de SAS-token-URL die nodig is om het bestand te uploaden.
Selecteer Bestand uploaden om de SAS-token-URL te gebruiken om het bestand te uploaden. In de browser worden de miniatuur en URL van het geüploade bestand weergegeven.

16. Resources opschonen

In Visual Studio Code gebruikt u Azure Explorer voor resourcegroepen, klikt u met de rechtermuisknop op uw resourcegroep en selecteert u Verwijderen.

Hiermee verwijdert u alle resources in de groep, inclusief uw opslag- en statische web-app-resources.

Problemen oplossen

Meld problemen met dit voorbeeld in de GitHub-opslagplaats die hieronder wordt vermeld. Neem het volgende op met het probleem:

De URL van het artikel
De stap of context in het artikel dat problematisch was
Uw ontwikkelomgeving

Voorbeeldcode

GitHub-opslagplaats: azure-upload-file-to-storage

Als u wilt doorgaan met deze app, leert u hoe u de app implementeert in Azure voor hosting met een van de volgende opties:

Documentatie voor Azure Blob Storage
@azure/storage-blob
- NPM-pakket
Azure Static Web-app

Een afbeelding uploaden naar een Azure Storage-blob met JavaScript

Vereisten

Toepassingsarchitectuur

Lokale omgevingen en omgevingen bouwen

1. Opslagplaats voor fork-voorbeeldtoepassingen met GitHub

2. Ontwikkelomgeving configureren

3. Afhankelijkheden installeren

4. Opslagresource maken met Visual Studio-extensie

5. Opslag-CORS configureren

6. Anonieme toegang verlenen tot opslag

7. Uploadcontainer maken

8. Uzelf toegang verlenen tot blobgegevens

9. Opslagresourcereferenties ophalen

10. Voer de API-app uit

11. De client-app configureren en uitvoeren

12. Codewijzigingen doorvoeren

13. Statische web-app implementeren in Azure

14. API configureren met opslagresourcenaam en -sleutel

15. De door Azure geïmplementeerde statische web-app gebruiken

16. Resources opschonen

Problemen oplossen

Voorbeeldcode

Feedback

Feedback

Aanvullende resources

Een afbeelding uploaden naar een Azure Storage-blob met JavaScript

Vereisten

Toepassingsarchitectuur

Lokale omgevingen en omgevingen bouwen

1. Opslagplaats voor fork-voorbeeldtoepassingen met GitHub

2. Ontwikkelomgeving configureren

3. Afhankelijkheden installeren

4. Opslagresource maken met Visual Studio-extensie

5. Opslag-CORS configureren

6. Anonieme toegang verlenen tot opslag

7. Uploadcontainer maken

8. Uzelf toegang verlenen tot blobgegevens

9. Opslagresourcereferenties ophalen

10. Voer de API-app uit

11. De client-app configureren en uitvoeren

12. Codewijzigingen doorvoeren

13. Statische web-app implementeren in Azure

14. API configureren met opslagresourcenaam en -sleutel

15. De door Azure geïmplementeerde statische web-app gebruiken

16. Resources opschonen

Problemen oplossen

Voorbeeldcode

Gerelateerde inhoud

Feedback

Feedback

Aanvullende resources