Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
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, 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 lainnya AWS layanan yang dapat Anda gunakan dengan aplikasi Anda. - Membuat aplikasi
-
Buat aplikasi Next.js dasar untuk digunakan untuk tutorial ini, menggunakan create-next-app
instruksi dalam dokumentasi Next.js. - Buat repositori Git
-
Amplify mendukung GitHub, Bitbucket, dan GitLab AWS CodeCommit. Dorong
create-next-appaplikasi 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
-
Buka konsol Amplify
. -
Jika Anda menerapkan aplikasi pertama Anda di Wilayah saat ini, secara default Anda akan mulai dari AWS Amplifyhalaman layanan.
Pilih Buat aplikasi baru di bagian atas halaman.
-
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 GitLab Bitbucket,, atau AWS CodeCommit, Amplify mengambil token akses dari penyedia repositori, tetapi tidak menyimpan token di AWS server. Amplify mengakses repositori Anda menggunakan kunci deploy yang terinstal di repositori tertentu saja.
-
Pada halaman Add repository branch lakukan hal berikut:
-
Pilih nama repositori untuk terhubung.
-
Pilih nama cabang repositori untuk terhubung.
-
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
-
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. -
Prosedur untuk menambahkan peran layanan bervariasi tergantung pada apakah Anda ingin membuat peran baru atau menggunakan peran yang sudah ada.
-
Untuk membuat peran baru:
-
Pilih Buat dan gunakan peran layanan baru.
-
-
Untuk menggunakan peran yang ada:
-
Pilih Gunakan peran yang ada.
-
Dalam daftar peran layanan, pilih peran yang akan digunakan.
-
-
-
Pilih Berikutnya.
Langkah 3: Deploy aplikasi
Pada langkah ini, Anda menerapkan aplikasi ke AWS jaringan pengiriman konten global (CDN).
Untuk menyimpan dan menerapkan aplikasi
-
Pada halaman Tinjauan, konfirmasikan bahwa detail repositori dan pengaturan aplikasi Anda sudah benar.
-
Pilih Simpan dan deploy. Front end build Anda biasanya membutuhkan waktu 1 hingga 2 menit, tetapi dapat bervariasi berdasarkan ukuran aplikasi.
-
Saat penerapan selesai, Anda dapat melihat aplikasi menggunakan tautan ke domain
amplifyapp.comdefault.
catatan
Untuk meningkatkan keamanan aplikasi Amplify Anda, domain amplifyapp.com terdaftar di Daftar Akhiran Publik (). PSL__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
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
-
Dari menu Pengaturan aplikasi di panel navigasi, pilih Pengaturan umum.
-
Pada halaman Pengaturan umum, pilih Hapus aplikasi.
-
Di jendela konfirmasi, masukkan
delete. 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, API kunci, 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.comdomain default dengan domain URL seperti.https://branch-name.d1m7bkiki6tdw1.amplifyapp.comSaat Anda menghubungkan aplikasi ke domain khusus, pengguna akan melihat bahwa aplikasi Anda di-host di kustomURL, sepertihttps://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 (PRs) 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.
