翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。 # デプロイマニフェストを使用した Express サーバーのデプロイ この例では、Amplify ホスティングのデプロイ仕様を使用して基本的な Express サーバーをデプロイする方法を説明します。提供されたデプロイマニフェストを利用して、ルーティング、コンピューティングリソース、および他の設定を指定できます。 **Amplify ホスティングにデプロイする前に、Express サーバーをローカルに設定する** 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 ホスティングがアプリケーションのデプロイを処理する方法が記述されています。主な設定は次のとおりです。 + **version** – 使用しているデプロイ仕様のバージョンを示します。 + **framework** – これを調整して Express サーバー設定を指定します。 + **imageSettings** – 画像の最適化を処理する場合を除き、このセクションは Express サーバー用のオプションです。 + **routes** – これらは、トラフィックをアプリケーションの適切な部分にルーティングするために重要です。`"kind": "Compute"` ルートはトラフィックをサーバーロジックにルーティングします。 + **computeResources** – このセクションを使用して、Express サーバーのランタイムとエントリポイントを指定します。 次に、ビルドされたアプリケーションアーティファクトを `.amplify-hosting` デプロイバンドルに移動するビルド後スクリプトを設定します。ディレクトリ構造は、Amplify ホスティングのデプロイ仕様と整合しています。 **ビルド後のスクリプトを設定する** 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. `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" } ``` 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 ホスティングにデプロイします。 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 ホスティングによって提供されるデフォルトの URL でアプリケーションにアクセスします。