Proyek di AWS:

Membangun Aplikasi Web Tanpa Server

dengan AWS Lambda, Amazon API Gateway, Amazon S3, Amazon DynamoDB, dan Amazon Cognito

Pengantar

Menghosting situs web statis

Mengelola pengguna

Membangun backend tanpa server

Menerapkan API RESTful

Mengakhiri sumber daya

Modul 1. Hosting Web Statis

Di modul ini Anda akan mengonfigurasi Amazon Simple Storage Service (S3) untuk menghosting sumber daya statis untuk aplikasi web Anda. Di modul berikutnya Anda akan menambahkan fungsi dinamis ke halaman ini menggunakan JavaScript untuk memanggil API RESTful yang dibangun dengan AWS Lambda dan Amazon API Gateway.

Ikhtisar Arsitektur

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

Untuk tujuan modul ini Anda akan menggunakan URL titik akhir situs web Amazon S3 yang kami pasok. Ini memerlukan format http://{your-bucket-name}.s3-website.{region}.amazonaws.com. Untuk aplikasi yang paling nyata Anda harus menggunakan domain kustom untuk menghosting situs Anda. Jika Anda tertarik untuk menggunakan domain Anda sendiri, ikuti instruksi untuk menyiapkan situs web statis menggunakan domain kustom di dokumentasi Amazon S3.

Waktu untuk Menyelesaikan Modul: 30 Menit

Layanan yang digunakan: Amazon S3

Template CloudFormation: Jika Anda sudah nyaman bekerja dengan Amazon S3, atau ingin bergerak maju untuk bekerja dengan Lambda dan API Gateway, Anda dapat meluncurkan salah satu template AWS CloudFormation di Wilayah yang Anda pilih untuk membangun sumber daya yang diperlukan secara otomatis.

Wilayah Template CloudFormation
AS Timur (Virginia U.) Luncurkan stack >
AS Timur (Ohio) Luncurkan stack >
AS Barat (Oregon) Luncurkan stack >
UE (Frankfurt) Luncurkan stack >
UE (Irlandia) Luncurkan stack >
UE (London) Luncurkan stack >
Asia Pasifik (Tokyo) Luncurkan stack >
Asia Pasifik (Seoul) Luncurkan stack >
Asia Pasifik (Sydney) Luncurkan stack >
Asia Pasifik (Mumbai) Luncurkan stack >

Instruksi Peluncuran CloudFormation

  1. Klik tautan Luncurkan Stack di atas untuk wilayah yang Anda pilih.

  2. Klik Berikutnya di halaman Pilih Template.

  3. Sediakan nama yang seluruhnya unik untuk Nama Bucket Situs Web seperti wildrydes-namaAnda dan klik Berikutnya.

  4. Pada halaman Opsi, biarkan semua kolom default dan klik Berikutnya.

  5. Pada halaman Ulasan, periksa kotak untuk menyatakan memahami bahwa CloudFormation akan membuat sumber daya IAM dan klik Buat.

    Template ini menggunakan sumber daya kustom untuk menyalin aset situs web statis dari bucket S3 pusat ke dalam bucket khusus Anda. Agar sumber daya kustom dapat menulis ke bucket baru di akun Anda, sumber daya kustom harus membuat peran IAM yang dapat diasumsikan dengan izin-izin tersebut.

  6. Tunggu hingga stack wildrydes-aplikasiweb-1 mencapai status BUAT_SELESAI.

  7. Dengan stack wildrydes-aplikasiweb-1 yang dipilih, klik tab Output dan klik tautan URL Situs Web.

  8. Pastikan halaman beranda Wild Rydes memuat dengan benar dan beralihlah ke modul berikutnya, Manajemen Pengguna.

Instruksi Implementasi

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

  • Langkah 1. Pilih Wilayah

    Pilih Wilayah

    Aplikasi web ini dapat diterapkan di wilayah AWS yang mendukung semua layanan yang digunakan di aplikasi ini, yang menyertakan Amazon Cognito, AWS Lambda, Amazon API Gateway, Amazon S3, 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 pilihan menurun di pojok kanan atas AWS Management Console.

    (Klik untuk memperbesar)

  • Langkah 2. Buat Bucket S3

    Buat Bucket S3

    Amazon S3 dapat dibuat untuk menghosting situs web statis tanpa harus mengonfigurasi atau mengelola server web. Pada langkah ini Anda akan membuat bucket S3 baru yang akan digunakan untuk menghosting semua aset statis (mis. file HTML, CSS, JavaScript, dan gambar) untuk aplikasi web Anda. 

    Pada langkah ini, Anda akan menggunakan konsol atau AWS CLI untuk membuat bucket Amazon S3. Ingatlah bahwa nama bucket Anda harus seluruhnya unik. Kami menyarankan untuk menggunakan nama seperti wildrydes-namadepan-namabelakang. Jika Anda mengalami masalah karena nama bucket Anda sudah ada, cobalah untuk menambahkan angka atau karakter tambahan hingga Anda menemukan nama yang belum digunakan.

    1. Di AWS Management Console pilih Layanan lalu pilih S3 di bawah Penyimpanan.
    2. Pilih +Buat Bucket
    3. Sediakan nama yang seluruhnya unik untuk bucket Anda seperti wildrydes-namadepan-namabelakang. Jika Anda mengalami masalah karena nama bucket Anda sudah ada, cobalah untuk menambahkan angka atau karakter tambahan hingga Anda menemukan nama yang belum digunakan.
    4. Pilih Wilayah yang telah Anda pilih untuk digunakan untuk lokakarya ini dari pilihan menurun.
    5. Pilih Buat di kiri bawah dialog tanpa memilih asal bucket untuk menyalin pengaturan.

  • Langkah 3. Unggah Konten

    Unggah Konten

    Pada langkah ini, Anda akan mengunggah aset situs web untuk modul ini ke bucket S3 Anda. Anda dapat menggunakan AWS Management Console (memerlukan browser Google Chrome), AWS CLI, atau template CloudFormation yang disediakan untuk menyelesaikan langkah ini. Jika Anda telah menginstal dan mengonfigurasi AWS CLI pada mesin lokal Anda, kami menyarankan untuk menggunakan metode tersebut. Jika belum, gunakan konsol tersebut jika Anda telah menginstal versi teranyar Google Chrome. 

    Instruksi langkah demi langkah konsol

    Agar dapat mengunggah semua file dan subdirektori di direktori lokal melalui AWS Management Console, Anda harus menggunakan versi teranyar browser web Chrome. Jika Anda tidak dapat meggunakan Chrome, harap ikuti instruksi untuk menggunakan AWS CLI atau template CloudFormation yang disediakan.

    1. Unduh dan arsipkan repositori ini menggunakan tautan ini.

    2. Ekstrak zip arsip yang Anda unduh pada mesin lokal Anda.

    3. Membuka AWS Management Console di Chrome. Pilih Layanan lalu pilih S3 di bawah Penyimpanan.

    4. Pilih bucket yang Anda buat pada langkah sebelumnya dan pastikan Anda melihat tab Ikhtisar.

    5. Buka File Explorer Windows atau Finder macOS dan browsing ke konten file zip yang telah diperluas yang telah Anda unduh pada langkah pertama.

    6. Browsing ke direktori WebApplication/1_StaticWebHosting/website pada mesin lokal Anda.

    7. Pilih semua file dan subdirektori menurut direktori situs web. Pastikan bahwa direktori situs web itu sendiri tidak dipilih.

    8. Seret dan letakkan file yang dipilih dari sistem file lokal Anda ke konten di bawah tab Ikhtisar di konsol S3.

    9. Pilih Unggah di kiri bawah kotak dialog yang muncul.

    10. Tunggu hingga pengunggahan selesai, dan pastikan Anda melihat konten direktori situs web yang tertera di konsol S3. Jika Anda hanya melihat satu direktori situs web, Anda harus menghapusnya dari bucket Anda dan ikuti instruksi ini lagi untuk memastikan Anda memilih hanya konten dari direktori sebelum menyeret dan meletakkan ke dalam konsol S3.

    Instruksi langkah demi langkah CLI

    Jika Anda telah menginstal dan mengonfigurasi CLI, Anda dapat menggunakannya untuk menyalin aset web yang diperlukan dari s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ke bucket Anda.

    1. Lakukan perintan berikut yang memastikan untuk mengganti NAMA_BUCKET_ANDA dengan nama yang Anda gunakan di bagian sebelumnya dan WILAYAH_BUCKET_ANDA dengan kode wilayah (mis. as-timur-2) tempat Anda membuat bucket.

      aws s3 sync s3://wildrydes-as-timur-1/AplikasiWeb/1_HostingWebStatis/situsweb s3://NAMA_BUCKET_ANDA --wilayah WILAYAH_BUCKET_ANDA

    2. Jika perintah tersebut berhasil, Anda harus melihat daftar objek yang disalin ke bucket Anda.

     

    Instruksi langkah demi langkah CloudFormation

    Jika Anda tidak dapat menggunakan semua metode sebelumnya, Anda dapat meluncurkan template CloudFormation yang disediakan agar dapat menyalin aset yang diperlukan ke dalam bucket S3 Anda. Luncurkan template CloudFormation dengan memilih wilayah dan mengeklik tautan Luncurkan stack di bagian Template CloudFormation modul ini. 

  • Langkah 4. Tambahkan Kebijakan Bucket untuk Mengizinkan Publik Membaca

    Tambahkan Kebijakan Bucket untuk Mengizinkan Publik Membaca

    Anda dapat menetapkan siapa yang dapat mengakses konten di bucket S3 Anda menggunakan kebijakan bucket. Kebijakan bucket adalah dokumen JSON yang menyebutkan pimpinan-pimpinan yang diizinkan untuk melaksanakan beragam tindakan terhadap objek di bucket Anda.

    Pada langkah ini, Anda akan menambahkan kebijakan bucket ke bucket Amazon S3 baru Anda agar pengguna anonim dapat melihat situs Anda. Secara default bucket Anda hanya akan dapat diakses oleh pengguna terautentikasi dengan akses ke akun AWS Anda.

    Lihat contoh kebijakan ini yang akan memberi akses hanya baca ke pengguna anonim. Contoh kebijakan ini mengizinkan siapa saja di Internet untuk melihat konten Anda. Cara termudah untuk memperbarui kebijakan bucket adalah dengan menggunakan konsol. Pilih bucket, pilih tab izin lalu pilih Kebijakan Bucket.

    1. Di konsol S3, pilih nama bucket yang Anda buat di bagian 1.
    2. Pilih tab Izin, lalu pilih Kebijakan Bucket.
      1. Di konsol S3, pilih nama bucket yang Anda buat di bagian 1.
      2. Pilih tab Izin , lalu pastikan untuk memilih pengaturan akses Publik.
      3. Klik Edit dan hapus centang:
        • "Blokir kebijakan bucket publik baru"
        • "Blokir akses publik dan lintas akun jika bucket memiliki kebijakan publik"
      4. Klik Simpan.
      5. Di modal konfirmasi yang muncul, ketik ‘konfirmasi’ lalu klik Konfirmasi. 
      6. Selagi masih berada di tab Izin, pilih Kebijakan Bucket.  
    3. Masukkan dokumen kebijakan berikut ke dalam editor kebijakan bucket yang mengganti [NAMA_BUCKET_ANDA] dengan nama bucket yang Anda buat di bagian 1:
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
        } 
    ] 
}
    1. Pilih Simpan untuk menerapkan kebijakan baru.

  • Langkah 5. Aktifkan Hosting Situs Web

    Aktifkan Hosting Situs Web

    Secara default objek di bucket S3 tersedia melalui URL dengan struktur http://.amazonaws.com//. Agar dapat menyajikan aset dari URL akar (mis. /index.html), Anda harus mengaktifkan hosting situs web pada bucket. Tindakan ini akan membuat objek Anda tersedia di titik akhir situs web Wilayah AWS tertentu dari bucket: .s3-website-.amazonaws.com.

    Anda juga dapat menggunakan domain kustom untuk situs web Anda. Misalnya http://www.wildrydes.com dihosting pada S3. Menyiapkan domain kustom tidak dicakup dalam lokakarya ini, tetapi Anda dapat menemukan instruksi terperinci di dokumentasi kami.

    Pada langkah ini, Anda akan menggunakan konsol untuk mengaktifkan hosting situs web statis. Anda dapat melakukan ini pada tab Properti setelah memilih bucket. Atur index.html sebagai dokumen indeks, dan biarkan dokumen yang salah kosong. Lihat dokumentasi tentang mengonfigurasi bucket untuk hosting situs web statis untuk perincian selengkapnya.

    1. Dari halaman terperinci bucket di konsol S3, pilih tab Properti.
    2. Pilih kartu Hosting situs web statis .
    3. Pilih Gunakan bucket ini untuk menghosting situs web dan masukkan index.html untuk dokumen Indeks. Biarkan kolom lainnya kosong.
    4. Catat URL Titik Akhir di bagian atas dialog sebelum memilih Simpan. Anda akan menggunakan URL ini di seluruh sisa lokakarya untuk melihat aplikasi web Anda. Dari sini pada URL ini akan dirujuk sebagai URL dasar situs web Anda.
    5. Klik Simpan untuk menyimpan perubahan Anda.

  • Langkah 6. Validasi Implementasi Anda

    Validasi implementasi Anda

    Setelah menyelesaikan langkah implementasi ini Anda seharusnya dapat mengakses situs web statis Anda dengan mengunjungi URL titik akhir situs web untuk bucket S3 Anda.

    Kunjungi URL dasar situs web Anda (ini adalah URL yang Anda catat di bagian sebelumnya) di browser yang Anda pilih. Anda seharusnya dapat melihat tampilan halaman beranda Wild Rydes. Jika Anda harus mencari URL dasar, kunjungi konsol S3, pilih bucket Anda lalu klik Hosting Web Statis pada tab Properti.

    Jika halaman melakukan render dengan benar (lihat contoh tangkapan layar contoh di bawah), Anda dapat beralih ke modul berikutnya, Pengelolaan Pengguna.

Berikutnya: Mengelola Pengguna