Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris. # Memulai dengan menerapkan aplikasi ke Amplify Hosting Untuk membantu Anda memahami cara kerja Amplify Hosting, tutorial berikut memandu Anda dalam membangun dan menerapkan aplikasi yang dibuat menggunakan kerangka kerja SSR umum yang didukung Amplify. **Topics** + [Menerapkan aplikasi Next.js](getting-started-next.md) + [Menerapkan aplikasi Nuxt.js](get-started-nuxt.md) + [Menerapkan aplikasi Astro.js](get-started-astro.md) + [Menerapkan aplikasi SvelteKit](get-started-sveltekit.md) # Menerapkan aplikasi Next.js untuk Amplify Hosting Tutorial ini memandu Anda melalui membangun dan menyebarkan aplikasi Next.js dari repositori Git. Sebelum Anda memulai tutorial ini, lengkapi prasyarat berikut. **Mendaftar untuk Akun AWS** Jika Anda belum menjadi AWS pelanggan, Anda perlu [membuat Akun AWS](https://portal.aws.amazon.com/billing/signup#/start/email) dengan mengikuti instruksi online. Mendaftar memungkinkan Anda mengakses Amplify dan AWS layanan lain yang dapat Anda gunakan dengan aplikasi Anda. **Membuat aplikasi** Buat aplikasi Next.js dasar untuk digunakan untuk tutorial ini, menggunakan [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app)instruksi dalam *dokumentasi Next.js*. **Buat repositori Git** Amplify mendukung GitHub, Bitbucket,, GitLab dan. AWS CodeCommit Dorong `create-next-app` aplikasi Anda ke repositori Git Anda. ## Langkah 1: Hubungkan repositori Git Pada langkah ini, Anda menghubungkan aplikasi Next.js Anda di repositori Git ke Amplify Hosting. **Untuk menghubungkan aplikasi di repositori Git** 1. Buka konsol [Amplify](https://console.aws.amazon.com/amplify/). 1. Jika Anda menerapkan aplikasi pertama Anda di Wilayah saat ini, secara default Anda akan mulai dari halaman **AWS Amplify**layanan. Pilih **Menerapkan aplikasi** di bagian atas halaman. 1. **Pada halaman **Mulai membangun dengan Amplify**, pilih penyedia repositori Git Anda, lalu pilih Berikutnya.** Untuk GitHub repositori, Amplify menggunakan fitur GitHub Apps untuk mengotorisasi akses Amplify. Untuk informasi selengkapnya tentang menginstal dan mengotorisasi GitHub Aplikasi, lihat[Menyiapkan akses Amplify ke repositori GitHub](setting-up-GitHub-access.md). **catatan** *Setelah Anda mengotorisasi konsol Amplify dengan Bitbucket GitLab,, atau AWS CodeCommit, Amplify mengambil token akses dari penyedia repositori, tetapi token tersebut tidak menyimpan token di server.* AWS Amplify mengakses repositori Anda menggunakan kunci deploy yang terinstal di repositori tertentu saja. 1. Pada halaman **Add repository branch** lakukan hal berikut: 1. Pilih nama repositori untuk terhubung. 1. Pilih nama cabang repositori untuk terhubung. 1. Pilih **Berikutnya**. ## Langkah 2: Konfirmasikan pengaturan build Amplify secara otomatis mendeteksi urutan perintah build yang akan dijalankan untuk cabang yang Anda terapkan. Pada langkah ini Anda meninjau dan mengonfirmasi setelan build Anda. **Untuk mengonfirmasi setelan build untuk aplikasi** 1. Di halaman **Pengaturan aplikasi**, cari bagian **Pengaturan build**. Verifikasi bahwa **perintah build Frontend** dan **direktori keluaran Build** sudah benar. Untuk aplikasi contoh Next.js ini, **direktori keluaran Build** disetel ke`.next`. 1. Prosedur untuk menambahkan peran layanan bervariasi tergantung pada apakah Anda ingin membuat peran baru atau menggunakan peran yang sudah ada. + Untuk membuat peran baru: 1. Pilih **Buat dan gunakan peran layanan baru**. + Untuk menggunakan peran yang ada: 1. Pilih **Gunakan peran yang ada**. 1. Dalam daftar peran layanan, pilih peran yang akan digunakan. 1. Pilih **Berikutnya**. ## Langkah 3: Deploy aplikasi Pada langkah ini, Anda menerapkan aplikasi ke jaringan pengiriman konten AWS global (CDN). **Untuk menyimpan dan menerapkan aplikasi** 1. Pada halaman **Tinjauan**, konfirmasikan bahwa detail repositori dan pengaturan aplikasi Anda sudah benar. 1. Pilih **Simpan dan deploy**. Pembuatan ujung depan Anda biasanya membutuhkan waktu 1 hingga 2 menit, tetapi dapat bervariasi berdasarkan ukuran aplikasi. 1. Saat penerapan selesai, Anda dapat melihat aplikasi menggunakan tautan ke domain `amplifyapp.com` default. **catatan** *[Untuk meningkatkan keamanan aplikasi Amplify Anda, domain amplifyapp.com terdaftar di Daftar Akhiran Publik (PSL).](https://publicsuffix.org/)* Untuk keamanan lebih lanjut, kami menyarankan Anda menggunakan cookie dengan `__Host-` awalan jika Anda perlu mengatur cookie sensitif di nama domain default untuk aplikasi Amplify Anda. Praktik ini akan membantu mempertahankan domain Anda dari upaya pemalsuan permintaan lintas situs (CSRF). Untuk informasi selengkapnya, lihat halaman [Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) di Jaringan Pengembang Mozilla. ## Langkah 4: (Opsional) membersihkan sumber daya Jika Anda tidak lagi membutuhkan aplikasi yang Anda gunakan untuk tutorial, Anda dapat menghapusnya. Langkah ini membantu memastikan bahwa Anda tidak akan dikenakan biaya untuk sumber daya yang tidak Anda gunakan. **Untuk menghapus aplikasi** 1. Dari menu **Pengaturan aplikasi** di panel navigasi, pilih **Pengaturan umum**. 1. Pada halaman **Pengaturan umum**, pilih **Hapus aplikasi**. 1. Di jendela konfirmasi, masukkan**delete**. Kemudian pilih **Hapus aplikasi**. ## Menambahkan fitur ke aplikasi Sekarang setelah aplikasi disebarkan ke Amplify, Anda dapat menjelajahi beberapa fitur berikut yang tersedia untuk aplikasi yang dihosting. **Variabel-variabel lingkungan** Aplikasi sering membutuhkan informasi konfigurasi saat runtime. Konfigurasi ini dapat berupa detail koneksi database, kunci API, atau parameter. Variabel lingkungan menyediakan cara untuk mengekspos konfigurasi ini pada waktu pembuatan. Untuk informasi selengkapnya, lihat [Variabel lingkungan](environment-variables.md). **Domain kustom** Dalam tutorial ini, Amplify meng-host aplikasi Anda untuk Anda di `amplifyapp.com` domain default dengan URL seperti. `https://branch-name.d1m7bkiki6tdw1.amplifyapp.com` Saat Anda menghubungkan aplikasi ke domain khusus, pengguna akan melihat bahwa aplikasi Anda di-host di URL khusus, misalnya`https://www.example.com`. Untuk informasi selengkapnya, lihat [Menyiapkan domain kustom](custom-domains.md). **Tarik pratinjau permintaan** Pratinjau permintaan tarik web menawarkan tim cara untuk melihat pratinjau perubahan dari permintaan tarik (PRs) sebelum menggabungkan kode ke cabang produksi atau integrasi. Untuk informasi selengkapnya, lihat [pratinjau Web untuk permintaan tarik](pr-previews.md). **Mengelola beberapa lingkungan** Untuk mempelajari cara Amplify bekerja dengan cabang fitur dan GitFlow alur kerja untuk mendukung beberapa penerapan, lihat Penerapan [cabang fitur](multi-environments.md) dan alur kerja tim. # Menerapkan aplikasi Nuxt.js untuk Amplify Hosting Gunakan petunjuk berikut untuk menyebarkan aplikasi Nuxt.js ke Amplify Hosting. Nuxt telah menerapkan adaptor preset menggunakan server Nitro. Ini memungkinkan Anda untuk menerapkan proyek Nuxt tanpa konfigurasi tambahan apa pun. **Untuk menerapkan aplikasi Nuxt ke Amplify Hosting** 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. 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**. # 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](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**. # Menerapkan SvelteKit aplikasi untuk Amplify Hosting Gunakan petunjuk berikut untuk menyebarkan SvelteKit aplikasi ke Amplify Hosting. Anda dapat menggunakan aplikasi Anda sendiri, atau membuat aplikasi pemula. Untuk informasi selengkapnya, lihat [Membuat proyek](https://kit.svelte.dev/docs/creating-a-project) dalam *SvelteKit dokumentasi*. Untuk menerapkan SvelteKit aplikasi dengan SSR ke Amplify Hosting, Anda harus menambahkan adaptor ke proyek Anda. Kami tidak memelihara adaptor yang dimiliki Amplify untuk kerangka kerja. SvelteKit Dalam contoh ini, kami menggunakan yang `amplify-adapter` dibuat oleh anggota komunitas. Adaptor tersedia di [github. com/gzimbron/amplify-adaptor](https://github.com/gzimbron/amplify-adapter) di GitHub situs web. AWS tidak mempertahankan adaptor ini. **Untuk menerapkan SvelteKit aplikasi ke Amplify Hosting** 1. Di komputer lokal Anda, navigasikan ke SvelteKit aplikasi untuk menyebarkan. 1. Untuk menginstal adaptor, buka jendela terminal dan jalankan perintah berikut. Contoh ini menggunakan adaptor komunitas yang tersedia di [github. com/gzimbron/amplify-adaptor](https://github.com/gzimbron/amplify-adapter). Jika Anda menggunakan adaptor komunitas yang berbeda, ganti *amplify-adapter* dengan nama adaptor Anda. ``` npm install amplify-adapter ``` 1. Di folder project untuk SvelteKit aplikasi Anda, buka `svelte.config.js` file. Edit file untuk menggunakan `amplify-adapter` atau mengganti *'amplify-adapter'* dengan nama adaptor Anda. File akan terlihat seperti berikut. ``` import adapter from 'amplify-adapter'; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; /** @type {import('@sveltejs/kit').Config} */ const config = { // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors preprocess: vitePreprocess(), kit: { // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // If your environment is not supported, or you settled on a specific environment, switch out the adapter. // See https://kit.svelte.dev/docs/adapters for more information about adapters. adapter: adapter() } }; export default config; ``` 1. Komit perubahan dan dorong aplikasi ke repositori Git Anda. 1. Sekarang Anda siap untuk menerapkan SvelteKit aplikasi Anda ke Amplify. 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**build**. 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 **- cd build/compute/default/** dan**- npm i --production**. 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' - 'cd build/compute/default/' - 'npm i --production' artifacts: baseDirectory: build 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**.