View a markdown version of this page

Menyebarkan Next.js aplikasi ke Amplify Hosting - AWS Amplify Hosting
Langkah 1: Hubungkan repositoriLangkah 2: Konfirmasikan pengaturan buildLangkah 3: Deploy aplikasiLangkah 4: (Opsional) membersihkan sumber dayaMenambahkan fitur ke aplikasi Anda

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

Menyebarkan Next.js aplikasi ke Amplify Hosting

Tutorial ini memandu Anda melalui pembuatan dan penerapan Next.js aplikasi dari repositori Git.

Sebelum Anda memulai tutorial ini, lengkapi prasyarat berikut.

Membuat aplikasi

Buat Next.js aplikasi dasar untuk digunakan untuk tutorial ini, menggunakan instruksi create-next-app 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 Next.js aplikasi Anda di repositori Git ke Amplify Hosting.

Untuk menghubungkan aplikasi di repositori Git

  1. Buka konsol https://console.aws.amazon.com/amplify/ Amplify.

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

    Pilih Menyebarkan aplikasi di bagian atas halaman.

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

    Untuk GitHub repositori, Amplify menggunakan fitur GitHub Aplikasi untuk mengotorisasi akses Amplify. Untuk informasi selengkapnya tentang menginstal dan mengotorisasi GitHub Aplikasi, lihatMenyiapkan akses Amplify ke repositori GitHub.

    catatan

    Setelah Anda mengotorisasi konsol Amplify dengan Bitbucket GitLab, AWS CodeCommit, atau, Amplify mengambil token akses dari penyedia repositori, tetapi tidak menyimpan token di server. AWS Amplify mengakses repositori Anda menggunakan kunci deploy yang terinstal di repositori tertentu saja.

  4. Pada halaman cabang Tam bah repositori lakukan hal berikut:

    1. Pilih nama repositori untuk terhubung.

    2. Pilih nama cabang repositori untuk terhubung.

    3. Pilih Berikutnya.

Langkah 2: Konfirmasikan pengaturan build

Amplify secara otomatis mendeteksi urutan perintah build yang akan dijalankan untuk cabang yang Anda gunakan. Pada langkah ini Anda meninjau dan mengonfirmasi pengaturan build Anda.

Untuk mengonfirmasi pengaturan build untuk aplikasi

  1. Pada halaman Pengaturan aplikasi, cari bagian Peng aturan Bangun.

    Pastikan perintah build Frontend dan direktori keluaran Build sudah benar. Untuk aplikasi Next.js contoh ini, direktori keluaran Build diatur ke.next.

  2. Prosedur untuk menambahkan peran layanan bervariasi tergantung pada apakah Anda ingin membuat peran baru atau menggunakan 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 Berikutnya.

Langkah 3: Deploy aplikasi

Pada langkah ini, Anda menyebarkan aplikasi Anda ke jaringan pengiriman konten AWS global (CDN).

Menyimpan dan menyebarkan aplikasi

  1. Pada halaman T injauan, konfirmasikan bahwa detail repositori dan pengaturan aplikasi sudah benar.

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

  3. Setelah 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 Public Suffix List (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 lebih lanjut, lihat Set-Cookie halaman di Mozilla Developer Network.

Langkah 4: (Opsional) membersihkan sumber daya

Jika Anda tidak lagi memerlukan 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 Peng aturan umum.

  2. Pada halaman Pengaturan umum, pilih H apus aplikasi.

  3. Di jendela konfirmasi, masukkandelete. Kemudian pilih H apus aplikasi.

Menambahkan fitur ke aplikasi Anda

Sekarang setelah Anda memiliki aplikasi yang diterapkan ke Amplify, Anda dapat menjelajahi beberapa fitur berikut yang tersedia untuk aplikasi yang Anda hosting.

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 menghosting aplikasi Anda untuk Anda di amplifyapp.com domain default dengan URL sepertihttps://branch-name.d1m7bkiki6tdw1.amplifyapp.com. Saat Anda menghubungkan aplikasi ke domain khusus, pengguna melihat bahwa aplikasi Anda dihosting di URL khusus, sepertihttps://www.example.com. Untuk informasi selengkapnya, lihat Menyiapkan domain khusus.

Pratinjau permintaan tarik

Pratinjau permintaan tarik web menawarkan tim cara untuk melihat pratinjau perubahan dari pull request (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 alur GitFlow kerja untuk mendukung beberapa penerapan, lihat Penerapan cabang fitur dan alur kerja tim.