本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 使用部署資訊清單部署 Express 伺服器
<a name="deploy-express-server"></a>

此範例說明如何使用 Amplify Hosting 部署規格來部署基本 Express 伺服器。您可以利用提供的部署資訊清單來指定路由、運算資源和其他組態。

**在本機設定 Express 伺服器，然後再部署到 Amplify 託管**

1. 為您的專案建立新的目錄，並安裝 Express 和 Typescript。

   ```
   mkdir express-app
   cd express-app
    
   # The following command will prompt you for information about your project
   npm init
    
   # Install express, typescript and types
   npm install express --save
   npm install typescript ts-node @types/node @types/express --save-dev
   ```

1. 使用下列內容將`tsconfig.json`檔案新增至專案的根目錄。

   ```
   {
     "compilerOptions": {
       "target": "es6",
       "module": "commonjs",
       "outDir": "./dist",
       "strict": true,
       "esModuleInterop": true,
       "skipLibCheck": true,
       "forceConsistentCasingInFileNames": true
     },
     "include": ["src/**/*.ts"],
     "exclude": ["node_modules"]
   }
   ```

1. 在專案根目錄中建立名為 `src`的目錄。

1. 在 `src`目錄中建立 `index.ts` 檔案。這將是啟動 Express 伺服器之應用程式的進入點。伺服器應設定為接聽連接埠 3000。

   ```
   // src/index.ts
   import express from 'express';
    
   const app: express.Application = express();
   const port = 3000;
    
   app.use(express.text());
    
   app.listen(port, () => {
     console.log(`server is listening on ${port}`);
   });
    
   // Homepage
   app.get('/', (req: express.Request, res: express.Response) => {
     res.status(200).send("Hello World!");
   });
    
   // GET
   app.get('/get', (req: express.Request, res: express.Response) => {
     res.status(200).header("x-get-header", "get-header-value").send("get-response-from-compute");
   });
    
   //POST
   app.post('/post', (req: express.Request, res: express.Response) => {
     res.status(200).header("x-post-header", "post-header-value").send(req.body.toString());
   });
    
   //PUT
   app.put('/put', (req: express.Request, res: express.Response) => {
     res.status(200).header("x-put-header", "put-header-value").send(req.body.toString());
   });
    
   //PATCH
   app.patch('/patch', (req: express.Request, res: express.Response) => {
     res.status(200).header("x-patch-header", "patch-header-value").send(req.body.toString());
   });
    
   // Delete
   app.delete('/delete', (req: express.Request, res: express.Response) => {
     res.status(200).header("x-delete-header", "delete-header-value").send();
   });
   ```

1. 將下列指令碼新增至您的 `package.json` 檔案。

   ```
   "scripts": {
     "start": "ts-node src/index.ts",
     "build": "tsc",
     "serve": "node dist/index.js"
   }
   ```

1. 在專案的根`public`目錄中建立名為 的目錄。然後使用`hello-world.txt`下列內容建立名為 的檔案。

   ```
   Hello world!
   ```

1. 使用下列內容將`.gitignore`檔案新增至您的專案根目錄。

   ```
   .amplify-hosting
   dist
   node_modules
   ```

**設定 Amplify 部署資訊清單**

1. 在`deploy-manifest.json`專案的根目錄中建立名為 的檔案。

1. 將下列資訊清單複製並貼到您的`deploy-manifest.json`檔案中。

   ```
   {
     "version": 1,
     "framework": { "name": "express", "version": "4.18.2" },
     "imageSettings": {
       "sizes": [
         100,
         200,
         1920
       ],
       "domains": [],
       "remotePatterns": [],
       "formats": [],
       "minimumCacheTTL": 60,
       "dangerouslyAllowSVG": false
     },
     "routes": [
       {
         "path": "/_amplify/image",
         "target": {
           "kind": "ImageOptimization",
           "cacheControl": "public, max-age=3600, immutable"
         }
       },
       {
         "path": "/*.*",
         "target": {
           "kind": "Static",
           "cacheControl": "public, max-age=2"
         },
         "fallback": {
           "kind": "Compute",
           "src": "default"
         }
       },
       {
         "path": "/*",
         "target": {
           "kind": "Compute",
           "src": "default"
         }
       }
     ],
     "computeResources": [
       {
         "name": "default",
         "runtime": "nodejs22.x",
         "entrypoint": "index.js"
       }
     ]
   }
   ```

   資訊清單說明 Amplify Hosting 應如何處理應用程式的部署。主要設定如下。
   + **版本** – 指出您正在使用的部署規格版本。
   + **架構** – 調整此值以指定您的Express伺服器設定。
   + **imageSettings** – 除非您正在處理映像最佳化，否則Express伺服器可選用本節。
   + **路由** – 這些對於將流量導向應用程式的正確部分至關重要。`"kind": "Compute"` 路由會將流量導向您的伺服器邏輯。
   + **computeResources** – 使用此區段指定Express伺服器的執行時間和進入點。

接著，設定建置後指令碼，將建置的應用程式成品移至`.amplify-hosting`部署套件。目錄結構符合 Amplify Hosting 部署規格。

**設定建置後指令碼**

1. 在專案根目錄中建立名為 `bin`的目錄。

1. 在 `bin`目錄中建立名為 `postbuild.sh` 的檔案。將下列內容新增至 `postbuild.sh` 檔案：

   ```
   #!/bin/bash
    
   rm -rf ./.amplify-hosting
    
   mkdir -p ./.amplify-hosting/compute
    
   cp -r ./dist ./.amplify-hosting/compute/default
   cp -r ./node_modules ./.amplify-hosting/compute/default/node_modules
    
   cp -r public ./.amplify-hosting/static
    
   cp deploy-manifest.json ./.amplify-hosting/deploy-manifest.json
   ```

1. 將`postbuild`指令碼新增至您的 `package.json` 檔案。檔案看起來應該如下所示。

   ```
   "scripts": {
     "start": "ts-node src/index.ts",
     "build": "tsc",
     "serve": "node dist/index.js",
     "postbuild": "chmod +x bin/postbuild.sh && ./bin/postbuild.sh"
   }
   ```

1. 執行下列命令來建置您的應用程式。

   ```
   npm run build
   ```

1. （選用） 調整 Express 的路由。您可以修改部署資訊清單中的路由，以符合您的 Express 伺服器。例如，如果您在 `public`目錄中沒有任何靜態資產，您可能只需要將全部擷取路由`"path": "/*"`導向運算。這取決於伺服器的設定。

您的最終目錄結構看起來應該如下所示。

```
express-app/
├── .amplify-hosting/
│   ├── compute/
│   │   └── default/
│   │       ├── node_modules/
│   │       └── index.js
│   ├── static/
│   │   └── hello.txt
│   └── deploy-manifest.json
├── bin/
│   ├── .amplify-hosting/
│   │   ├── compute/
│   │   │   └── default/
│   │   └── static/
│   └── postbuild.sh*
├── dist/
│   └── index.js
├── node_modules/
├── public/
│   └── hello.txt
├── src/
│   └── index.ts
├── deploy-manifest.json
├── package.json
├── package-lock.json
└── tsconfig.json
```

**部署您的伺服器**

1. 將程式碼推送至 Git 儲存庫，然後將應用程式部署至 Amplify Hosting。

1. 更新您的建置設定以指向 `baseDirectory` `.amplify-hosting` ，如下所示。在建置期間，Amplify 會偵測 `.amplify-hosting`目錄中的資訊清單檔案，並依設定部署您的 Express 伺服器。

   ```
   version: 1
   frontend:
     phases:
       preBuild:
         commands:
           - nvm use 18
           - npm install
       build:
         commands:
           - npm run build
     artifacts:
       baseDirectory: .amplify-hosting
       files:
         - '**/*'
   ```

1. 若要驗證您的部署是否成功，以及您的伺服器是否正常運作，請使用 Amplify Hosting 提供的預設 URL 造訪您的應用程式。