Menyebarkan server Express menggunakan manifes penerapan

Contoh ini menjelaskan cara menerapkan server Express dasar menggunakan spesifikasi penerapan Amplify Hosting. Anda dapat memanfaatkan manifes penerapan yang disediakan untuk menentukan perutean, sumber daya komputasi, dan konfigurasi lainnya.

Siapkan server Express secara lokal sebelum menerapkan ke Amplify Hosting

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
```

Siapkan manifes penerapan Amplify

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.

version — Menunjukkan versi spesifikasi penerapan yang Anda gunakan.
framework - Sesuaikan ini untuk menentukan pengaturan Express server Anda.
imageSettings— Bagian ini opsional untuk Express server kecuali Anda menangani optimasi gambar.
rute — Ini sangat penting untuk mengarahkan lalu lintas ke bagian kanan aplikasi Anda. "kind": "Compute"Rute mengarahkan lalu lintas ke logika server Anda.
computeResources— Gunakan bagian ini untuk menentukan runtime dan titik masuk Express server Anda.

Selanjutnya, siapkan skrip pasca-build yang memindahkan artefak aplikasi yang dibangun ke dalam bundel .amplify-hosting penerapan. Struktur direktori selaras dengan spesifikasi penerapan Amplify Hosting.

Siapkan skrip pasca-build

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.

Struktur direktori akhir Anda akan terlihat seperti berikut ini.


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

Menyebarkan 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.

Awas Javascript dinonaktifkan atau tidak tersedia di browser Anda.

Untuk menggunakan Dokumentasi AWS, Javascript harus diaktifkan. Lihat halaman Bantuan browser Anda untuk petunjuk.

Konvensi Dokumen

Spesifikasi penyebaran

Optimalisasi gambar untuk penulis kerangka kerja