Di modul ini Anda akan mengonfigurasikan AWS Amplify guna meng-hosting sumber daya statis untuk aplikasi web Anda dengan penerapan bawaan berkelanjutan. Amplify Console memberikan alur kerja berbasis git untuk penerapan berkelanjutan & hosting aplikasi web secara menyeluruh. Di modul berikutnya Anda akan menambahkan fungsi dinamis ke halaman ini menggunakan JavaScript untuk memanggil API RESTful jarak jauh yang dibangun dengan AWS Lambda dan Amazon API Gateway.

Amplify_Wild_Rydes

Arsitektur untuk modul ini sangat mudah dan jelas. Semua konten web statis Anda termasuk HTML, CSS, JavaScript, gambar, dan file lainnya akan dikelola oleh AWS Amplify Console. Pengguna akhir Anda kemudian akan mengakses situs Anda menggunakan URL situs web publik yang dipaparkan oleh AWS Amplify Console. Anda tidak perlu menjalankan server web atau menggunakan layanan lainnya untuk membuat situs Anda tersedia.

Untuk aplikasi yang paling nyata Anda harus menggunakan domain kustom untuk meng-hosting situs Anda. Jika Anda tertarik menggunakan domain Anda sendiri, ikuti petunjuk untuk menyiapkan domain kustom di Amplify.

Waktu untuk Menyelesaikan Modul: 15 Menit

Layanan yang digunakan: AWS Amplify


Ikuti instruksi langkah demi langkah di bawah ini untuk menghosting situs web statis. Klik tiap nomor langkah untuk memperluas bagian.

  • Langkah 1. Pilih Wilayah


    Aplikasi web ini dapat diterapkan di wilayah AWS yang mendukung semua layanan yang digunakan di aplikasi ini, yang menyertakan AWS Amplify, AWS CodeCommit, Amazon Cognito, AWS Lambda, Amazon API Gateway, dan Amazon DynamoDB.

    Anda dapat mengacu ke tabel wilayah untuk melihat wilayah mana yang memiliki layanan yang didukung. Wilayah-wilayah yang didukung yang dapat Anda pilih adalah:

    • AS Timur (Virginia U.)
    • AS Timur (Ohio)
    • AS Barat (Oregon)
    • UE (Frankfurt)
    • UE (Irlandia)
    • UE (London)
    • Asia Pasifik (Tokyo)
    • Asia Pasifik (Seoul)
    • Asia Pasifik (Sydney)
    • Asia Pasifik (Mumbai)

    Pilih wilayah Anda dari daftar menurun di pojok kanan atas AWS Management Console.

    region

    (Klik untuk memperbesar)

    region
  • Langkah 2: Membuat repositori Git

    Anda memiliki dua opsi untuk mengelola kode sumber pada modul ini: AWS CodeCommit (termasuk dalam AWS Tingkat Gratis) atau GitHub. Dalam tutorial ini, kami akan menggunakan CodeCommit untuk menyimpan kode aplikasi kami, tetapi Anda dapat melakukan hal yang sama dengan membuat repositori di GitHub.

    a. Buka konsol AWS CodeCommit
    b. Pilih Buat Repositori.
    c. Atur nama Repositori* ke "wildrydes-site"
    d. Pilih Buat
    e. Sekarang repositori telah dibuat, siapkan pengguna IAM dengan kredensial Git di konsol IAM mengikuti petunjuk ini.
    f. Kembali di konsol CodeCommit, Dari menu menurun Clone URL, pilih Clone HTTPS

    wildrydes_clone

    g. Dari jendela terminal, jalankan git clone dan URL HTTPS dari repositori:

    $ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
    Mengkloning ke 'wildrydes-site'...
    Nama pengguna untuk 'https://git-codecommit.us-east-1.amazonaws.com':XXXXXXXXXX
    Kata sandi untuk 'USERID': XXXXXXXXXXXX
    peringatan: Anda tampaknya telah mengkloning repositori kosong.

  • Langkah 3: Isi repositori Git

    Setelah Anda menggunakan AWS CodeCommit atau GitHub.com untuk membuat repositori git dan mengkloningnya secara lokal, Anda harus menyalin konten situs web dari bucket S3 yang dapat diakses secara publik yang terkait dengan lokakarya ini dan menambah konten ke repositori Anda.

    a. Ubah direktori ke repositori dan salin file statis dari S3:
    cd wildrydes-site/
    aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive

    b. Terapkan file Anda ke layanan Git
    $ git add .
    $ git push

    Objek yang dihitung: 95, selesai.
    Mengompresi objek: 100% (94/94), selesai.
    Menulis objek: 100% (95/95), 9.44 MiB | 14.87 MiB/s, selesai.
    Total 95 (delta 2), digunakan kembali 0 (delta 0)
    Ke https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
    * [new branch] master -> master

  • Langkah 4: Mengaktifkan Hosting Web dengan AWS Amplify Console

    Berikutnya, Anda akan menggunakan AWS Amplify Console untuk menerapkan situs web yang baru saja Anda terapkan di git. Amplify Console menangani pekerjaan menyiapkan tempat untuk menyimpan kode aplikasi web statis Anda dan menyediakan sejumlah kemampuan yang membantu untuk menyederhanakan siklus aktif aplikasi tersebut, serta memungkinkan praktik terbaik.


    a. Meluncurkan halaman konsol Amplify Console

    b. Mengeklik Memulai di bagian Terapkan dengan Amplify Console

    c. Pilih penyedia layanan Repositori yang digunakan saat ini, lalu pilih Berikutnya

    d. Jika Anda menggunakan GitHub, Anda harus mengotorisasi AWS Amplify ke akun GitHub Anda

    e. Dari menu menurun, pilih Repositori dan Cabang yang baru dibuat

    wildrydes_clone2

    e. Di halaman "Konfigurasi pengaturan pembangunan" biarkan semuanya default dan pilih Berikutnya.

    f. Pada halaman "Tinjau", pilih Simpan dan terapkan

    g. Proses tersebut memakan waktu beberapa menit bagi Amplify Console untuk membuat sumber daya yang diperlukan dan untuk menerapkan kode Anda.

    wildrydes_clone3

    Setelah selesai, klik pada gambar situs untuk meluncurkan situs Wild Rydes.

    wildrydes_clone4

    Jika Anda mengeklik pada tautan untuk Master, Anda akan melihat detail pembangunan dan penerapan terkait cabang Anda, dan tangkapan layar aplikasi tersebut di berbagai perangkat:

    wildrydes_clone5
  • Langkah 5: Modifikasi situs Anda

    AWS Amplify Console akan membangun & menerapkan ulang aplikasi ketika mendeteksi perubahan ke repositori yang terhubung. Buat perubahan di halaman utama untuk menguji proses ini.


    a. Buka halaman `index.html` dan ubah baris judul sehingga tertulis: <title>Wild Rydes - Rydes of the Future!</title>

    b. Simpan file dan terapkan ke repositori git kembali. Amplify Console akan mulai membangun situs kembali setelah melihat pembaruan ke repositori. Hal ini akan terjadi dengan cepat! Kembali ke halaman konsol Amplify Console untuk melihat prosesnya.

    $ git add index.html 
    $ git commit -m "updated title"
    [master dfec2e5] updated title
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    $ git push
    Counting objects: 3, done.
    Compressing objects: 100% (3/3), done.
    Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done.
    Total 3 (delta 2), reused 0 (delta 0)
    remote: processing 
    To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
       2e9f540..dfec2e5  master -> master

    c. Setelah selesai, buka kembali situs Wild Rydes dan lihat perubahan judul.

    wildrydes_clone6
  • Rekap

    Dalam modul ini, Anda telah membuat situs web statis yang menjadi dasar bisnis Wild Rydes kami. AWS Amplify Console membuatnya sangat mudah untuk menyebarkan situs web statis mengikuti model integrasi dan pengiriman berkelanjutan. AWS Amplify Console memiliki kemampuan untuk "membangun" aplikasi berbasis kerangka kerja Javascript yang lebih rumit dan memiliki fitur seperti penerapan cabang fitur, pengaturan domain kustom yang mudah, penerapan instan, dan perlindungan kata sandi.