練習 - 執行與偵錯程式碼

已完成

現在您已連線到 SSH 伺服器，您可以開始撰寫程式碼了！ 您需要產生一個基本的 Node 應用程式，因為您負責為您的機構開發 Express 應用程式。

在本練習中，您將建立一個基本的 Node 專案並執行與偵錯專案程式碼 (所有這些都是在使用 SSH 連線時進行的)。

建立並執行 Node.js 應用程式

若要建立並執行 Node.js 應用程式，您必須在終端機中執行一系列的命令。

1. 選擇任務列中的 終端>新的終端機 以開啟新終端機。 從終端機執行下列命令，以更新 Linux VM 中的套件，並安裝 Node.js：

   sudo apt-get update
   

   curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
   

   sudo apt-get install nodejs -y
   

2. 執行下列命令以安裝 Express 產生器：

   sudo npm install -g express-generator
   

3. 執行下列命令以建立名為 myExpressApp 的新 Express 應用程式：

   express myExpressApp --view pug
   

4. 在資源管理器中選取 開啟資料夾，以開啟應用程式檔案。 在下拉式清單中選取 myExpressApp ，以開啟 Visual Studio Code 視窗中的資料夾。

   

5. 在下一個提示中，選取 [確定]，這會開啟包含應用程式檔案的資料夾。 如果出現提示，請信任工作區。

   

6. 再次開啟終端機，然後執行下列命令以安裝所有應用程式的相依性：

   npm install
   

7. 執行下列命令來執行應用程式：

   npm start
   

   該應用程式會在您的 VM 的 http://localhost:3000 上執行。 下一個步驟將示範如何在您的本機電腦上瀏覽此應用程式。

瀏覽應用程式

現在該應用程式正在執行，您可以使用連接埠轉送來瀏覽本機電腦上的 Web 應用程式。

1. 當應用程式仍在執行時，請在命令面板中執行 Ports: Focus on Ports View 命令。

   

2. 選取 [ 轉寄埠] 按鈕。

   

3. 指定埠 3000，然後按 Enter 鍵。

   

4. 伺服器現在會將埠 3000 上的流量轉送至本機計算機;您現在可以瀏覽至 以檢視 http://localhost:3000 執行中的 Web 應用程式。

5. 在終端機中，按 Ctrl + C 停止應用程式。

編輯和偵錯應用程式

您可以使用 Visual Studio Code 的內建功能來編輯和偵錯遠端電腦上執行的應用程式。

1. 選取 Visual Studio Code 左側功能表中的 [ 檔案總 管]，然後開啟 app.js 檔案。

2. 透過按一下行號左側的裝訂邊，在檔案的第 10 行設定中斷點。 您會看到顯示一個紅色圓圈。

   

3. 在 [執行和偵錯] 檢視中，選取 [ 執行] 和 [偵錯]。 如果出現提示，請選擇 [Node.js]。

   

4. 當應用程式執行時，您將遇到中斷點。 您可以在側邊欄的 [偵錯] 檢視中檢查變數、建立監看式，以及巡覽呼叫堆疊。 您可以使用頂端的 [偵錯] 動作列來控制偵錯工作階段，例如逐行執行。

   

5. 您也可以編輯該檔案，就像程式碼位於本機電腦上一樣。 開始輸入 app.，這會觸發 IntelliSense。

   

Congratulations! 您已成功執行、編輯和偵錯僅存在於遠端電腦上的程式碼。