Contoh langkah demi langkah yang menunjukkan cara men-deploy situs web satu halaman statis ke AWS S3

Perusahaan saya membuat situs web khusus untuk usaha kecil yang hanya membutuhkan kehadiran sederhana di web. Kami membangun situs satu halaman ini menggunakan HTML dan JavaScript dan menerapkannya dari GitHub ke AWS S3 menggunakan AWS CodePipeline, yang kemudian didistribusikan oleh AWS CloudFront agar dapat dilihat oleh dunia.

Saat kami membuat pembaruan untuk klien, kami menarik kode terbaru, melakukan pembaruan, dan mengirimkan permintaan penarikan GitHub untuk menggabungkan kode ke dalam cabang Utama. Penggabungan tersebut memicu AWS CodePipeline untuk menarik kode secara otomatis dan mendorongnya ke bucket AWS S3.

Berikut cara mengaturnya.

Asumsi

Pada artikel ini saya berasumsi Anda tahu cara membuat halaman web dan memeriksanya di cabang Utama di GitHub. Akan sangat membantu untuk membangun pembuatan situs web awal Anda dan membawanya ke titik di mana Anda siap untuk menerapkannya ke S3.

Buat Bucket AWS S3

Untuk pipeline pertama Anda, Anda memerlukan dua bucket AWS S3. Yang pertama adalah keranjang yang berisi kode situs web yang akan Anda terapkan ke seluruh dunia. Bucket ini tidak memerlukan izin khusus apa pun agar CodePipeline dapat diterapkan ke dalamnya.

Dalam contoh ini saya akan membuat bucket S3 bernama customer-website-sample dan membiarkan semua izin default:

  • Blokir semua akses publik
  • Pembuatan versi bucket dinonaktifkan
  • Tanpa Tag
  • Enkripsi default dinonaktifkan
  • Tidak ada pengaturan lanjutan

Jangan ragu untuk menyesuaikan pengaturan ini agar sesuai dengan lingkungan Anda.

Bucket S3 kedua adalah bucket yang akan Anda gunakan untuk menampung “artefak” yang akan dibuat oleh AWS saat membangun pipeline penerapan yang digunakan oleh CodePipeline. Anda akan mereferensikan bucket ini nanti saat membuat pipeline dan Anda dapat menggunakan bucket yang sama untuk pipeline ini dan semua pipeline berikutnya.

AWS S3 memerlukan nama unik secara global pada bucket, jadi kami akan memberi nama bucket ini another-codepipeline-artifacts (nama perusahaan perangkat lunak saya adalah Lain) dan, seperti bucket sebelumnya, kami' akan membiarkan semua pengaturan default apa adanya.

Itu dia! Mari beralih ke pembuatan pipeline.

Membuat Saluran Pipa

Masuk ke akun AWS Anda, lalu navigasikan ke Layanan AWS CodePipeline.

Pilih tombol Buat saluran berwarna oranye di kanan atas. Ini akan membuka layar dialog Pilih setelan saluran seperti yang terlihat di bawah.

Di bawah Nama saluran kami akan memberi nama saluran ini Sample-Customer-Website. Nama tidak boleh mengandung spasi atau karakter khusus.

AWS akan memerlukan peran layanan yang memiliki izin yang sesuai untuk berinteraksi dengan layanan AWS lainnya seperti S3. Meskipun Anda dapat membuat peran unik untuk setiap alur yang Anda buat, untuk alur pertama Anda, saya sarankan Anda memilih Peran layanan baru dan pilih kotak centang untuk mengizinkan AWS CodePipeline membuatkannya untuk Anda. Jika Anda membuat dan menerapkan jenis situs yang sama ke AWS S3, kemungkinan besar Anda akan dapat menggunakan kembali peran layanan yang sama untuk pipeline di masa mendatang.

Anda juga dapat menerima nama peran default yang disarankan oleh AWS jika Anda mau. Dalam contoh ini saya mengubah nama peran menjadi AWS-CodePipeline-Service-Role. Saat berikutnya saya membuat saluran, saya akan memilih opsi peran layanan yang ada dan memilih yang ini dari daftar.

Jangan klik tombol oranye Berikutnya dulu!

Perluas bagian Pengaturan Lanjutan di layar ini.

Di bawah Penyimpanan artefak pilih tombol radio Lokasi khusus lalu pilih bucket AWS S3 yang Anda buat pada langkah sebelumnya untuk semua penyimpanan artefak CodePipeline. Dalam contoh ini, itulah another-codepipeline-artifactskeranjang.

Sekarang klik tombol oranye Berikutnya. Ini akan membuka layar penyiapan berikutnya, yaitu dialog Tambahkan tahap sumber. Di sinilah Anda akan terhubung ke repositori GitHub Anda.

Di tarik-turun Penyedia sumber pilih GitHub (Version 2) (Anda dapat membaca lebih lanjut tentang fitur dan perbedaan antara opsi Versi 1 dan Versi 2 di dokumentasi AWS menggunakan tautan Pelajari lebih lanjut yang tersedia di pesan informasi).

Ini akan membuka seluruh layar untuk semua parameter yang diperlukan untuk terhubung ke akun GitHub Anda.

Jika ini adalah koneksi CodePipeline pertama Anda ke GitHub, pilih tombol Hubungkan ke GitHub di sebelah kanan. Ini akan membuka jendela AWS Developer Tools baru tempat Anda akan membuat koneksi baru. Jika Anda belum masuk ke GitHub, Anda akan diminta untuk masuk.

Di bawah Nama koneksi berikan nama unik pada koneksi baru Anda. Dalam hal ini saya memberi nama saya Another GitHub Connection untuk membuat koneksi ke organisasi GitHub saya untuk Lain.

Selanjutnya pilih tombol Pasang aplikasi baru. Ini akan membuka jendela AWS Connector for GitHub yang memungkinkan Anda memilih akun atau organisasi GitHub yang sesuai.

Sebagai contoh, saya memilih “organisasi lain”. Ini akan membawa Anda ke layar tempat Anda akan memilih pengaturan akses repositori untuk AWS.

Karena saya akan menggunakan konektor ini untuk semua koneksi AWS CodePipeline di masa mendatang, saya akan memberikan akses ke Semua repositori dan mengklik tombol Simpan yang berwarna hijau.

Ini mengembalikan saya ke jendela AWS Developer Tools tempat kita sekarang melihat ID Aplikasi unik yang ditetapkan oleh AWS di pemilih Aplikasi GitHub.

Klik tombol Hubungkan berwarna oranye untuk melanjutkan. Ini mengembalikan Anda ke pengaturan AWS CodePipeline dan Anda akan melihat koneksi baru terisi ke dalam pemilih Koneksi dan pesan sukses memberitahu Anda bahwa koneksi GitHub Anda siap digunakan!

Sekarang di pemilih Nama repositori pilih repositori dari daftar yang berisi kode situs web yang ingin Anda terapkan.

Di pemilih Nama cabang, pilih cabang yang ingin Anda terapkan. Dalam contoh saya, saya memilih cabang main.

Terakhir, di Opsi deteksi perubahan pastikan kotak Mulai alur pada perubahan kode sumber dicentang. Hal ini mengaktifkan webhook yang mendengarkan perubahan pada cabang GitHub dan memulai pipeline Anda. Dalam contoh saya ini akan dipicu secara otomatis ketika saya menggabungkan permintaan tarik ke dalam cabang main.

Untuk Format artefak keluaran biarkan CodePipeline default dipilih.

Klik tombol Berikutnya berwarna oranye. Ini akan membawa Anda ke langkah berikutnya, yaitu layar Tambahkan tahap pembangunan.

Karena contoh ini adalah halaman web sederhana yang tidak memerlukan kompilasi atau pertimbangan penerapan khusus, kita cukup memilih tombol Lewati tahap pembuatan. Anda kemudian akan ditanya “Apakah Anda yakin?” dan diminta untuk mengonfirmasi pilihan Anda. Pada dialog prompt pilih tombol Lewati berwarna oranye.

Hal ini membawa kita ke layar konfigurasi Tambahkan tahap penerapan terakhir tempat kita akan memilih di mana CodePipeline harus menerapkan kode Anda.

Di pemilih Penerapan penerapan pilih Amazon S3. Ini akan mengisi layar dengan pengaturan yang diperlukan untuk menghubungkan CodePipeline ke bucket AWS S3 yang kami buat untuk situs kami di bagian pertama artikel ini.

Pilih Wilayah AWS yang sesuai jika perlu dan di pemilih Bucket pilih bucket AWS S3 yang kita buat pada langkah sebelumnya. Dalam contoh ini, ini adalah keranjang customer-website-sample yang saya buat.

Centang kotak Ekstrak file sebelum diterapkan berikutnya.

Tindakan ini akan menyembunyikan kolom Kunci objek S3 dan menampilkan kolom Jalur penerapan opsional. Anda akan menggunakan opsi Jalur penerapan jika Anda menerapkan situs ke folder tertentu dalam bucket S3. Namun dalam hal ini bucket S3 didedikasikan untuk situs ini, sehingga dapat dikosongkan.

Klik tombol Berikutnya berwarna oranye. Ini akan membawa Anda ke langkah terakhir di mana Anda dapat menggulir ke bawah dan meninjau semua pengaturan konfigurasi untuk saluran ini.

Jika Anda puas dengan semuanya hingga saat ini, gulir ke bawah dan klik tombol oranye Buat saluran di bagian bawah layar.

Ini akan menyimpan semua pengaturan Anda dan membuat AWS CodePipeline Anda. Ini kemudian akan memicu penerapan pertama Anda dan menarik kode terbaru dari cabang repositori GitHub yang Anda tentukan dan menerapkannya ke bucket AWS S3 Anda.

Anda akan dapat melihat pekerjaan CodePipeline bekerja melalui setiap langkah. Setelah menyelesaikan masing-masingnya, ia akan menandainya dengan indikator keberhasilan berwarna hijau. Setelah bagian Deploy selesai, kode Anda sekarang akan ditemukan di bucket AWS S3 Anda!

Jika kita kembali ke bucket S3 yang kita buat sebelumnya, kita akan melihat bahwa semua folder dan file yang dibuat di proyek situs web tersebut sekarang ada di sana. Jika Anda memiliki AWS CloudFront yang terhubung ke bucket ini, proses penerapan melalui CloudFront akan dimulai secara otomatis dan Anda akan melihat pembaruan situs web di browser Anda dalam beberapa menit, atau bahkan hampir seketika.

Dan itu dia! Anda sekarang telah membuat integrasi dan penerapan berkelanjutan yang sederhana ke S3 menggunakan AWS CodePipeline dan GitHub.

Jika Anda merasa artikel ini bermanfaat, pastikan untuk membaca artikel saya yang lain yang memberikan saran dalam menyiapkan lingkungan pengembangan serta beberapa contoh kode untuk proyek Anda.