Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris. # 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** 1. 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 ``` 1. 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"] } ``` 1. Buat direktori bernama `src` di root proyek Anda. 1. 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(); }); ``` 1. Tambahkan skrip berikut ke `package.json` file Anda. ``` "scripts": { "start": "ts-node src/index.ts", "build": "tsc", "serve": "node dist/index.js" } ``` 1. Buat direktori bernama `public` di root proyek Anda. Kemudian buat file bernama `hello-world.txt` dengan konten berikut. ``` Hello world! ``` 1. Tambahkan `.gitignore` file ke root proyek Anda dengan konten berikut. ``` .amplify-hosting dist node_modules ``` **Siapkan manifes penerapan Amplify** 1. Buat file bernama `deploy-manifest.json` di direktori root proyek Anda. 1. 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": "nodejs22.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 Express masuk 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** 1. Buat direktori bernama `bin` di root proyek Anda. 1. 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 ``` 1. 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" } ``` 1. Jalankan perintah berikut untuk membangun aplikasi Anda. ``` npm run build ``` 1. (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** 1. Dorong kode Anda ke repositori Git Anda, lalu terapkan aplikasi Anda ke Amplify Hosting. 1. 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: - '**/*' ``` 1. Untuk memverifikasi bahwa penerapan Anda berhasil dan server Anda berjalan dengan benar, kunjungi aplikasi Anda di URL default yang disediakan oleh Amplify Hosting.