Déploiement d'un serveur Express à l'aide du manifeste de déploiement

Cet exemple explique comment déployer un serveur Express de base à l'aide de la spécification de déploiement d'Amplify Hosting. Vous pouvez utiliser le manifeste de déploiement fourni pour spécifier le routage, les ressources de calcul et d'autres configurations.

Configurer un serveur Express localement avant de le déployer sur Amplify Hosting

Créez un nouveau répertoire pour votre projet et installez Express et 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

Ajoutez un tsconfig.json fichier à la racine de votre projet avec le contenu suivant.


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

Créez un répertoire nommé src à la racine de votre projet.

Créez un index.ts fichier dans le src répertoire. Ce sera le point d'entrée de l'application qui démarre un serveur Express. Le serveur doit être configuré pour écouter sur le port 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();
});

Ajoutez les scripts suivants à votre package.json fichier.


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

Créez un répertoire nommé public à la racine de votre projet. Créez ensuite un fichier nommé hello-world.txt avec le contenu suivant.
```
Hello world!
```
Ajoutez un .gitignore fichier à la racine de votre projet avec le contenu suivant.
```
.amplify-hosting
dist
node_modules
```

Configurer le manifeste de déploiement d'Amplify

Créez un fichier nommé deploy-manifest.json dans le répertoire racine de votre projet.

Copiez et collez le manifeste suivant dans votre deploy-manifest.json fichier.


{
  "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"
    }
  ]
}

Le manifeste décrit comment Amplify Hosting doit gérer le déploiement de votre application. Les principaux paramètres sont les suivants.

version — Indique la version de la spécification de déploiement que vous utilisez.
framework — Ajustez-le pour spécifier la configuration de votre Express serveur.
ImageSettings — Cette section est facultative pour un Express serveur, sauf si vous gérez l'optimisation des images.
itinéraires : ils sont essentiels pour diriger le trafic vers les bonnes parties de votre application. L'"kind": "Compute"itinéraire dirige le trafic vers la logique de votre serveur.
ComputerResources — Utilisez cette section pour spécifier le moteur d'exécution et le point d'entrée de votre Express serveur.

Configurez ensuite un script de post-génération qui déplace les artefacts de l'application créée dans le bundle de .amplify-hosting déploiement. La structure du répertoire est conforme à la spécification de déploiement d'Amplify Hosting.

Configuration du script de post-construction

Créez un répertoire nommé bin à la racine de votre projet.

Créez un fichier nommé postbuild.sh dans le bin répertoire. Ajoutez le contenu suivant au fichier 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

Ajoutez un postbuild script à votre package.json fichier. Le fichier doit ressembler à ce qui suit.


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

Exécutez la commande suivante pour créer votre application.
```
npm run build
```
(Facultatif) Ajustez vos itinéraires pour Express. Vous pouvez modifier les itinéraires de votre manifeste de déploiement pour les adapter à votre serveur Express. Par exemple, si le public répertoire ne contient aucun actif statique, il se peut que vous n'ayez besoin que de la route fourre-tout menant à "path": "/*" Compute. Cela dépend de la configuration de votre serveur.

La structure finale de votre répertoire devrait ressembler à ce qui suit.


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

Déployez votre serveur

Transférez votre code dans votre dépôt Git, puis déployez votre application sur Amplify Hosting.
Mettez à jour vos paramètres de compilation pour qu'ils baseDirectory pointent vers ce qui .amplify-hosting suit. Au cours de la compilation, Amplify détectera le fichier manifeste dans le .amplify-hosting répertoire et déploiera votre serveur Express tel que configuré.
```
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .amplify-hosting
    files:
      - '**/*'
```
Pour vérifier que votre déploiement a réussi et que votre serveur fonctionne correctement, accédez à votre application à l'URL par défaut fournie par Amplify Hosting.

Avertissement JavaScript est désactivé ou n'est pas disponible dans votre navigateur.

Pour que vous puissiez utiliser la documentation AWS, Javascript doit être activé. Vous trouverez des instructions sur les pages d'aide de votre navigateur.

Conventions de rédaction

Spécification de déploiement

Optimisation de l'image pour les applications SSR