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

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

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.

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.

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 selon les paramètres par défaut URL fournis par Amplify Hosting.