Självstudie: Förbereda en webbapp för Azure Communication Services (Node.js)

Du kan använda Azure Communication Services för att lägga till realtidskommunikation i dina program. I den här självstudien får du lära dig hur du konfigurerar ett webbprogram som stöder Azure Communication Services. Det här är en introduktionskurs för nya utvecklare som vill komma igång med realtidskommunikation.

I slutet av den här självstudien har du ett baslinjewebbprogram som har konfigurerats med Azure Communication Services SDK:er. Du kan sedan använda programmet för att börja skapa din kommunikationslösning i realtid.

Besök gärna GitHub-sidan för Azure Communication Services för att ge feedback.

I den här självstudien lär du dig att:

Konfigurera utvecklingsmiljön.
Konfigurera en lokal webbserver.
Lägg till Azure Communication Services-paketen på din webbplats.
Publicera din webbplats på statiska Azure-webbplatser.

Prerequisites

Ett Azure-konto med en aktiv prenumeration. Mer information finns i Skapa ett konto kostnadsfritt. Det kostnadsfria kontot ger dig 200 USD i Azure-krediter för att prova valfri kombination av tjänster.
Visual Studio Code för redigering av kod i din lokala utvecklingsmiljö.
webpack för att paketera och lokalt vara värd för din kod.
Node.js för att installera och hantera beroenden som Azure Communication Services SDK:er och webbpaket.
nvm och npm för att hantera versionskontroll.
Azure Storage-tillägget för Visual Studio Code. Du behöver det här tillägget för att publicera ditt program i Azure Storage. Läs mer om att vara värd för statiska webbplatser i Azure Storage.
Azure App Service-tillägget. Tillägget gör det möjligt att distribuera webbplatser med alternativet att konfigurera fullständigt hanterad kontinuerlig integrering och kontinuerlig leverans (CI/CD).
Azure Functions-tillägget för att skapa egna serverlösa program. Du kan till exempel vara värd för ditt autentiseringsprogram i Azure Functions.
En aktiv Communication Services-resurs och anslutningssträng. Lär dig hur du skapar en Communication Services-resurs.
En användaråtkomsttoken. Anvisningar finns i snabbstarten för att skapa och hantera åtkomsttoken eller självstudien för att skapa en betrodd autentiseringstjänst.

Konfigurera utvecklingsmiljön

Din lokala utvecklingsmiljö konfigureras så här:

Diagram som illustrerar arkitekturen i utvecklingsmiljön.

Installera Node.js, nvm och npm

Vi använder Node.js för att ladda ned och installera olika beroenden som vi behöver för vårt program på klientsidan. Vi använder den för att generera statiska filer som vi sedan ska vara värdar för i Azure, så du behöver inte bekymra dig om att konfigurera den på servern.

Windows-utvecklare kan följa den här Node.js självstudien för att konfigurera Node, nvm och npm.

Den här självstudien baseras på LTS 12.20.0-versionen. När du har installerat nvm använder du följande PowerShell-kommando för att distribuera den version som du vill använda:

nvm list available
nvm install 12.20.0
nvm use 12.20.0

Skärmbild som visar kommandona för att distribuera en Node-version.

Konfigurera Visual Studio Code

Du kan ladda ned Visual Studio Code på en av de plattformar som stöds.

Skapa en arbetsyta för dina Azure Communication Services-projekt

Skapa en mapp för att lagra dina projektfiler, så här: C:\Users\Documents\ACS\CallingApp. I Visual Studio Code väljer du Läggtill mapp >i arbetsyta och lägger till mappen i arbetsytan.

Skärmbild som visar val för att lägga till en fil i en arbetsyta.

Gå till EXPLORER i det vänstra fönstret så visas CallingApp mappen på UNTITLED-arbetsytan .

Skärmbild som visar Utforskaren och den namnlöse arbetsytan.

Uppdatera gärna namnet på din arbetsyta. Du kan verifiera din Node.js-version genom att högerklicka på mappen CallingApp och välja Öppna i integrerad terminal.

Skärmbild som visar valet för att öppna en mapp i en integrerad terminal.

I terminalen anger du följande kommando för att verifiera den Node.js version som installerades i föregående steg:

node --version

Skärmbild som visar verifiering av Node-versionen.

Installera Azure-tillägg för Visual Studio Code

Installera Azure Storage-tillägget antingen via Visual Studio Marketplace eller via Visual Studio Code (Visa>>

Skärmbild som visar knappen för att installera Azure Storage-tillägget.

Följ samma steg för Azure Functions - och Azure App Service-tilläggen .

Konfigurera en lokal webbserver

Skapa ett npm-paket

I terminalen går du till sökvägen till arbetsytans mapp och anger:

npm init -y

Det här kommandot initierar ett nytt npm-paket och lägger till package.json i rotmappen för projektet.

Skärmbild som visar paketet J S O N.

Mer dokumentation om finns på npm initsidan npm Docs för det kommandot.

Installera webpack

Du kan använda webpack för att paketera kod i statiska filer som du kan distribuera till Azure. Den har också en utvecklingsserver som du konfigurerar att använda med det anropande exemplet.

I terminalen anger du följande kommando för att installera webpack:

npm install webpack@4.42.0 webpack-cli@3.3.11 webpack-dev-server@3.10.3 --save-dev

Den här självstudien testades med de versioner som angavs i föregående kommando. Att -dev ange anger för pakethanteraren att det här beroendet är i utvecklingssyfte och inte ska ingå i koden som du distribuerar till Azure.

Du ser två nya paket som har lagts till i package.json filen som devDependencies. Paketen installeras i ./CallingApp/node_modules/ katalogen.

Skärmbild som visar konfigurationen av webbpaketet.

Konfigurera utvecklingsservern

När du kör ett statiskt program (till exempel din index.html fil) från webbläsaren används file:// protokollet. För att npm-modulerna ska fungera korrekt behöver du HTTP-protokollet med hjälp av webpack som en lokal utvecklingsserver.

Du skapar två konfigurationer: en för utveckling och en för produktion. Filer som förbereds för produktion kommer att minimeras, vilket innebär att du tar bort oanvända blanksteg och tecken. Den här konfigurationen är lämplig för produktionsscenarier där svarstiden ska minimeras eller där koden ska döljas.

Du använder webpack-merge verktyget för att arbeta med olika konfigurationsfiler för webpack.

Vi börjar med utvecklingsmiljön. Först måste du installera webpack merge. Kör följande kommando i terminalen:

npm install --save-dev webpack-merge

package.json I filen kan du se ytterligare ett beroende som har lagts till devDependenciesi .

Skapa sedan en fil med namnet webpack.common.js och lägg till följande kod:

const path = require('path');
module.exports ={
    entry: './app.js',
    output: {
        filename:'app.js',
        path: path.resolve(__dirname, 'dist'),
    }
}

Lägg sedan till ytterligare två filer, en för varje konfiguration:

webpack.dev.js
webpack.prod.js

webpack.dev.js Ändra nu filen genom att lägga till följande kod i den:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
});

I den här konfigurationen importerar du vanliga parametrar från webpack.common.js, sammanfogar de två filerna, anger läget till developmentoch konfigurerar källkartan som inline-source-map.

I utvecklingsläget uppmanas webpack att inte minimera filerna och inte skapa optimerade produktionsfiler. Du hittar detaljerad dokumentation om webpacklägen på webbsidan webbpaketläge.

Alternativ för källkarta visas på webbpaketets Devtool-webbsida. Om du ställer in källkartan blir det enklare för dig att felsöka via webbläsaren.

Skärmbild som visar koden för att konfigurera webbpaket.

Om du vill köra utvecklingsservern går du till och lägger till package.json följande kod under scripts:

    "build:dev": "webpack-dev-server --config webpack.dev.js"

Filen bör nu se ut så här:

{
  "name": "CallingApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:dev": "webpack-dev-server --config webpack.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

Du har lagt till kommandot som kan användas från npm.

Skärmbild som visar ändringen av package.json.

Testa utvecklingsservern

I Visual Studio Code skapar du tre filer under projektet:

index.html
app.js
app.css (valfritt, för att utforma din app)

Klistra in den här koden i index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first Azure Communication Services application</title>
    <link rel="stylesheet" href="./app.css"/>
    <script src="./app.js" defer></script>
</head>
<body>
    <h1>Hello from Azure Communication Services!</h1>
</body>
</html>

Skärmbild som visar H T M L-filen.

Lägg till följande kod i app.js:

alert('Hello world alert!');
console.log('Hello world console!');

Lägg till följande kod i app.css:

html {
    font-family: sans-serif;
  }

Glöm inte att spara! Filen som inte har sparats visas med vita punkter bredvid filnamnen i Utforskaren.

Skärmbild som visar filen App.js med JavaScript-kod.

När du öppnar den här sidan bör du se meddelandet visas med en avisering i webbläsarens konsol.

Skärmbild som visar filen App.css.

Använd följande terminalkommando för att testa utvecklingskonfigurationen:

npm run build:dev

Konsolen visar var servern körs. Som standard är http://localhost:8080det . Kommandot build:dev är det kommando som du lade till package.json i tidigare.

Skärmbild som visar hur du startar en utvecklingsserver.

Gå till adressen i webbläsaren så bör du se sidan och aviseringen som konfigurerades i föregående steg.

Skärmbild av H T M L-sidan.

När servern körs kan du ändra koden och servern. HTML-sidan kommer automatiskt att läsas in igen.

Gå sedan till app.js filen i Visual Studio Code och ta bort alert('Hello world alert!');. Spara filen och kontrollera att aviseringen försvinner från webbläsaren.

Om du vill stoppa servern kan du köra Ctrl+C i terminalen. Om du vill starta servern anger du npm run build:dev när som helst.

Lägga till Azure Communication Services-paketen

npm install Använd kommandot för att installera Azure Communication Services Calling SDK för JavaScript.

npm install @azure/communication-common --save
npm install @azure/communication-calling --save

Den här åtgärden lägger till vanliga Azure Communication Services-paket och anropar paket som beroenden för ditt paket. Du ser två nya paket som har lagts till i package.json filen. Mer information finns npm install på sidan npm Docs för det kommandot.

Skärmbild som visar kod för att installera Azure Communication Services-paket.

De här paketen tillhandahålls av Azure Communication Services-teamet och innehåller biblioteken för autentisering och samtal. Kommandot --save signalerar att programmet är beroende av dessa paket för produktionsanvändning och inkluderas i devDependenciespackage.json filen. När du skapar programmet för produktion inkluderas paketen i din produktionskod.

Publicera din webbplats på statiska Azure-webbplatser

Skapa en konfiguration för produktionsdistribution

Lägg till följande kod i webpack.prod.js:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

Den här konfigurationen sammanfogas med webpack.common.js (där du angav indatafilen och var resultatet ska lagras). Konfigurationen ställer också in läget på production.

I package.json lägger du till följande kod:

"build:prod": "webpack --config webpack.prod.js"

Filen bör se ut så här:

{
  "name": "CallingApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:dev": "webpack-dev-server --config webpack.dev.js",
    "build:prod": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@azure/communication-calling": "^1.0.0-beta.6",
    "@azure/communication-common": "^1.0.0"
  },
  "devDependencies": {
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^5.7.3"
  }
}

Skärmbild som visar konfigurerade filer.

I terminalen kör du :

npm run build:prod

Kommandot skapar en dist mapp och en produktionsklar app.js statisk fil i den.

Skärmbild som visar produktionsversionen.

Distribuera din app till Azure Storage

Kopiera index.html och app.css till dist mappen.

dist Skapa en fil i mappen och ge den 404.htmlnamnet . Kopiera följande markering till filen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./app.css"/>
    <title>Document</title>
</head>
<body>
    <h1>The page does not exists.</h1>
</body>
</html>

Spara filen (Ctrl+S).

Högerklicka på mappen dist och välj Distribuera till statisk webbplats via Azure Storage.

Skärmbild av de val som ska börja distribueras till Azure.

Under Välj prenumeration väljer du Logga in på Azure (eller Skapa ett kostnadsfritt Azure-konto om du inte har skapat en prenumeration tidigare).

Skärmbild som visar val för att logga in på Azure.

Välj Skapa nytt lagringskonto>Avancerat.

Skärmbild som visar val för att skapa lagringskontogruppen.

Ange namnet på lagringsgruppen.

Skärmbild som visar hur du lägger till ett namn för kontot.

Skapa en ny resursgrupp om det behövs.

Skärmbild som visar valet för att skapa en ny resursgrupp.

För Vill du aktivera värdtjänster för statiska webbplatser? väljer du Ja.

Skärmbild som visar hur du väljer alternativet för att aktivera värdtjänster för statiska webbplatser.

För Ange indexdokumentets namn godkänner du standardfilnamnet. Du har redan skapat filen index.html.

För Ange 404-feldokumentsökvägen anger du 404.html.

Välj programmets plats. Den plats som du väljer definierar vilken medieprocessor som ska användas i ditt framtida anropande program i gruppanrop.

Azure Communication Services väljer medieprocessorn baserat på programplatsen.

Skärmbild som visar en lista över platser.

Vänta tills resursen och webbplatsen har skapats.

Välj Bläddra till webbplatsen.

Skärmbild som visar ett meddelande om att distributionen är klar med knappen för att bläddra till en webbplats.

Från webbläsarens utvecklingsverktyg kan du inspektera källan och se filen som är förberedd för produktion.

Skärmbild av webbplatskällan med filen.

Gå till Azure-portalen, välj resursgruppen och välj det program som du skapade. Välj sedan Inställningar>Statisk webbplats. Du kan se att statiska webbplatser är aktiverade. Observera den primära slutpunkten, indexdokumentets namn och feldokumentsökvägen.

Skärmbild som visar val av statisk webbplats.

Under Blob Service väljer du Containrar. Listan visar två containrar som skapats, en för loggar ($logs) och en för innehållet på din webbplats ($web).

Skärmbild som visar containerkonfigurationen.

Om du öppnar containern $web visas de filer som du skapade i Visual Studio och distribuerades till Azure.

Skärmbild som visar filer som distribuerats till Azure.

Du kan distribuera om programmet från Visual Studio Code när som helst.

Nu är du redo att skapa ditt första Azure Communication Services-webbprogram.

Nästa steg

Lägga till röstsamtal i din app

Du kanske också vill:

Feedback

Var den här sidan till hjälp?

Last updated on 2025-10-08