Como implantar um servidor Express usando o manifesto de implantação

Este exemplo explica como implantar um servidor Express básico usando a especificação de implantação do Amplify Hosting. Você pode aproveitar o manifesto de implantação fornecido para especificar roteamento, recursos computacionais e outras configurações.

Configurar um servidor Express localmente antes da implantação no Amplify Hosting

Crie um novo diretório para seu projeto e instale o Express e o 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

Adicione um arquivo tsconfig.json à raiz do seu projeto com o conteúdo a seguir.


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

Crie um diretório chamado src na raiz do projeto.

Crie um arquivo index.ts no diretório src. Esse será o ponto de entrada para a aplicação que inicia um servidor Express. Configure o servidor para escutar na 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();
});

Adicione os seguintes scripts ao seu arquivo package.json.


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

Crie um diretório chamado public na raiz do seu projeto. Em seguida, crie um arquivo chamado hello-world.txt com o conteúdo a seguir.
```
Hello world!
```
Adicione um arquivo .gitignore à raiz do projeto com o conteúdo a seguir.
```
.amplify-hosting
dist
node_modules
```

Configurar o manifesto de implantação do Amplify

Crie um arquivo chamado deploy-manifest.json no diretório raiz do projeto.

Copie e cole o manifesto a seguir no seu arquivo 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"
    }
  ]
}

O manifesto descreve como o Amplify Hosting deve processar a implantação da sua aplicação. As configurações principais são as seguintes.

version: indica a versão da especificação de implantação que você está usando.
framework: ajuste para especificar a configuração do seu servidor Express.
imageSettings: a menos que você esteja lidando com otimização de imagem, essa seção é opcional para um servidor Express.
routes: são essenciais para direcionar o tráfego para as partes certas da sua aplicação. A rota "kind": "Compute" direciona o tráfego para a lógica do seu servidor.
computeResources: use essa seção para especificar o runtime e o ponto de entrada do seu servidor Express.

Em seguida, configure um script de pós-compilação que mova os artefatos da aplicação compilada para o pacote de implantação .amplify-hosting. A estrutura de diretórios estará alinhada com a especificação de implantação do Amplify Hosting.

Configurar o script de pós-compilação

Crie um diretório chamado bin na raiz do projeto.

Crie um arquivo chamado postbuild.sh no diretório bin. Adicione o conteúdo a seguir ao arquivo 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

Adicione um script postbuild ao seu arquivo package.json. O arquivo deve ser semelhante ao seguinte.


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

Execute o comando a seguir para compilar sua aplicação.
```
npm run build
```
(Opcional) Ajuste suas rotas para o Express. Você pode modificar as rotas em seu manifesto de implantação para que se ajustem ao seu servidor Express. Por exemplo, se você não tiver nenhum ativo estático no diretório public, talvez precise apenas da rota abrangente "path": "/*" direcionada para Compute. Isso dependerá da configuração do seu servidor.

A estrutura final de diretórios deve ter a seguinte aparência.


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

Implantar seu servidor

Faça push do seu código para o repositório Git e então implante sua aplicação no Amplify Hosting.
Atualize suas configurações de compilação a fim de apontar baseDirectory para .amplify-hosting da seguinte maneira. Durante a compilação, o Amplify detectará o arquivo de manifesto no diretório .amplify-hosting e implantará seu servidor Express conforme configurado.
```
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .amplify-hosting
    files:
      - '**/*'
```
Para verificar se sua implantação foi bem-sucedida e se o servidor está funcionando corretamente, visite sua aplicação no URL padrão fornecido pelo Amplify Hosting.

Atenção O Javascript está desativado ou não está disponível no seu navegador.

Para usar a documentação da AWS, o Javascript deve estar ativado. Consulte as páginas de Ajuda do navegador para obter instruções.

Convenções do documento

Especificação de implantação

Otimização de imagem para aplicações de SSR