Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà. # Distribuzione di un server Express utilizzando il manifesto di distribuzione Questo esempio spiega come implementare un server Express di base utilizzando la specifica di distribuzione Amplify Hosting. È possibile sfruttare il manifesto di distribuzione fornito per specificare il routing, le risorse di calcolo e altre configurazioni. **Configura un server Express localmente prima di distribuirlo su Amplify Hosting** 1. Crea una nuova directory per il tuo progetto e installa Express e 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. Aggiungi un `tsconfig.json` file alla radice del tuo progetto con i seguenti contenuti. ``` { "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "./dist", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src/**/*.ts"], "exclude": ["node_modules"] } ``` 1. Crea una directory denominata `src` nella radice del tuo progetto. 1. Crea un `index.ts` file nella `src` directory. Questo sarà il punto di accesso all'applicazione che avvia un server Express. Il server deve essere configurato per l'ascolto sulla porta 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. Aggiungi i seguenti script al tuo `package.json` file. ``` "scripts": { "start": "ts-node src/index.ts", "build": "tsc", "serve": "node dist/index.js" } ``` 1. Crea una directory denominata `public` nella radice del tuo progetto. Quindi crea un file denominato `hello-world.txt` con i seguenti contenuti. ``` Hello world! ``` 1. Aggiungi un `.gitignore` file alla radice del tuo progetto con i seguenti contenuti. ``` .amplify-hosting dist node_modules ``` **Configurare il manifesto di distribuzione di Amplify** 1. Crea un file denominato `deploy-manifest.json` nella directory principale del tuo progetto. 1. Copia e incolla il seguente manifesto nel tuo `deploy-manifest.json` file. ``` { "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" } ] } ``` Il manifesto descrive come Amplify Hosting dovrebbe gestire la distribuzione dell'applicazione. Le impostazioni principali sono le seguenti. + **versione**: indica la versione della specifica di distribuzione che stai utilizzando. + **framework**: modificalo per specificare la configurazione Express del server. + **ImageSettings**: questa sezione è facoltativa per un Express server a meno che non si stia gestendo l'ottimizzazione delle immagini. + **percorsi**: sono fondamentali per indirizzare il traffico verso le parti giuste dell'app. Il `"kind": "Compute"` percorso indirizza il traffico verso la logica del server. + **ComputeResources**: utilizzate questa sezione per specificare il runtime e il punto di ingresso del Express server. Successivamente, configura uno script di post-compilazione che sposti gli artefatti dell'applicazione integrata nel pacchetto di distribuzione. `.amplify-hosting` La struttura delle directory è in linea con le specifiche di distribuzione di Amplify Hosting. **Configura lo script di post-compilazione** 1. Crea una directory denominata `bin` nella radice del tuo progetto. 1. Crea un file denominato `postbuild.sh` nella `bin` directory. Aggiungi i seguenti contenuti al file `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. Aggiungi uno `postbuild` script al tuo `package.json` file. Il file dovrebbe avere l'aspetto seguente. ``` "scripts": { "start": "ts-node src/index.ts", "build": "tsc", "serve": "node dist/index.js", "postbuild": "chmod +x bin/postbuild.sh && ./bin/postbuild.sh" } ``` 1. Esegui il comando seguente per creare la tua applicazione. ``` npm run build ``` 1. (Facoltativo) Modifica i tuoi percorsi per Express. È possibile modificare i percorsi nel manifesto di distribuzione per adattarli al server Express. Ad esempio, se non hai risorse statiche nella `public` directory, potresti aver bisogno solo del percorso generico che `"path": "/*"` indirizza a Compute. Ciò dipenderà dalla configurazione del server. La struttura finale delle cartelle dovrebbe essere simile alla seguente. ``` 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 ``` **Implementa il tuo server** 1. Invia il codice al tuo repository Git e poi distribuisci la tua app su Amplify Hosting. 1. Aggiorna le impostazioni di build in modo che punti a quanto segue`baseDirectory`. `.amplify-hosting` Durante la compilazione, Amplify rileverà il file manifest nella directory e distribuirà `.amplify-hosting` il server Express come configurato. ``` version: 1 frontend: phases: preBuild: commands: - nvm use 18 - npm install build: commands: - npm run build artifacts: baseDirectory: .amplify-hosting files: - '**/*' ``` 1. Per verificare che la distribuzione sia avvenuta correttamente e che il server funzioni correttamente, visita l'app all'URL predefinito fornito da Amplify Hosting.