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

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

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

Crea una directory denominata src nella radice del tuo progetto.

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();
});

Aggiungi i seguenti script al tuo package.json file.


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

Crea una directory denominata public nella radice del tuo progetto. Quindi crea un file denominato hello-world.txt con i seguenti contenuti.
```
Hello world!
```
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

Crea un file denominato deploy-manifest.json nella directory principale del tuo progetto.

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": "nodejs18.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 — Modifica questo valore per specificare il tuo Express configurazione del server.
imageSettings— Questa sezione è facoltativa per Express server a meno che tu non 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— Usa questa sezione per specificare il tuo Express runtime e punto di ingresso del server.

Successivamente, configura uno script di post-compilazione che sposti gli artefatti dell'applicazione compilata nel .amplify-hosting pacchetto di distribuzione. La struttura delle directory è in linea con le specifiche di distribuzione di Amplify Hosting.

Configura lo script di post-compilazione

Crea una directory denominata bin nella radice del tuo progetto.

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

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

Esegui il comando seguente per creare la tua applicazione.
```
npm run build
```
(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

Invia il codice al tuo repository Git e poi distribuisci la tua app su Amplify Hosting.
Aggiorna le impostazioni di build in modo che punti a quanto seguebaseDirectory. .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:
      - '**/*'
```
Per verificare che la distribuzione sia andata a buon fine e che il server funzioni correttamente, visita l'app con l'impostazione predefinita URL fornita da Amplify Hosting.

Avvertimento JavaScript è disabilitato o non è disponibile nel tuo browser.

Per usare la documentazione AWS, JavaScript deve essere abilitato. Consulta le pagine della guida del browser per le istruzioni.

Convenzioni dei documenti

Specifiche di distribuzione

Ottimizzazione delle immagini per gli autori del framework