Menerapkan aplikasi Astro.js untuk Amplify Hosting

Gunakan petunjuk berikut untuk menyebarkan aplikasi Astro.js ke Amplify Hosting. Anda dapat menggunakan aplikasi yang sudah ada, atau membuat aplikasi starter menggunakan salah satu contoh resmi yang disediakan Astro. Untuk membuat aplikasi pemula, lihat Menggunakan tema atau template starter dalam dokumentasi Astro.

Untuk menyebarkan situs Astro dengan SSR Amplify Hosting, Anda harus menambahkan adaptor ke aplikasi Anda. Kami tidak memelihara adaptor milik Amplify untuk kerangka kerja Astro. Tutorial ini menggunakan astro-aws-amplify adaptor yang dibuat oleh anggota komunitas. Adaptor ini tersedia di astro-aws-amplifygithub.com/alexnguyennz/ di situs web. GitHub AWS tidak mempertahankan adaptor ini.

Untuk menerapkan aplikasi Astro ke Amplify Hosting

1. Di komputer lokal Anda, navigasikan ke aplikasi Astro untuk menyebarkan.

2. Untuk menginstal adaptor, buka jendela terminal dan jalankan perintah berikut. Contoh ini menggunakan adaptor komunitas yang tersedia di astro-aws-amplifygithub.com/alexnguyennz/. Anda dapat mengganti astro-aws-amplify dengan nama adaptor yang Anda gunakan.

   npm install astro-aws-amplify

3. Di folder proyek untuk aplikasi Astro Anda, buka astro.config.mjs file. Perbarui file untuk menambahkan adaptor. File akan terlihat seperti berikut ini.

   import { defineConfig } from 'astro/config';
   import mdx from '@astrojs/mdx';
   import awsAmplify from 'astro-aws-amplify';
    
   import sitemap from '@astrojs/sitemap';
    
   // https://astro.build/config
   export default defineConfig({
     site: 'https://example.com',
     integrations: [mdx(), sitemap()],
     adapter: awsAmplify(),
     output: 'server',
   });

4. Komit perubahan dan dorong proyek ke repositori Git Anda.

   Sekarang Anda siap untuk menerapkan aplikasi Astro Anda ke Amplify.

5. Masuk ke AWS Management Console dan buka konsol Amplify.

6. Pada halaman Semua aplikasi, pilih Buat aplikasi baru.

7. Pada halaman Mulai membangun dengan Amplify, pilih penyedia repositori Git Anda, lalu pilih Berikutnya.

8. Di halaman Tambahkan cabang repositori, lakukan langkah berikut:

   1. Pilih nama repositori untuk terhubung.

   2. Pilih nama cabang repositori untuk terhubung.

   3. Pilih Berikutnya.

9. Di halaman Pengaturan aplikasi, cari bagian Pengaturan build. Untuk direktori keluaran Build, masukkan.amplify-hosting.

10. Anda juga harus memperbarui perintah build frontend aplikasi dalam spesifikasi build. Untuk membuka spesifikasi build, pilih Edit YML file.

11. Dalam amplify.yml file, cari bagian perintah build frontend. Masuk mv node_modules ./.amplify-hosting/compute/default

    File setelan build Anda akan terlihat seperti berikut ini.

    version: 1
    frontend:
        phases:
            preBuild:
                commands:
                    - 'npm ci --cache .npm --prefer-offline'
            build:
                commands:
                    - 'npm run build'
                    - 'mv node_modules ./.amplify-hosting/compute/default'
        artifacts:
            baseDirectory: .amplify-hosting
            files:
                - '**/*'
        cache:
            paths:
                - '.npm/**/*'
                

12. Pilih Simpan.

13. Jika Anda ingin Amplify dapat mengirimkan log aplikasi ke Amazon CloudWatch Logs, Anda harus mengaktifkannya secara eksplisit di konsol. Buka bagian Pengaturan lanjutan, lalu pilih Aktifkan log SSR aplikasi di bagian penyebaran Rendering Sisi Server () SSR.

14. Pilih Berikutnya.

15. Di halaman Tinjauan, pilih Simpan dan deploy.