使用部署資訊清單部署 Express 伺服器

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

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

為您的專案建立新的目錄，並安裝 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

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


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

在 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();
});

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


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

在專案的根public目錄中建立名為的目錄。然後使用hello-world.txt下列內容建立名為的檔案。
```
Hello world!
```
使用下列內容將.gitignore檔案新增至您的專案根目錄。
```
.amplify-hosting
dist
node_modules
```

設定 Amplify 部署資訊清單

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

將下列資訊清單複製並貼到您的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": "nodejs18.x",
      "entrypoint": "index.js"
    }
  ]
}

資訊清單說明 Amplify Hosting 應如何處理應用程式的部署。主要設定如下。

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

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

設定建置後指令碼

在 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

將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"
}

執行下列命令來建置您的應用程式。
```
npm run build
```
（選用）調整 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

部署您的伺服器

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

更新您的建置設定以指向 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:
      - '**/*'

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

您的瀏覽器已停用或無法使用 Javascript。

您必須啟用 Javascript，才能使用 AWS 文件。請參閱您的瀏覽器說明頁以取得說明。

文件慣用形式

部署規格

架構作者的影像最佳化