使用 Azure CLI 建立Express.js虛擬機

發行項
12/13/2023

在本教學課程中，為Express.js應用程式建立Linux虛擬機（VM）。 VM 會使用 cloud-init 組態檔進行設定，並包含適用於Express.js應用程式的 NGINX 和 GitHub 存放庫。連線使用 SSH 將 Web 應用程式變更為包含追蹤記錄，並在網頁瀏覽器中檢視公用Express.js伺服器應用程式。

本教學課程包含下列工作：

使用 Azure CLI 登入 Azure
使用 Azure CLI 建立 Azure Linux VM 資源
- 開啟公用埠 80
- 從 GitHub 存放庫安裝示範Express.js Web 應用程式
- 安裝 Web 應用程式相依性
- 啟動 Web 應用程式
使用 Azure CLI 建立 Azure 監視資源
- 使用 SSH 連線至 VM
- 使用 npm 安裝 Azure SDK 用戶端連結庫
- 新增 Application Insights 用戶端連結庫程式代碼以建立自定義追蹤
從瀏覽器檢視 Web 應用程式
- 要求 /trace 路由以在Application Insights記錄中產生自定義追蹤
- 使用 Azure CLI 檢視記錄中收集的追蹤計數
- 使用 Azure 入口網站檢視追蹤清單
使用 Azure CLI 移除資源

建立或使用現有的 Azure 訂用帳戶

您需要具有作用中訂用帳戶的 Azure 用戶帳戶。免費建立一個。

必要條件

SSH 連線到 VM：使用 Azure Cloud Shell 或新式終端機，例如 Bash 殼層，其中包含 SSH。

在 Azure Cloud Shell 中使用 Bash 環境。如需詳細資訊，請參閱 Azure Cloud Shell 中的 Bash 快速入門。
若要在本地執行 CLI 參考命令，請安裝 Azure CLI。若您在 Windows 或 macOS 上執行，請考慮在 Docker 容器中執行 Azure CLI。如需詳細資訊，請參閱〈如何在 Docker 容器中執行 Azure CLI〉。
- 如果您使用的是本機安裝，請使用 az login 命令，透過 Azure CLI 來登入。請遵循您終端機上顯示的步驟，完成驗證程序。如需其他登入選項，請參閱使用 Azure CLI 登入。
- 出現提示時，請在第一次使用時安裝 Azure CLI 延伸模組。如需擴充功能詳細資訊，請參閱使用 Azure CLI 擴充功能。
- 執行 az version 以尋找已安裝的版本和相依程式庫。若要升級至最新版本，請執行 az upgrade。

1.建立網頁的 Application Insights 資源

為所有 Azure 資源和監視資源建立 Azure 資源群組，以將 Web 應用程式的記錄檔收集到 Azure 雲端。建立資源群組可讓您輕鬆地尋找資源，並在完成時加以刪除。 Azure 監視器是 Azure 服務的名稱，而 Application Insights 是教學課程所使用的用戶端連結庫名稱。

選擇性地，如果您有多個訂用帳戶，請在完成其餘命令之前，使用 az account set 來設定預設訂用帳戶。
```
az account set \
    --subscription "ACCOUNT NAME OR ID" 
```
使用 az group create 建立 Azure 資源群組。使用名稱 rg-demo-vm-eastus：
```
az group create \
    --location eastus \
    --name rg-demo-vm-eastus 
```

使用 Azure CLI 建立 Azure 監視器資源

將 Application Insights 擴充功能安裝至 Azure CLI。
```
az extension add -n application-insights
```

使用下列命令來建立監視資源，並使用 az monitor app-insights component create：

az monitor app-insights component create \
  --app demoWebAppMonitor \
  --location eastus \
  --resource-group rg-demo-vm-eastus \
  --query instrumentationKey --output table

從輸出複製結果，您稍後將需要該值instrumentationKey。
讓終端機保持開啟，您將在下一個步驟中使用。

2.使用 Azure CLI 建立 Linux 虛擬機

使用 cloud-init 組態檔來建立 NGINX 反向 Proxy 伺服器和 Express.js 伺服器。 NGINX 用來將Express.js埠（3000）轉送至公用埠（80）。

建立名為 cloud-init-github.txt 的本機檔案，並將下列內容儲存至檔案，或者您可以將存放庫的檔案儲存到本機計算機。 cloud-init 格式的檔案必須存在於與 Azure CLI 命令終端機路徑相同的資料夾中。

#cloud-config
package_upgrade: true
packages:
  - nginx
write_files:
  - owner: www-data:www-data
    path: /etc/nginx/sites-available/default
    content: |
      server {
        listen 80 default_server;
        server_name _;
        location / {
          # First, try if the file exists locally, otherwise request it from the app
          try_files $uri @app;
        }
        location @app {
          proxy_pass http://localhost:3000;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection 'upgrade';
          proxy_set_header X-Forwarded-For $remote_addr;
          proxy_set_header Host $host;
          proxy_cache_bypass $http_upgrade;
        }
      }
runcmd:
  # install Node.js
  - 'curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -'
  - 'sudo apt-get install -y nodejs'
  # clone GitHub Repo into myapp directory
  - 'cd /home/azureuser'
  - git clone "https://github.com/Azure-Samples/js-e2e-vm" myapp
  # Start app
  - 'cd myapp && npm install && npm start'
  # restart NGINX
  - systemctl restart nginx

檢閱 runcmd 檔案的區段，以瞭解其用途。

有 runcmd 數個工作：
- 下載Node.js並加以安裝
- 將範例Express.js存放庫從 GitHub 複製到 myapp 目錄
- 安裝應用程式相依性
- 使用 PM2 啟動Express.js應用程式

建立虛擬機資源

在終端機輸入 Azure CLI 命令 az vm create，以建立 Linux 虛擬機的 Azure 資源。命令會從 cloud-init 檔案建立 VM，併為您產生 SSH 金鑰。執行中的命令會顯示儲存金鑰的位置。

az vm create \
  --resource-group rg-demo-vm-eastus \
  --name demo-vm \
  --location eastus \
  --public-ip-sku Standard \
  --image UbuntuLTS \
  --admin-username azureuser \
  --generate-ssh-keys \
  --custom-data cloud-init-github.txt

等候程式可能需要幾分鐘的時間。
將 publicIpAddress 值從回應中保留，需要檢視瀏覽器中的 Web 應用程式並連線到 VM。如果您遺失此 IP，請使用 Azure CLI 命令 az vm list-ip-addresses 再次取得它。
此程式已建立 SSH 金鑰，但位於回應中所述的位置。

移至該位置並建立 authorized_keys 檔案：

cd <SSH-KEY-LOCATION> && cat id_rsa >> authorized_keys

開啟虛擬機的埠

第一次建立時，虛擬機沒有開啟的埠。使用下列 Azure CLI 命令開啟埠 80，az vm open-port 讓 Web 應用程式可供公開使用：

az vm open-port \
  --port 80 \
  --resource-group rg-demo-vm-eastus \
  --name demo-vm

瀏覽至網站

使用網頁瀏覽器中的公用IP位址，確定虛擬機可供使用並執行。變更 URL 以使用的值。publicIpAddress
```
http://YOUR-VM-PUBLIC-IP-ADDRESS
```
如果資源因閘道錯誤而失敗，請在一分鐘內再試一次，Web 應用程式可能需要一分鐘的時間才能啟動。
虛擬機的 Web 應用程式會傳回下列資訊：
- VM 名稱
- 您的用戶端 IP
- 目前日期/時間

Web 應用程式的初始程式碼檔案具有單一路由，該路由會通過 NGINX Proxy。

const os = require('os');
const express = require('express')
const app = express()

app.use('/public', express.static('public'))
app.get('/', function (req, res) {

    const clientIP = req.headers['x-forwarded-for'];
    const msg = `HostName: ${os.hostname()}<br>ClientIP: ${clientIP}<br>DateTime: ${new Date()}<br><img width='200' height='200' src='/public/leaves.jpg' alt='flowers'>`
    console.log(msg)

    res.send(msg)
})
app.listen(3000, function () {
    console.log(`Hello world app listening on port 3000! ${Date.now()}`)
})

3.使用 SSH 將連線至 Linux 虛擬機

在本教學課程的本節中，使用終端機中的 SSH 連線到您的虛擬機。 SSH 是許多新式殼層所提供的常見工具，包括 Azure Cloud Shell。

使用 SSH 和變更 Web 應用程式連線

使用下列命令連線遠端虛擬機。

將取代 YOUR-VM-PUBLIC-IP 為您自己的虛擬機公用IP。
```
ssh azureuser@YOUR-VM-PUBLIC-IP
```
此程式假設您的 SSH 用戶端可以找到您的 SSH 金鑰，該金鑰會建立為 VM 建立的一部分，並放在本機電腦上。
如果系統詢問您是否確定要連線、回答 y 或 yes 繼續。
使用下列命令來瞭解您在虛擬機上的位置。您應該位於 azureuser 根目錄： /home/azureuser。
```
pwd
```
線上完成時，終端機提示應該會變更，以指出遠端虛擬機的使用者名稱和資源名稱。
```
azureuser@demo-vm:
```
您的 Web 應用程式位於子目錄中。 myapp 變更至 myapp 目錄並列出內容：
```
cd myapp && ls -l
```

您應該會看到內容，代表複製到虛擬機和 npm 套件檔案的 GitHub 存放庫：

-rw-r--r--   1 root root   891 Nov 11 20:23 cloud-init-github.txt
-rw-r--r--   1 root root  1347 Nov 11 20:23 index-logging.js
-rw-r--r--   1 root root   282 Nov 11 20:23 index.js
drwxr-xr-x 190 root root  4096 Nov 11 20:23 node_modules
-rw-r--r--   1 root root 84115 Nov 11 20:23 package-lock.json
-rw-r--r--   1 root root   329 Nov 11 20:23 package.json
-rw-r--r--   1 root root   697 Nov 11 20:23 readme.md

安裝監視 SDK

在連線至虛擬機的 SSH 終端機中，安裝適用於 Application Insights 的 Azure SDK 用戶端連結庫。
```
sudo npm install --save applicationinsights
```
等到命令完成再繼續。

新增監視檢測金鑰

在連線至虛擬機的 SSH 終端機中，使用 Nano 編輯器開啟 package.json 檔案。
```
sudo nano package.json
```
APPINSIGHTS_INSTRUMENTATIONKEY將環境變數新增至開始腳本的開頭。在下列範例中，將取代 REPLACE-WITH-YOUR-KEY 為您的檢測金鑰值。
```
"start": "APPINSIGHTS_INSTRUMENTATIONKEY=REPLACE-WITH-YOUR-KEY pm2 start index.js --watch --log /var/log/pm2.log"
```
仍在 SSH 終端機中，使用控制項 + X 將檔案儲存在 Nano 編輯器中。
如果在 Nano 編輯器中出現提示，請輸入 Y 以儲存。
如果在 Nano 編輯器中出現提示，請在出現提示時接受檔名。

停止 VM 以變更應用程式

Azure 用戶端連結庫現在位於您的 node_modules 目錄中，金鑰會以環境變數的形式傳遞至應用程式。下一個步驟以程序設計方式使用Application Insights。

使用下列命令停止 PM2，這是Node.js應用程式的生產程式管理員：
```
sudo npm run-script stop 
```
使用 Application Insights 將源檔 index.js 取代為檔案。
```
sudo npm run-script appinsights
```

會為您提供客戶端連結庫和記錄程式代碼。

const express = require('express')
const app = express()
const os = require('os');

console.log(JSON.stringify(process.env));

const AppInsights = require('applicationinsights');

if (process.env.APPINSIGHTS_INSTRUMENTATIONKEY) {
    console.log(`AppInsights configured with key ${process.env.APPINSIGHTS_INSTRUMENTATIONKEY}`);
} else{
    console.log(`AppInsights not configured`);
}

AppInsights.setup(process.env.APPINSIGHTS_INSTRUMENTATIONKEY)
    .setAutoDependencyCorrelation(true)
    .setAutoCollectRequests(true)
    .setAutoCollectPerformance(true, true)
    .setAutoCollectExceptions(true)
    .setAutoCollectDependencies(true)
    .setAutoCollectConsole(true)
    .setUseDiskRetryCaching(true)
    .setSendLiveMetrics(false)
    .setDistributedTracingMode(AppInsights.DistributedTracingModes.AI)
    .start();

const AppInsightsClient = AppInsights.defaultClient;


app.get('/trace', (req, res) => {

    const clientIP = req.headers['x-forwarded-for'];
    const msg = `trace route ${os.hostname()} ${clientIP} ${new Date()}`;

    console.log(msg)

    if (process.env.APPINSIGHTS_INSTRUMENTATIONKEY) {
        AppInsightsClient.trackPageView();
        AppInsightsClient.trackTrace({ message: msg })
        AppInsightsClient.flush();
    } else {
        msg += ' AppInsights not configured';
    }

    res.send(`${msg}`)
})

app.get('/', function (req, res) {

    const clientIP = req.headers['x-forwarded-for'];
    const msg = `root route ${os.hostname()} ${clientIP} ${new Date()}`

    console.log(msg)

    res.send(msg)

})
app.listen(3000, function () {
    console.log(`Hello world app listening on port 3000! ${os.hostname()}`)
})

使用 PM2 重新啟動應用程式，以挑選下一個環境變數。
```
sudo npm start
```

使用應用程式來驗證記錄

在網頁瀏覽器中，使用新的 trace 路由測試應用程式：
```
http://YOUR-VM-PUBLIC-IP-ADDRESS/trace
```
瀏覽器會顯示您的 trace route demo-vm YOUR-CLIENT-IP VM-DATE-TIME IP位址回應。

檢視 NGINX 的記錄檔

虛擬機（VM）會收集可供檢視的 NGINX 記錄。

服務	記錄檔位置
NGINX	/var/log/nginx/access.log

仍在 SSH 終端機中，使用下列命令檢視 NGINX Proxy 服務的 VM 記錄，以檢視記錄：

cat /var/log/nginx/access.log

記錄檔包含本機計算機的呼叫。

"GET /trace HTTP/1.1" 200 10 "-"

檢視 PM2 的記錄檔

虛擬機會收集 PM2 的記錄，以供檢視。

服務	記錄檔位置
PM2	/var/log/pm2.log

檢視 PM2 服務的 VM 記錄，這是您Express.js節點 Web 應用程式。在相同的bash殼層中，使用下列命令來檢視記錄：
```
cat /var/log/pm2.log
```

記錄檔包含本機計算機的呼叫。

grep "Hello world app listening on port 3000!" /var/log/pm2.log

記錄檔也包含環境變數，包括傳入 npm 啟動腳本的 ApplicationInsights 金鑰。使用下列 grep 命令來確認金鑰位於環境變數中。
```
grep APPINSIGHTS_INSTRUMENTATIONKEY /var/log/pm2.log
```
這會以不同色彩反白顯示您的 PM2 記錄 APPINSIGHTS_INSTRUMENTATIONKEY 。

VM 記錄和雲端記錄

在此應用程式中，使用 console.log 將訊息寫入 VM 上找到的 PM2 記錄中。如果您刪除記錄或 VM，就會遺失該資訊。

如果您想要保留超過虛擬機存留期的記錄，請使用Application Insights。

5.清除資源

完成本教學課程之後，您必須移除資源群組，其中包含其所有資源，以確保您不會再支付使用量的費用。

在相同的終端機中，使用 Azure CLI 命令 az group delete 來刪除資源群組：

az group delete --name rg-demo-vm-eastus -y

此命令需要幾分鐘的時間。

疑難排解

如果您有問題，請使用下表來瞭解如何解決問題：

問題	解決方法
502 閘道錯誤	這可能表示您的index.js或package.js檔案發生錯誤。如需詳細資訊，請檢視您的 `/var/log/pm2.log` PM2記錄。最近的錯誤位於檔案底部。如果您確定這些檔案正確無誤，請使用中的 `package.json`npm 腳本停止並啟動 PM2。

範例指令碼

Express.js虛擬機範例程序代碼

Share via

使用 Azure CLI 建立Express.js虛擬機

建立或使用現有的 Azure 訂用帳戶

必要條件

1.建立網頁的 Application Insights 資源

使用 Azure CLI 建立 Azure 監視器資源

2.使用 Azure CLI 建立 Linux 虛擬機

建立虛擬機資源

開啟虛擬機的埠

瀏覽至網站

3.使用 SSH 將連線至 Linux 虛擬機

使用 SSH 和變更 Web 應用程式連線

安裝監視 SDK

新增監視檢測金鑰

停止 VM 以變更應用程式

使用應用程式來驗證記錄

檢視 NGINX 的記錄檔

檢視 PM2 的記錄檔

VM 記錄和雲端記錄

5.清除資源

疑難排解

範例指令碼

下一步

意見反應

意見反應

其他資源

Share via

使用 Azure CLI 建立Express.js虛擬機

建立或使用現有的 Azure 訂用帳戶

必要條件

1.建立網頁的 Application Insights 資源

使用 Azure CLI 建立 Azure 監視器資源

2.使用 Azure CLI 建立 Linux 虛擬機

建立虛擬機資源

開啟虛擬機的埠

瀏覽至網站

3.使用 SSH 將 連線 至 Linux 虛擬機

使用 SSH 和變更 Web 應用程式 連線

安裝監視 SDK

新增監視檢測金鑰

停止 VM 以變更應用程式

使用應用程式來驗證記錄

檢視 NGINX 的記錄檔

檢視 PM2 的記錄檔

VM 記錄和雲端記錄

5.清除資源

疑難排解

範例指令碼

下一步

意見反應

意見反應

其他資源

3.使用 SSH 將連線至 Linux 虛擬機

使用 SSH 和變更 Web 應用程式連線