Skip to main content

Frontend Deployment Guides

Prosedur ini mencakup proses deployment atau konfigurasi aplikasi frontend dengan framework React.js dan Next.js, integrasi otomatisasi CI/CD melalui GitLab, serta pengelolaan infrastruktur server menggunakan AWS.

Stakeholders and Collaboration​

Bagian ini merangkum peran utama setiap anggota tim dalam proses deployment frontend dan bagaimana mereka berkolaborasi untuk memastikan aplikasi berjalan optimal. Kolaborasi yang efektif antar anggota tim mendukung kualitas, performa, dan pengalaman pengguna secara keseluruhan.

Frontend Developer​

  • Peran: Menulis, mengoptimalkan, dan memastikan kode frontend siap untuk di-deploy tanpa error. Mengelola pembaruan versi file saat terjadi perubahan besar untuk konsistensi versi aplikasi.
  • Kolaborasi: Bekerjasama erat dengan tim reviewer untuk memastikan kode memenuhi standar kualitas, serta berkoordinasi dengan tim QA untuk mendukung pengujian di lingkungan staging dan production sebelum deployment.

Quality Assurance (QA) Team​

  • Peran: Menguji aplikasi di lingkungan staging dan production untuk memastikan semua fitur berfungsi dengan baik. Melaporkan setiap masalah atau bug yang ditemukan kepada tim developer.
  • Kolaborasi: Bekerja sama dengan tim developer dalam pengujian dan penyelesaian bug, serta memvalidasi hasil deployment di production dan memberikan feedback untuk perbaikan lebih lanjut.

Reviewer (Developer)​

  • Peran: Meninjau dan memverifikasi kualitas kode yang diajukan oleh tim developer untuk memastikan kompatibilitas dan kesiapan deployment.
  • Kolaborasi: Berkolaborasi dengan frontend developer dalam memastikan standar kode terpenuhi, memberikan feedback yang konstruktif, dan memberi persetujuan terhadap kode yang siap untuk deployment.

DevOps Team​

  • Peran: Mengelola pipeline CI/CD, memastikan proses deployment berjalan otomatis dan lancar, serta menangani manajemen server dan pemantauan aplikasi setelah deployment.
  • Kolaborasi: Bekerja erat dengan tim QA dalam memvalidasi hasil deployment di staging dan production, serta mendukung tim developer dengan memberikan akses ke log atau data yang diperlukan untuk debugging jika terjadi masalah pasca-deployment.

Collaborative Workflow​

  • Alur Kerja:
    • Frontend Developer mempersiapkan dan memperbarui kode.
    • Reviewer memeriksa dan memberikan persetujuan untuk kode yang siap di-deploy.
    • QA Team melakukan pengujian menyeluruh dan melaporkan masalah.
    • DevOps Team menangani deployment serta memantau aplikasi di lingkungan production.
  • Feedback dan Dokumentasi:
    • Setiap tim memberikan feedback berkala, menangani perbaikan jika diperlukan, dan mendokumentasikan proses deployment untuk menjaga akurasi dan memastikan referensi yang bermanfaat bagi tim di masa depan.

Environment Management​

Types of Environments​

Production Branch​

Branch main digunakan sebagai branch production dan hanya berisi kode yang telah melewati pengujian menyeluruh dan siap digunakan oleh pengguna di lingkungan produksi. Setiap perubahan pada branch ini harus melalui proses review yang ketat untuk memastikan stabilitas dan kualitas, sehingga hanya kode yang benar-benar siap dapat di-merge ke dalam main.

tip

Dianjurkan untuk tidak melakukan push/merge langsung dari branch dev ke main.

Staging Branch​

Branch dev berfungsi sebagai staging environment yang digunakan untuk pengujian akhir sebelum deployment ke production. Lingkungan ini memungkinkan tim untuk melakukan validasi dan pengecekan menyeluruh terhadap fitur atau perbaikan yang sudah dikembangkan. Sangat disarankan agar tidak melakukan push atau merge langsung dari dev ke main tanpa melalui tahap review ketat, untuk memastikan bahwa setiap perubahan sudah memenuhi standar kualitas dan stabilitas sebelum diimplementasikan di production.

Branching Strategy​

Development Branches for Small-Scale Projects​

Untuk proyek skala kecil yang biasanya melibatkan perubahan sederhana atau fitur minor, branch pengembangan seperti feature/ dan bugfix/ dapat dibuat langsung dari main. Setelah pengembangan dan review selesai, branch ini dapat langsung di-merge ke main tanpa melalui tahap staging. Langkah ini mempercepat alur kerja untuk perubahan-perubahan kecil yang tidak memerlukan pengujian kompleks.

Contoh:

  • feature/penambahan-footer
  • bugfix/perbaikan-layout-header

Development Branches for Large-Scale Projects​

Proyek skala besar membutuhkan pengaturan branch yang lebih terstruktur karena melibatkan fitur besar atau perubahan signifikan. Setiap fitur atau perbaikan utama harus memiliki branch khusus, misalnya feature/nama-fitur-besar atau bugfix/nama-issue-besar. Branch ini biasanya dimulai dari dev atau staging sebagai basis pengembangan dan pengujian.

  1. Pengembangan dan Uji Staging: Setelah pengembangan selesai, merge ke dev atau staging untuk tahap QA. Tim QA akan menguji setiap fitur atau perubahan besar di lingkungan staging untuk memastikan kualitas kode.

  2. Merge ke Production: Setelah fitur lulus tahap QA, branch ini dapat di-merge ke main untuk deployment ke production, memastikan stabilitas di production.

Management of Used Branches​

Untuk menjaga kerapihan repository, branch yang sudah di-deploy ke production dapat dihapus, baik untuk proyek kecil maupun besar. Hal ini memastikan repository tetap bersih dan mudah dikelola, serta menghindari branch lama yang tidak terpakai menumpuk di repository.

Naming Conventions​

Commit's Name​

Setiap commit menggunakan format standar untuk konsistensi:

  • feat: deskripsi fitur baru untuk penambahan fitur.
  • fix: deskripsi perbaikan bug untuk perbaikan.

Merge Request Titles​

Standar penamaan merge request:

  • FEAT Implementasi Fitur Pembayaran (last version)
  • FIX Perbaikan Bug di Halaman Checkout (last version)

CI/CD Pipeline for Deployment​

Configuration​

CI/CD diatur oleh Tim DevOps untuk otomatisasi deployment. Pipeline ini diatur untuk deployment otomatis dari branch main ke server production dan dari branch dev ke server staging.

Frontend Team Responsibilities​

Update File Version​

Pastikan file version di-update pada aws/appspec.yaml, .gitlab-ci.yml, dan file lainnya sebelum deployment. Nomor versi diubah ke angka lebih besar untuk setiap deployment baru (angka versi bertambah satu).

Angka terakhir didalam kutip diubah menjadi satu (1) angka lebih besar, sebagai contoh jika 240 diubah menjadi 241.

aws/appspec.yaml
version: 0.0
Resources:
   - TargetService:
   Type: AWS::ECS::Service
   Properties:
      TaskDefinition: "arn:aws:ecs:ap-southest-1:030630191142:task-definition/prod-front-end-bg-td:240"
      LoadBalancerInfo:
         ContainerName: "prod-fe-bg-container"
         ContainerPort: 3000
      PlatformVersion: "LATEST"

Kemudian ubah version menjadi 1 angka lebih besar juga, pada file .gitlab-ci.yml dan prod-fe-bg-task-definition.json.

info

File yang dimodifikasi harus disesuaikan dengan lingkungan tujuan deployment.

.gitlab-ci.yml
variables:
   ...
   VERSION: 2.9.69
aws/prod-fe-bg-task-definition.json
{
   "volume": [],
   ...
   "containerDefinitons": [
   {
      ...
      "image": "030630191142.dkr.ecr.ap-southeast-1.amazonaws.com/prod-fe-bg:2.9.69",
      ...
   }
   ]
}
Post-Deployment Verification​

Tim frontend memeriksa semua fitur di production setelah deployment untuk memastikan alur fitur utama dan interaksi pengguna berjalan baik.

Deployment Workflow for Large Projects​

  • Development and Testing in Staging: Setelah development selesai, branch project di-push ke branch dev untuk deployment ke staging. QA akan melakukan pengujian di staging; jika ditemukan bug, perbaikan dilakukan di branch project tersebut, kemudian di-deploy kembali ke staging untuk pengecekan ulang.
  • Merge Request to Production: Setelah lulus QA, buat merge request dari branch project ke main untuk deployment ke production. Merge request akan di-review oleh reviewer, dan setelah di-approve, pipeline CI/CD akan otomatis deploy ke AWS production.

Error Handling​

  • Rollback: Jika terjadi masalah kritis setelah deployment, tim harus segera menghubungi DevOps untuk melakukan rollback.
  • Bug Fixes and Redeployment: Ketika ada error, lakukan analisis, perbaikan, dan ulangi proses deployment.
  • Communication: Tim perlu berkoordinasi dan memberi tahu anggota lain mengenai masalah yang muncul serta solusi yang diambil.

Writer: Media
Contributor: Arif, Chaton, Syehfi, Dilla 25 November 2024