Nasazení Express.js MongoDB do App Service z Visual Studio Code

Článek
12/03/2021
4 min ke čtení

Nasaďte Express.js, která se připojuje k MongoDB Azure App Service (v Linuxu) a Cosmos DB.

Programování se provádí za vás. Tento kurz se zaměřuje na úspěšné používání místních a vzdálených prostředí Azure z Visual Studio Code rozšíření Azure.

Ukázka kódu

Hlavní úkoly

Tento kurz obsahuje několik nejlepších úloh Azure pro vývojáře v JavaScriptu:

Vytvoření Cosmos DB pro hostování databáze MongoDB
Vytvoření prostředku app service pro hostování Express.js aplikace
Nasazení Express.js do služby App Service

Ukázková aplikace

Ukázková Express.js aplikace se skládá z následujících prvků:

Express.js server hostovaný na portu 8080
Jednoduchý React.js zobrazení na straně serveru
Funkce nativního rozhraní MongoDB API pro vkládání, odstraňování a hledání dat

Jednoduchá Node.js aplikace připojená k databázi MongoDB.

Vytvoření nebo použití existujícího předplatného Azure

Účet Azure s aktivním předplatným. Vytvořte si ho zdarma.

Instalovat software

Node.js 12 (LTS)a npm nainstaluje správce balíčků Node.js na místní počítač.
Visual Studio Code nainstalovaná na místní počítač.
Visual Studio Code rozšíření:
- Azure App Service rozšíření pro Visual Studio Code (nainstalované z Visual Studio Code)
- Databáze Azure
- Azure Resources (Prostředky Azure)

Vytvoření prostředku Cosmos DB pro MongoDB

Nejprve vytvořte Cosmos, protože to bude trvat několik minut.

V Visual Studio Code vlevo vyberte ikonu Azure a pak vyberte část Databáze.

Pokud se část Databáze nezobrazí, nezapomeňte zaškrtnutou část v horní nabídce Azure ....
V průzkumníku Azure v části Databáze vyberte své předplatné kliknutím pravým tlačítkem a pak vyberte Vytvořit server.
Na paletě příkazů Vytvořit nový databázový server Azure vyberte Azure Cosmos DB for MongoDB API.

Postupujte podle pokynů v následující tabulce a seznamte se s použitím hodnot. Vytvoření databáze může trvat až 15 minut.

Vlastnost	Hodnota
Zadejte globálně jedinečný název účtu pro nový prostředek.	Zadejte hodnotu prostředku, například `cosmos-mongodb-YOUR-NAME` . Nahraďte `YOUR-NAME` svým jménem nebo jedinečným ID. Tento jedinečný název se také používá jako součást adresy URL pro přístup k prostředku v prohlížeči.
Vyberte nebo vytvořte skupinu prostředků.	Vytvořte novou skupinu prostředků s názvem `js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE` .
Umístění	Umístění prostředku. Pro tento kurz vyberte oblastní umístění blízko vás.

Vytvoření prostředku může trvat až 15 minut. Pokud máte omezený čas, můžete přeskočit další část, ale nezapomeňte tuto další část dokončit během několika minut.

Získání Cosmos DB

V průzkumníku Azure Databases klikněte pravým tlačítkem na název prostředku a vyberte Copy Connection String (Zkopírovat připojovací řetězec) a zkopírujte připojovací řetězec. Budete ho potřebovat později v kurzu pro soubor proměnných prostředí.

Express.js formulář webové aplikace a výsledky dat z místní databáze MongoDB.

Klonování ukázkové Express.js aplikace

Webová Express.js je k dispozici pro vás. Naklonujte aplikaci pomocí gitu, nainstalujte závislosti a spusťte aplikaci.

Naklonujte ukázkové repo, nainstalujte závislosti a pak otevřete projekt v Visual Studio Code.

git clone https://github.com/Azure-Samples/js-e2e-express-mongo.git && \
cd js-e2e-express-mongo && \
npm install && \
code .

Upravte soubor prostředí a přidejte vlastnost připojovacího řetězce pro Cosmos DB jako .envDATABASE_URL hodnotu vlastnosti .
```
DATABASE_URL=ADD-YOUR-CONNECTION-STRING_HERE
```
V Visual Studio Code otevřete okno terminálu a spuštěním následujících příkazů nainstalujte závislosti ukázky a spusťte webovou aplikaci.
```
npm start
```
Zobrazte webovou aplikaci na místním počítači v prohlížeči.
```
http://localhost:8080/
```

Vytvoření prostředku webové aplikace a nasazení Express.js aplikace

Pomocí rozšíření Visual Studio Code pro App Service vytvořte prostředek služby App Service a nasaďte do Express.js webovou aplikaci.

Přejděte do Průzkumníka Azure. Klikněte pravým tlačítkem na předplatné a pak vyberte Create new web app...(Advanced) .

Postupujte podle pokynů v následující tabulce a seznamte se s použitím hodnot.

Vlastnost	Hodnota
Zadejte globálně jedinečný název nové webové aplikace.	Zadejte hodnotu prostředku služby `web-app-with-mongodb-YOUR-NAME` App Service, například . Nahraďte `<YOUR-NAME>` svým jménem nebo jedinečným ID. Tento jedinečný název se také používá jako součást adresy URL pro přístup k prostředku v prohlížeči.
Vyberte skupinu prostředků pro nové prostředky.	Vyberte skupinu prostředků, kterou jste vytvořili pro prostředek Cosmos DB, a nahraďte svým jménem nebo e-mailovým `js-demo-mongodb-web-app-resource-group-YOUR-NAME-HEREYOUR-NAME-HERE` aliasem.
Vyberte modul runtime pro linuxovou aplikaci.	Vyberte `Node 12 LTS`.
Vyberte operační systém.	Vyberte Linux.
Vytvořte plán linuxového App Service.	Vytvořte nový plán služby s názvem `js-demo-mongodb-web-app-plan-YOUR-NAME-HERE` a nahraďte `YOUR-NAME-HERE` svým jménem nebo e-mailovým aliasem.
Výběr cenové úrovně	Free
Vyberte prostředek Přehledy aplikace.	Pro tuto dobu přeskočte.
Vyberte umístění pro nové prostředky.	Vyberte stejné umístění, které jste vybrali při vytváření prostředku Cosmos DB a skupiny prostředků.

Po dokončení procesu vytváření aplikace se v pravém dolním rohu okna Visual Studio Code se zobrazí stavová zpráva s volbou Deploy nebo View output . Vyberte Deploy.

Pokud už se stavová zpráva nezobrazí, můžete ji nasadit tak, že vyberete Azure Explorer, kliknete pravým tlačítkem na název prostředku a pak vyberete Deploy to Web App...(Nasadit do webové aplikace... ).
Během procesu nasazení můžete výběrem oznámení zobrazit okno výstupu. Zobrazí se stav průběžného nasazování.
Po dokončení nasazení se zobrazí oznámení. Výběrem možnosti Streamovat protokoly zobrazte průběžné protokoly.

Konfigurace App Service prostředí pro připojovací řetězec databáze

Proměnná prostředí DATABASE_URL , místně uložená v .env souboru , nebyla nasazena do vaší webové aplikace. Důvodem je to, že je v souboru uveden jako ignorovaný soubor ./.vscode/settings.json :

{
    "appService.zipIgnorePattern": [
        "node_modules{,/**}",
        ".vscode{,/**}",
        ".env",
        "test{,/**}"
    ],
    "appService.deploySubpath": ".",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

Na řádku aktivity vyberte ikonu Azure a pak vyberte svou webovou aplikaci v rámci App Service a předplatného.
klikněte pravým tlačítkem myši na Nastavení aplikacea pak vyberte přidat nové nastavení.
Přidejte do souboru stejný název a hodnotu .env .

Název nastavení Hodnota

DATABASE_URL mongodb://...
Klikněte pravým tlačítkem na webovou aplikaci Azure a vyberte restartovat .

Název nastavení	Hodnota
DATABASE_URL	mongodb://...

Zobrazení webové aplikace Azure v prohlížeči

Otevřete web v prohlížeči, nahraďte text YOUR-RESOURCE_NAME vlastním názvem prostředku: https://YOUR-RESOURCE_NAME.azurewebsites.net .
Použijte webovou aplikaci a přidejte a odstraňte položky.

Provedení změn a opětovné nasazení

Udělejte několik změn a znovu nasaďte aplikaci pomocí rozšíření služby App Service.

Vyčištění prostředků

Po dokončení tohoto kurzu odeberte prostředky.

v Visual Studio Code použijte průzkumníka Azure pro skupiny prostředků, klikněte pravým tlačítkem na skupinu prostředků, například js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE , nahraďte YOUR-NAME-HERE název nebo e-mailový alias a pak vyberte js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE

Chcete získat další informace

Rozšíření Azure App Service

Další kroky

pokračovat v učení o App Service a Cosmos DB: