Proyek di AWS

Buat Aplikasi Web Modern

Menerapkan aplikasi web, menghubungkan ke database, dan menganalisis perilaku pengguna.

Modul 1: Membangun Situs Web Statis

Dalam modul ini Anda akan meng-hosting situs web statis Anda di Amazon S3 dan mengatur IDE berbasis cloud Anda, AWS Cloud9.  

Ikhtisar

Dalam modul ini, kami akan meng-hosting konten statis (html, js, css, konten media, dll.) Situs web Mythical Mysfit kami di Amazon S3 (Simple Storage Service). S3 adalah layanan penyimpanan objek yang sangat berdaya tahan, sangat tersedia, dan murah yang dapat melayani objek yang disimpan secara langsung melalui HTTP. Ini membuatnya sangat berguna untuk menyajikan konten web statis secara langsung ke browser web untuk situs-situs di Internet.

Sebelum mulai menyimpanmysfits kita di S3, mari menyiapkan AWS Cloud9 untuk Anda. Cloud9 adalah lingkungan pengembangan terintegrasi berbasis cloud (IDE) yang memungkinkan Anda menulis, menjalankan, dan melakukan debug kode cukup dengan browser.  

Diagram Arsitektur

membuat situs web statis

 Waktu Penyelesaian

20 menit

Petunjuk Implementasi

  • A: Masuk ke Konsol AWS

    Untuk memulai, masuk ke Konsol AWS untuk akun AWS yang akan Anda gunakan di lokakarya ini.

    B: Pilih Wilayah

    Aplikasi web ini dapat diterapkan di wilayah AWS yang mendukung semua layanan yang digunakan dalam aplikasi ini. Lihat tabel wilayah untuk melihat wilayah mana yang memiliki layanan yang didukung. Wilayah yang didukung meliputi:

    • AS Timur-1 (Virginia U.)
    • AS Timur-2 (Ohio)
    • AS Timur-2 (Oregon)
    • Eropa Barat-1 (Irlandia)

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

  • A: Buat Lingkungan AWS Cloud9 Baru

    Pada halaman beranda konsol AWS ketik Cloud9 ke dalam bilah pencarian layanan dan pilih:

    membuat lex bot

    (klik untuk zoom)

    Klik Buat Lingkungan di halaman muka Cloud9:

    membuat lex bot

    (klik untuk zoom)

    Beri nama lingkungan Anda MythicalMysfitsIDE dengan deskripsi apa pun yang Anda inginkan, dan klik Langkah Berikutnya:

    membuat lex bot

    (klik untuk zoom)

    Biarkan pengaturan Lingkungan sebagai default dan klik Langkah Berikutnya:

    membuat lex bot

    (klik untuk zoom)

    Klik Buat Lingkungan:

    membuat lex bot

    (klik untuk zoom)

    Ketika IDE telah selesai dibuat untuk Anda, Anda akan disajikan dengan layar selamat datang yang terlihat seperti ini:

    membuat lex bot

    (klik untuk zoom)

    B: Meng-kloning Repositori Lokakarya Mythical Mysfits

    Di panel bawah, Anda akan melihat baris perintah terminal terbuka dan siap digunakan. Jalankan perintah git berikut di terminal untuk meng-kloning kode yang diperlukan untuk menyelesaikan tutorial ini:

    git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git

    Setelah meng-kloning repositori, Anda akan melihat project explorer Anda sekarang termasuk file yang dikloning:

    kloning file

    (klik untuk zoom)

    Di terminal, ubah direktori ke repositori yang baru dikloning:

    cd aws-modern-application-workshop
  • A: Buat Bucket S3 Dan Konfigurasikan Untuk Meng-hosting Situs Web

    Selanjutnya, kita akan membuat komponen infrastruktur yang diperlukan untuk meng-hosting situs web statis di Amazon S3 AWS CLI.

    Pertama, Anda akan membuat bucket S3 dan mengganti nama di bawah ini (mythical-mysfits-bucket-name) dengan nama bucket unik Anda sendiri. Catatan: harap lihat persyaratan untuk nama bucket. Salin nama yang Anda pilih dan simpan untuk nanti, karena Anda akan menggunakannya di beberapa tempat lain selama lokakarya ini:

    aws s3 mb s3://REPLACE_ME_BUCKET_NAME

    Sekarang kita telah membuat sebuah bucket, kita perlu mengatur beberapa opsi konfigurasi yang memungkinkan bucket untuk digunakan untuk meng-hosting situs web statis. Konfigurasi ini memungkinkan objek dalam bucket untuk dipanggil menggunakan nama DNS publik terdaftar untuk bucket, serta permintaan situs langsung ke jalur dasar nama DNS ke beranda situs web yang dipilih (index.html dalam kebanyakan kasus):

    aws s3 website s3://REPLACE_ME_BUCKET_NAME --index-document index.html
    B: Perbarui Kebijakan Bucket S3

    Semua bucket yang dibuat di Amazon S3 sepenuhnya pribadi secara default. Agar dapat digunakan sebagai situs web publik, kita perlu membuat Kebijakan Bucket S3 yang menunjukkan objek yang disimpan dalam bucket baru ini dapat diakses oleh siapa pun secara publik. Kebijakan bucket direpresentasikan sebagai dokumen JSON yang menetapkan Tindakan S3 (panggilan API S3) yang diizinkan (atau tidak diizinkan) dilakukan oleh Prinsipal yang berbeda (dalam kasus kami publik, atau siapa pun).

    Dokumen JSON untuk kebijakan bucket yang diperlukan berada di: ~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json. File ini berisi string yang perlu diganti dengan nama bucket yang Anda pilih (ditunjukkan dengan REPLACE_ME_BUCKET_NAME).

    Catatan: Sepanjang lokakarya ini, Anda akan membuka file yang memiliki konten yang perlu diganti (semua akan diawali dengan REPLACE_ME_, agar mudah ditemukan menggunakan CTRL-F pada Windows atau ⌘-F pada Mac.) 

    Untuk membuka file di Cloud9, gunakan File Explorer di Cloud9, gunakan File Explorer di panel kiri dan klik dua kali website-bucket-policy.json:

    buka file di Cloud9

    (klik untuk zoom)

    Ini akan membuka bucket-policy.json di panel File Editor. Ganti string yang ditunjukkan dengan nama bucket yang Anda pilih yang digunakan dalam perintah sebelumnya:

    ganti nama bucket

    (klik untuk zoom)

    Jalankan perintah CLI berikut untuk menambahkan kebijakan bucket publik ke situs web Anda:

    aws s3api put-bucket-policy --bucket REPLACE_ME_BUCKET_NAME --policy file://~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
    C: Publikasikan Konten Situs Web Ke S3

    Sekarang, setelah situs web baru kami dikonfigurasikan dengan benar, mari tambahkan iterasi pertama dari beranda Mythical Mysfits ke bucket. Gunakan perintah S3 CLI berikut yang meniru perintah linux untuk menyalin file (cp) untuk menyalin halaman index.html yang disediakan secara lokal dari IDE Anda ke bucket S3 baru (mengganti nama bucket dengan tepat).

     aws s3 cp ~/environment/aws-modern-application-workshop/module-1/web/index.html s3://REPLACE_ME_BUCKET_NAME/index.html 

    Sekarang, buka browser web favorit Anda dan masukkan salah satu URI di bawah ini ke bilah alamat.. Salah satu URI di bawah ini berisi '.' sebelum nama wilayah, dan yang lainnya a '-'. Yang harus Anda gunakan tergantung pada wilayah yang Anda gunakan.

    String untuk mengganti REPLACE_ME_YOUR_REGION harus cocok dengan wilayah mana pun yang Anda buat dalam bucket S3 (misalnya: AS Timur-1):

    Untuk AS Timur-1 (Virginia U.), AS Barat-2 (Oregon), Eropa Barat-1 (Irlandia) gunakan:

    http://REPLACE_ME_BUCKET_NAME.s3-website-REPLACE_ME_YOUR_REGION.amazonaws.com

    Untuk AS Timur-2 (Ohio) gunakan:

    http://REPLACE_ME_BUCKET_NAME.s3-website.REPLACE_ME_YOUR_REGION.amazonaws.com
    mysfits-welcome

    Selamat, Anda telah membuat situs web Mythical Mysfits statis!

    Ini menjadi akhir Modul 1.

Selanjutnya, meng-hosting aplikasi Anda di server web.