As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá. # 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. É possível 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** 1. 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 ``` 1. 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"] } ``` 1. Crie um diretório chamado `src` na raiz do projeto. 1. 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(); }); ``` 1. Adicione os seguintes scripts ao seu arquivo `package.json`. ``` "scripts": { "start": "ts-node src/index.ts", "build": "tsc", "serve": "node dist/index.js" } ``` 1. 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! ``` 1. 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** 1. Crie um arquivo chamado `deploy-manifest.json` no diretório raiz do projeto. 1. 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": "nodejs22.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** 1. Crie um diretório chamado `bin` na raiz do projeto. 1. 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 ``` 1. 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" } ``` 1. Execute o comando a seguir para compilar sua aplicação. ``` npm run build ``` 1. (Opcional) Ajuste suas rotas para o Express. É possível 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** 1. Faça push do seu código para o repositório Git e então implante sua aplicação no Amplify Hosting. 1. 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: - '**/*' ``` 1. 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.