Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés. # 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** 1. 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 ``` 1. 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"] } ``` 1. Cree un directorio denominado `src` en la raíz del proyecto. 1. 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(); }); ``` 1. Agregue los siguientes scripts al archivo `package.json`. ``` "scripts": { "start": "ts-node src/index.ts", "build": "tsc", "serve": "node dist/index.js" } ``` 1. 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! ``` 1. 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** 1. Cree un archivo denominado `deploy-manifest.json` en el directorio raíz del proyecto. 1. 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": "nodejs22.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** 1. Cree un directorio denominado `bin` en la raíz del proyecto. 1. 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 ``` 1. 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" } ``` 1. Ejecute el siguiente comando para compilar la aplicación. ``` npm run build ``` 1. (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** 1. Inserte el código en el repositorio de Git y, a continuación, implemente la aplicación en Amplify Hosting. 1. 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: - '**/*' ``` 1. 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.