View a markdown version of this page

Menyebarkan Astro.js aplikasi ke Amplify Hosting - AWS Amplify Hosting

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Menyebarkan Astro.js aplikasi ke Amplify Hosting

Gunakan petunjuk berikut untuk menerapkan Astro.js aplikasi 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 pemula dalam dokumentasi Astro.

Untuk menyebarkan situs Astro dengan SSR ke 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 github. com/alexnguyennz/astro-aws- amplify di situs web. GitHub AWS tidak mempertahankan adaptor ini.

Untuk menyebarkan aplikasi Astro ke Amplify Hosting

  1. Di komputer lokal Anda, arahkan ke aplikasi Astro untuk digunakan.

  2. Untuk menginstal adaptor, buka jendela terminal dan jalankan perintah berikut. Contoh ini menggunakan adaptor komunitas yang tersedia di github. com/alexnguyennz/astro-aws-memperkuat. 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. Lakukan perubahan dan dorong proyek ke repositori Git Anda.

    Sekarang Anda siap untuk menerapkan aplikasi Astro Anda ke Amplify.

  5. Masuk ke Konsol Manajemen AWS dan buka konsol https://console.aws.amazon.com/amplify/ Amplify.

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

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

  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. Pada halaman Pengaturan aplikasi, cari bagian Peng aturan Bangun. Untuk Build output direktori masukkan.amplify-hosting.

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

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

    File pengaturan 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 Peng aturan lanjutan, lalu pilih Aktifkan log aplikasi SSR di bagian penyebaran Server-Side Rendering (SSR).

  14. Pilih Berikutnya.

  15. Di halaman Tinjauan, pilih Simpan dan deploy.