

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

# Menerapkan aplikasi Astro.js untuk Amplify Hosting
<a name="get-started-astro"></a>

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](https://docs.astro.build/en/install-and-setup/#use-a-theme-or-starter-template) 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](https://github.com/alexnguyennz/astro-aws-amplify) 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.

1. Untuk menginstal adaptor, buka jendela terminal dan jalankan perintah berikut. Contoh ini menggunakan adaptor komunitas yang tersedia di [github. com/alexnguyennz/astro-aws-amplify](https://github.com/alexnguyennz/astro-aws-amplify). Anda dapat mengganti *astro-aws-amplify* dengan nama adaptor yang Anda gunakan.

   ```
   npm install astro-aws-amplify
   ```

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

   ```
   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',
   });
   ```

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

   Sekarang Anda siap untuk menerapkan aplikasi Astro Anda ke Amplify.

1. Masuk ke Konsol Manajemen AWS dan buka konsol [Amplify](https://console.aws.amazon.com/amplify/).

1. Pada halaman **Semua aplikasi**, pilih **Buat aplikasi baru**.

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

1. Di halaman **Tambahkan cabang repositori**, lakukan langkah berikut:

   1. Pilih nama repositori untuk terhubung.

   1. Pilih nama cabang repositori untuk terhubung.

   1. Pilih **Berikutnya**.

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

1. Anda juga harus memperbarui perintah build frontend aplikasi dalam spesifikasi build. Untuk membuka spesifikasi build, pilih **Edit file YHTML**.

1. Dalam `amplify.yml` file, cari bagian perintah build frontend. Masuk **mv node\$1modules ./.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/**/*'
   ```

1. Pilih **Simpan**.

1. 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 aplikasi SSR** di bagian penyebaran **Server-Side Rendering (**SSR).

1. Pilih **Berikutnya**.

1. Di halaman **Tinjauan**, pilih **Simpan dan deploy**.