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

發行項
12/13/2023

在本教學課程中，為Express.js應用程式建立Linux虛擬機（VM）。 VM 會使用 cloud-init 組態檔進行設定，並包含適用於Express.js應用程式的 NGINX 和 GitHub 存放庫。使用 SSH 連線至 VM、將 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 用戶帳戶和訂用帳戶：建立免費訂用帳戶。
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虛擬機範例程序代碼

共用方式為