Blog AWS Indonesia

Amplify Console – Hosting untuk Aplikasi Web Fullstack Tanpa Server

AWS Amplify Console adalah layanan hosting aplikasi web fullstack, dengan continuous deployment dari repositori kode sumber pilihan Anda. Amplify Console telah diperkenalkan pada November 2018 di AWS re:Invent. Sejak saat itu, tim telah mendengarkan umpan balik pelanggan dan melakukan iterasi dengan cepat untuk merilis beberapa fitur baru antara lain.

Invalidasi Cache Secara Instan

Amplify Console memungkinkan untuk meng-host aplikasi web singlepage atau situs statis dengan backend tanpa server melalui content delivery network, atau CDN. CDN adalah jaringan server terdistribusi yang menyimpan file di edge location di seluruh dunia yang memungkinkan distribusi latensi rendah dari aset file web Anda.

Sebelumnya, memperbarui konten pada CDN memerlukan invalidasi cache secara manual dan menunggu 15-20 menit agar perubahan menyebar secara global. Untuk membuat pembaruan yang sering, pengembang menemukan solusi seperti pengaturan time-to-live (TTLs) yang lebih rendah pada header aset yang memungkinkan pembaruan lebih cepat, tetapi berdampak buruk pada performa. Sekarang, Anda tidak lagi harus melakukan tradeoff antara penyebaran yang lebih cepat dan kinerja yang lebih cepat. Pada setiap komit ke repositori Anda, Amplify Console membangun dan menyebarkan perubahan ke CDN yang dapat langsung dilihat di browser.

Tombol “Deploy to Amplify Console”

Saat melakukan publikasi kode sumber proyek Anda di GitHub, Anda dapat membuatnya mudah bagi pengembang lain untuk membangun dan menggunakan aplikasi Anda dengan menyediakan tombol “Deploy To Amplify Console” di dokumen Readme. Mengklik tombol itu akan membuka Amplify Console dan mengusulkan tiga langkah untuk menyebarkan kode Anda.

Anda dapat mencoba sendiri hal ini dengan contoh proyek ini dan silakan lihat pada dokumentasi. Menambahkan tombol ke repositori kode Anda sendiri akan semudah menambahkan baris ini dalam dokumen Readme Anda (pastikan untuk mengganti nama pengguna dan nama repositori di URL GitHub):

[![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/username/repository)

Deploy secara Manual

Adalah sebuah ide yang bagus untuk meletakkan semua hal pada version control, termasuk situs web sederhana di mana Anda adalah satu-satunya pengembang. Tetapi jika Anda tidak ingin menggunakan repositori kode sumber sebagai sumber untuk deployment Anda, Amplify Console memungkinkan untuk melakukan deployment melalui file zip, folder lokal di laptop Anda, Amazon S3 bucket atau URL HTTPS apa pun, seperti repositori di Dropbox.

Saat membuat proyek Amplify Console baru, pilih opsi Deploy without Git Provider.

Kemudian pilih file sumber Anda (laptop Anda, Amazon S3 atau HTTPS URI).

Integrasi dengan AWS CloudFormation

Pengembang menyukai otomatisasi. Demikian halnya dengan proses deployment kode atau infrastruktur: Anda harus memastikan deployment infrastruktur Anda otomatis dan berulang. AWS CloudFormation memungkinkan Anda untuk mengotomatisasi pembuatan infrastruktur di cloud menggunakan file YAML atau JSON. Amplify Console menambahkan tiga jenis sumber daya baru ke AWS CloudFormation:

  • AWS::Amplify::App
  • AWS::Amplify::Branch
  • AWS::Amplify::Domain

Ini memungkinkan Anda untuk membuat aplikasi Amplify Console baru, menentukan cabang Git, dan nama domain DNS untuk digunakan.

AWS CloudFormation terhubung ke repositori kode sumber Anda untuk menambahkan webhook ke dalamnya. Untuk melakukan hal ini, Anda perlu memasukkan Github Personal Access Token Anda, posting blog ini menjelaskan secara detail. Ingatlah untuk menggunakan parameter dan tidak melakukan hardcoded kredensial (atau token OAuth) ke dalam Cloudformation template Anda.

Deploy Beberapa Git Branch

Kami percaya alat CI/CD Anda harus beradaptasi dengan alur kerja tim Anda, bukan sebaliknya. Amplify Console mendukung deployment dengan branch pattern, memungkinkan Anda untuk melakukan deployment cabang secara otomatis yang cocok dengan pola tertentu tanpa konfigurasi tambahan. Pencocokan pola didasarkan pada regular expression.

Saat Anda ingin menguji fitur baru, Anda biasanya membuat cabang baru di Git. Amplify Console dan Amplify CLI sekarang mendeteksi ini dan akan menyediakan infrastruktur backend dan hosting terpisah untuk aplikasi tanpa server Anda.

Untuk mengaktifkan deteksi cabang, gunakan menu sebelah kiri, klik General > Edit dan nyalakan Branch Autodetection:

Custom HTTP Header

Anda dapat mengkustomisasi Amplify Console untuk mengirim respons HTTP header yang telah dikustomisasi. Header respons dapat digunakan untuk debugging, keamanan, atau tujuan informasi. Untuk menambahkan header khusus, Anda memilih App Settings > Build Settings dan kemudian mengedit buildspec. Misalnya, untuk memberlakukan transportasi TLS dan mencegah serangan XSS, Anda dapat menambahkan header berikut:

customHeaders:
        - pattern: '**/*'
          headers:
                - key: 'Strict-Transport-Security'
                        value: 'max-age=31536000; includeSubDomains'
                - key: 'X-Frame-Options'
                        value: 'X-Frame-Options: SAMEORIGIN'
                - key: 'X-XSS-Protection'
                        value: 'X-XSS-Protection: 1; mode=block'
                - key: 'X-Content-Type-Options'
                        value: 'X-Content-Type-Options: nosniff'
                - key: 'Content-Security-Policy'
                        value: "default-src 'self'"

Detail ada pada Dokumentasi.

Custom Containers untuk Build

Hal terakhir, kami membuat beberapa perubahan pada build environment. Amplify Console menggunakan AWS CodeBuild di belakang layar. Build container image secara default sekarang berbasis pada Amazon Linux 2 dan memiliki CLI Serverless Application Model (SAM). Jika karena alasan apa pun Anda ingin menggunakan container Anda sendiri untuk melaukan build, Anda dapat mengonfigurasi Amplify Console untuk melakukannya. Pilih App Settings> Build Settings:

Dan kemudian edit build image setting.

Ada beberapa persyaratan pada image container: harus memiliki cURL, git, OpenSSH dan, jika Anda sedang melakukan build proyek NodeJS, diperlukan node dan npm. Seperti biasa, detailnya ada di dokumentasi.

Masing-masing fitur baru ini ada karena umpan balik Anda, jadi silakan terus memberi tahu kami apa yang penting bagi Anda, dan silakan menantikan perubahan-perubahan lain di paruh kedua tahun ini dan yang akan datang.

– seb


Tulisan ini berasal dari artikel Amplify Console – Hosting for Fullstack Serverless Web Apps yang ditulis oleh Sébastien Stormacq dan diterjemahkan oleh Teddy Aryono.

Petra Barus

Petra Barus

Petra Novandi Barus is Developer Advocate at Amazon Web Services based in Jakarta. He is passionate in helping startups and developers in Indonesia to reinvent on behalf their customers. Prior to AWS, Petra co-founded UrbanIndo.com as CTO. The startup became the largest real-estate portal in Indonesia and then was acquired by 99.co. During that time Petra had been a happy AWS customer for 8 years. Petra is also very active in local tech communities