Menyebarkan server Express menggunakan manifes penerapan

Buat direktori baru untuk proyek Anda dan instal Express dan 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
        

Tambahkan tsconfig.json file ke root proyek Anda dengan konten berikut.

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

Buat direktori bernama src di root proyek Anda.

Buat index.ts file di src direktori. Ini akan menjadi titik masuk ke aplikasi yang memulai server Express. Server harus dikonfigurasi untuk mendengarkan pada port 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();
});

Tambahkan skrip berikut ke package.json file Anda.

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

Buat direktori bernama public di root proyek Anda. Kemudian buat file bernama hello-world.txt dengan konten berikut.

Hello world!

Tambahkan .gitignore file ke root proyek Anda dengan konten berikut.

.amplify-hosting
dist
node_modules

Buat file bernama deploy-manifest.json di direktori root proyek Anda.

Salin dan tempel manifes berikut ke dalam deploy-manifest.json file Anda.

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

Manifes menjelaskan bagaimana Amplify Hosting harus menangani penerapan aplikasi Anda. Pengaturan utama adalah sebagai berikut.

Buat direktori bernama bin di root proyek Anda.

Buat file bernama postbuild.sh di bin direktori. Tambahkan konten berikut ini ke 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

Tambahkan postbuild skrip ke package.json file Anda. File akan terlihat seperti berikut ini.

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

Jalankan perintah berikut untuk membangun aplikasi Anda.

npm run build

(Opsional) Sesuaikan rute Anda untuk Express. Anda dapat memodifikasi rute dalam manifes penerapan agar sesuai dengan server Express Anda. Misalnya, jika Anda tidak memiliki aset statis di public direktori, Anda mungkin hanya memerlukan rute catch-all yang "path": "/*" mengarahkan ke Compute. Ini akan tergantung pada pengaturan server Anda.

Dorong kode Anda ke repositori Git Anda, lalu terapkan aplikasi Anda ke Amplify Hosting.

Perbarui setelan build Anda untuk menunjuk baseDirectory ke .amplify-hosting sebagai berikut. Selama pembuatan, Amplify akan mendeteksi file manifes di .amplify-hosting direktori dan menerapkan server Express Anda seperti yang dikonfigurasi.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .amplify-hosting
    files:
      - '**/*'

Untuk memverifikasi bahwa penerapan Anda berhasil dan server Anda berjalan dengan benar, kunjungi aplikasi Anda di default yang URL disediakan oleh Amplify Hosting.