デプロイマニフェストを使用した Express サーバーのデプロイ

この例では、Amplify ホスティングのデプロイ仕様を使用して基本的な Express サーバーをデプロイする方法を説明します。提供されたデプロイマニフェストを利用して、ルーティング、コンピューティングリソース、および他の設定を指定できます。

Amplify ホスティングにデプロイする前に、Express サーバーをローカルに設定する

プロジェクト用に新しいディレクトリを作成し、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 という名前のディレクトリを作成します。

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 ホスティングがアプリケーションのデプロイを処理する方法が記述されています。主な設定は次のとおりです。

version – 使用しているデプロイ仕様のバージョンを示します。
framework – これを調整して Express サーバー設定を指定します。
imageSettings – 画像の最適化を処理する場合を除き、このセクションは Express サーバー用のオプションです。
routes – これらは、トラフィックをアプリケーションの適切な部分にルーティングするために重要です。"kind": "Compute" ルートはトラフィックをサーバーロジックにルーティングします。
computeResources – このセクションを使用して、Express サーバーのランタイムとエントリポイントを指定します。

次に、ビルドされたアプリケーションアーティファクトを .amplify-hosting デプロイバンドルに移動するビルド後スクリプトを設定します。ディレクトリ構造は、Amplify ホスティングのデプロイ仕様と整合しています。

ビルド後のスクリプトを設定する

プロジェクトのルートに bin という名前のディレクトリを作成します。

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

package.json ファイルに postbuild スクリプトを追加します。ファイルは次のようになっているはずです。


"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 ホスティングにデプロイします。
次のとおり、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 ホスティングによって提供されるデフォルトの URL でアプリケーションにアクセスします。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

デプロイ仕様

SSR アプリケーション向けの画像の最適化