練習 - 設定和探索範例專案

  • 5 分鐘

在此單元中，您會從 GitHub 取得現有的應用程式程式碼、準備程式碼，以及設定您的開發環境。

取得並準備程式碼

  1. 在 Bash 終端機中，複製程式碼存放庫。

    git clone https://github.com/MicrosoftDocs/mslearn-module-shifting-nodejs-express-apis-to-serverless learn-functions

  2. 變更為程式碼存放庫目錄。

    cd learn-functions

  3. 安裝 npm 套件相依性。

    npm install

  4. 建置 Node.js Express 和 Angular 程式碼。

    npm run full:build

了解應用程式結構

範例應用程式是一種傳統的 Node.js 和 Express API，具有四種方法來服務下列端點：

方法 路由端點
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

在 Visual Studio Code 中開啟專案，然後開啟伺服器資料夾以探索 API 的結構。

server
 | - data
 | | - vacations.json
 | - models
 | | - vacation.model.ts
 | - routes
 | | - index.ts            👈 1. Entry point
 | | - vacation.routes.ts  👈 2. The vacation routes
 | - services
 | | - index.ts
 | | - vacation.service.ts 👈 3. The logic and data 
 | - index.ts
 | - server.ts             👈 The Express server
 | - tsconfig.json
  1. 進入點是 server/index.ts 檔案，其會執行 server.ts 程式碼以啟動 Express 伺服器。
  2. 然後從 /routes 資料夾載入路由 (例如 /vacations)。
  3. 這些路由會執行 /services 資料夾中的適當程式碼。 資料存放區設定會在 vacation.service.ts 檔案中定義。

Angular 用戶端應用程式會向 /api/vacations 路由提出 HTTP GET 要求，而 routes/vacation.routes.ts 中的路由會呼叫 services/vacation.service.ts 檔案中的資料邏輯以取得假期。

Proxy 組態

Angular 應用程式必須能夠對 Node.js 快速 API 提出要求。 Angular 應用程式會使用 Proxy 將要求轉送至 快速伺服器。 設定 Proxy 可讓瀏覽器找出 Express 伺服器。 開啟 proxy.conf.json，並注意快速應用程式的連接埠已設定為 7070。

{
  "/api": {
    "target": "http://localhost:7070",
    "secure": false
  }
}