Meng-hosting Situs Web Statis

Meng-hosting situs web atau aplikasi web sederhana Anda di AWS

Pengantar

Situs web statis mengirimkan HTML, JavaScript, gambar, video, dan file lainnya ke pengunjung situs web Anda. Situs web statis berbiaya sangat rendah, memberikan keandalan tingkat tinggi, hampir tidak memerlukan administrasi IT, dan menskalakan untuk menangani lalu lintas tingkat korporasi tanpa kerja tambahan.

Lihat FAQ untuk informasi selengkapnya >>

Hal-hal yang Akan Anda Pelajari

  • Meng-hosting situs web statis menggunakan AWS Amplify di konsol AWS. AWS Amplify menyediakan hosting terkelola penuh untuk situs web statis dan aplikasi web. Solusi hosting Amplify memanfaatkan Amazon CloudFront dan Amazon S3 untuk mengirimkan aset situs Anda melalui jaringan pengiriman konten (CDN) AWS.
  • Menyiapkan deployment berkelanjutan: Amplify menawarkan alur kerja berbasis Git dengan deployment berkelanjutan, yang memungkinkan Anda untuk secara otomatis men-deploy pembaruan ke situs Anda pada setiap commit kode.

 Pengalaman AWS

Pemula

 Waktu Penyelesaian

10 menit

 Biaya Penyelesaian

Total biaya hosting situs web statis Anda di AWS tergantung pada penggunaan Anda

Untuk melihat perincian layanan yang digunakan dan biaya terkait, lihat harga untuk AWS Amplify dan Amazon Route 53

 Prasyarat Tutorial

  • Akun AWS dengan akses tingkat administrator* Daftar AWS.
  • Penyedia Git: Anda dapat menggunakan AWS CodeCommit (termasuk dalam AWS Tingkat Gratis) atau GitHub.
 
[*]Akun yang dibuat dalam 24 jam terakhir mungkin belum memiliki akses ke layanan yang diperlukan untuk tutorial ini.

 Terakhir diperbarui

27 September 2022

Implementasi

  • Untuk memulai tutorial ini, Anda harus membuat dan menginisialisasi repositori. Cara termudah untuk melakukannya adalah dengan menggunakan perintah create-react-app. Instal paket ini dengan menggunakan perintah berikut di Command Prompt atau Terminal Anda.

    Sudah memiliki repositori yang akan dihubungkan? Lewati ke langkah c di bawah ini.
    Ingin men-deploy tanpa terhubung ke penyedia Git? Mulailah dengan mengeklik di sini.
    npx create-react-app amplifyapp
    cd amplifyapp
    npm start

    Pada langkah ini, Anda akan membuat repositori GitHub dan commit kode Anda ke repositori. Anda akan memerlukan akun GitHub untuk menyelesaikan langkah ini. Jika Anda tidak memiliki akun, daftar di sini.

    a. Buat repo GitHub baru untuk aplikasi anda (tautan)

    b. Inisialisasi git dan dorong aplikasi ke repo GitHub baru yang menjalankan perintah berikut di antarmuka baris perintah Anda:

    git init
    git remote add origin git@github.com:username/reponame.git
    git add .
    git commit -m “initial commit”
    git push origin master

    c. Untuk menghubungkan repositori Anda, masuk ke Konsol Amplify dan pilih Mulai di bagian atas halaman lalu Mulai di bawah Hosting Amplify.

    amplify-getstarted

    Hubungkan repositori GitHub, Bitbucket, GitLab, atau AWS CodeCommit Anda. Anda juga memiliki opsi untuk mengunggah artefak build secara manual tanpa menghubungkan repositori Git (lihat Deploy Manual). Setelah Anda mengotorisasi Konsol Amplify, Amplify akan mengambil token akses dari penyedia repositori, tetapi tidak menyimpan token tersebut di server AWS. Amplify akan mengakses repositori Anda dengan menggunakan kunci deploy yang diinstal di repositori tertentu saja.

    Setelah Anda menghubungkan penyedia layanan repositori, pilih repositori, lalu pilih cabang yang sesuai yang akan dibangun dan di-deploy.

  • Untuk cabang yang dipilih, Amplify akan memeriksa repositori Anda untuk secara otomatis mendeteksi urutan perintah build yang akan dijalankan. Konfirmasi pengaturan build Anda dan klik Berikutnya.

  • Tinjau semua pengaturan Anda untuk memastikan semuanya sudah disiapkan dengan benar. Pilih Simpan dan deploy untuk men-deploy aplikasi web Anda ke jaringan pengiriman konten (CDN) global. Build front-end Anda biasanya membutuhkan waktu 1 hingga 2 menit, tetapi dapat bervariasi tergantung ukuran aplikasinya.

Selamat!

Anda telah menyelesaikan tutorial Meng-hosting Situs Web Statis di AWS.

Langkah berikutnya

Anda dapat melanjutkan perjalanan Anda dengan AWS dengan mengikuti langkah berikutnya di bagian di bawah ini.

Apakah halaman ini membantu?