Azure で Node.js Web アプリをデプロイする
クイック スタート:Node.js Web アプリを作成する – Azure App Service | Microsoft Learn
開発環境の選択
以下が選択可能
- VS Code
- コマンドライン
- Azure Portal
ここでは、VS Codeを使用する
環境設定
Node.jsのインストール
Node.js — Run JavaScript Everywhere (nodejs.org)
v20.12.2
VSCodeのインストール
Documentation for Visual Studio Code
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/image-6.png)
Webアプリの作成と起動
npm install -g npm@10.7.0
npx express-generator myExpressApp --view ejs
cd .\myExpressApp\
npm install
SET DEBUG=myexpressapp:* ; npm start
ブラウザで確認
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/image-7.png)
Azure App Serviceの作成
Azure Tools Extensionのインストール
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/image-8.png)
Azureへログインする
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/image-9.png)
App Serviceの作成
- 「Create New Web App…」を選択する:デフォルトでは、Linuxコンテナが選択される
- グローバルに一意の名前をつける:s3labWebApp1
- Nodeバージョンを選択する:Node 20 LTS
- 価格レベルを選択する:Free(F1)
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/image-10.png)
エラー対応
エラー「the subscription is not registered to use namespace Microsoft.OperationalInsights」が発生した場合、
Microsoft.OperationalInsightsリソースプロバイダーを追加する
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/image-13.png)
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/image-14.png)
デプロイする
Always deploy the workspace “myExpressApp” to “s3labWebApp1”? にYesを選択する
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/image-15.png)
ブラウザで表示する
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/image-16.png)