Memulai dengan Amplify Hosting

Untuk membantu Anda memahami cara kerja Amplify Hosting, tutorial ini memandu Anda melalui pembuatan dan penerapan aplikasi Next.js dari repositori Git.

Prasyarat

Sebelum Anda memulai tutorial ini, selesaikan prasyarat berikut.

Mendaftar untuk Akun AWS

Jika Anda belum menjadi AWS pelanggan, Anda perlu membuat Akun AWS 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-appinstruksi 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.

2. Jika Anda menerapkan aplikasi pertama Anda di Wilayah saat ini, secara default Anda akan mulai dari halaman AWS Amplifylayanan.

   Pilih Buat aplikasi baru di bagian atas halaman.

3. 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, lihatMenyiapkan akses Amplify ke GitHub repositori.

   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.

4. Pada halaman Add repository branch lakukan hal berikut:

   1. Pilih nama repositori untuk terhubung.

   2. Pilih nama cabang repositori untuk terhubung.

   3. Pilih Selanjutnya.

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.

2. 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.

     2. Dalam daftar peran layanan, pilih peran yang akan digunakan.

3. Pilih Selanjutnya.

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.

2. Pilih Simpan dan deploy. Front end build Anda biasanya membutuhkan waktu 1 hingga 2 menit, tetapi dapat bervariasi berdasarkan ukuran aplikasi.

3. 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). 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 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.

2. Pada halaman Pengaturan umum, pilih Hapus aplikasi.

3. Di jendela konfirmasi, masukkandelete. Kemudian pilih Hapus aplikasi.

Menambahkan fitur ke aplikasi Anda

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.

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, misalnyahttps://www.example.com. Untuk informasi selengkapnya, lihat Menyiapkan domain kustom.

Tarik pratinjau permintaan

Pratinjau permintaan tarik web menawarkan tim cara untuk melihat pratinjau perubahan dari permintaan tarik (PR) sebelum menggabungkan kode ke cabang produksi atau integrasi. Untuk informasi selengkapnya, lihat pratinjau Web untuk permintaan tarik.

Mengelola beberapa lingkungan

Untuk mempelajari cara Amplify bekerja dengan cabang fitur dan GitFlow alur kerja untuk mendukung beberapa penerapan, lihat Penerapan cabang fitur dan alur kerja tim.