Implementación de un servidor Express mediante el manifiesto de implementación

En este ejemplo, se explica cómo implementar un servidor Express básico mediante la especificación de implementación de Amplify Hosting. Puede utilizar el manifiesto de implementación proporcionado para especificar el enrutamiento, los recursos de computación y otras configuraciones.

Configure un servidor Express localmente antes de implementarlo en Amplify Hosting

Cree un nuevo directorio para su proyecto e instale Express y 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

Agregue un archivo tsconfig.json a la raíz de su proyecto con el siguiente contenido.


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

Cree un directorio denominado src en la raíz del proyecto.

Cree un archivo index.ts en el directorio src. Será el punto de entrada a la aplicación que inicia un servidor Express. El servidor debe configurarse para escuchar en el puerto 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();
});

Agregue los siguientes scripts al archivo package.json.


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

Cree un directorio denominado public en la raíz del proyecto. A continuación, cree un archivo denominado hello-world.txt con el siguiente contenido.
```
Hello world!
```
Agregue un archivo .gitignore a la raíz de su proyecto con el siguiente contenido.
```
.amplify-hosting
dist
node_modules
```

Configuración del manifiesto de implementación de Amplify

Cree un archivo denominado deploy-manifest.json en el directorio raíz del proyecto.

Copie y pegue el siguiente manifiesto en el archivo 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"
    }
  ]
}

En el manifiesto se describe cómo Amplify Hosting debe gestionar la implementación de su aplicación. La configuración principal es la siguiente.

version: indica la versión de la especificación de implementación que está utilizando.
framework: ajústela para especificar la configuración del servidor Express.
imageSettings: esta sección es opcional para un servidor Express, a menos que esté gestionando la optimización de imágenes.
routes: son fundamentales para dirigir el tráfico a las partes correctas de la aplicación. La ruta "kind": "Compute" dirige el tráfico a la lógica del servidor.
computeResources: utilice esta sección para especificar el tiempo de ejecución y el punto de entrada del servidor Express.

A continuación, configure un script posterior a la compilación que transfiera los artefactos de la aplicación creada al paquete de implementación .amplify-hosting. La estructura de directorios se alinea con la especificación de implementación de Amplify Hosting.

Configuración del script posterior a la compilación

Cree un directorio denominado bin en la raíz del proyecto.

Cree un archivo denominado postbuild.sh en el directorio bin. Añada el siguiente contenido al archivo 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

Agregue un script postbuild al archivo package.json. El archivo debe tener un aspecto similar al siguiente.


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

Ejecute el siguiente comando para compilar la aplicación.
```
npm run build
```
(Opcional) Ajuste las rutas para Express. Puede modificar las rutas del manifiesto de implementación para adaptarlas al servidor Express. Por ejemplo, si no tiene ningún activo estático en el directorio public, es posible que solo necesite que la ruta de método catch-all "path": "/*" se dirija a Compute. Esto dependerá de la configuración del servidor.

La estructura de directorios final debería ser similar a la siguiente.


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

Implementación del servidor

Inserte el código en el repositorio de Git y, a continuación, implemente la aplicación en Amplify Hosting.
Actualice la configuración de compilación para apuntar baseDirectory a .amplify-hosting de la siguiente forma. Durante la compilación, Amplify detectará el archivo de manifiesto en el directorio .amplify-hosting e implementará el servidor Express según la configuración.
```
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .amplify-hosting
    files:
      - '**/*'
```
Para comprobar que la implementación se ha realizado correctamente y que el servidor funciona de forma adecuada, visite la aplicación en la URL predeterminada que proporciona Amplify Hosting.

Aviso JavaScript está desactivado o no está disponible en su navegador.

Para utilizar la documentación de AWS, debe estar habilitado JavaScript. Para obtener más información, consulte las páginas de ayuda de su navegador.

Convenciones del documento

Especificación de implementación

Optimización de imágenes para aplicaciones de SSR