Cara build dan deploy React menggunakan CI pipeline Gitlab

Tutorial cara build deploy React menggunakan CI pipeline Gitlab. Kita akan belajar Gitlab CI/CD dimulai dari langkah membuat SSH Key dan memasang di Gitlab, Mari kita mulai.

Membuat SSH Key

Lakukan di server Linux Ubuntu bisa VPS atau Dedicated server

ssh-keygen -t ed25519 -C "omar@idnetter.com"

Memasang SSH Key di Gitlab

cat ~/.ssh/id_ed25519.pub

Hasilnya sepertini kira-kira, copy

ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAILrFpHcdmkdinYbQ/umuF/ivWdEuYW1qs6F14mh5JZD0j omar@idnetter.com

Paste public key ke gitlab.com atau bisa melalui link ini https://gitlab.com/-/profile/keys

Kembali ke server, Kemudian tambahkan public key juga ke file authorized_keys

cat ~/.ssh/id_ed25519.pub >> ~/.ssh/authorized_keys

Ganti permission ke 600 authorized_keys

chmod 600 ~/.ssh/authorized_keys

Pengujian

ssh -T git@gitlab.com

Respon berhasil

Welcome to GitLab, @idnettercom!

Membuat Repository Gitlab

• Buat project baru di Gitlab, jika sudah ada silahkan skip ini.
• Izinkan user untuk push, Klik repository kemudian menu Settings > Repository > pada tab Protected branches > Expand > aktifkan “Allowed to force push”

Upload project ke Gitlab

Upload project ke Repository Gitlab

cd folder_project
git init
git add .
git commit -m "Push projet ke GitLab"
git remote add source 'https://gitlab.com/idnettercom/gantiurlini.git'
git push -u -f source master

Mengatur CI/CD

Pada tahan ini kita akan mengatur CI/CD untuk memberikan Gitlab akses ke server kita dengan cara membuat variable SSH_PRIVATE_KEY

Di server:

cat ~/.ssh/id_ed25519 | base64 -w0 ; echo

Salin hasilnya

Di Gitlab:

Pada repository yang Anda pilih, Klik Settings > CI/CD > Tab Variables > Expand dan pilih tombol Add variable:

Buat 2 (dua) variable berikut:

• key: CI dengan value: false
• key: SSH_PRIVATE_KEY dengan value: hasil copy-an private key server

Cukup.

Membuat konfigurasi pipeline

Di server

nano .gitlab-ci.yml

Isinya

image: node

cache:
  paths:
    - node_modules/

before_script:
  - sudo apt-get update -qq
  - sudo apt-get install -qq git
  - "which ssh-agent || ( sudo apt-get install -qq openssh-client )"
  - eval $(ssh-agent -s)
  - ssh-add <(echo "$SSH_PRIVATE_KEY" | base64 -d)
  - mkdir -p ~/.ssh
  - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'

deploy:
  stage: deploy
  environment:
    name: production
    url: ci.idnetter.com
  script:
    - yarn install
    - yarn run build
    - echo 'Proses deploy'
    - cp -rv build/* /var/www/html/ci.idnetter.com/
    - echo 'Deploy berhasil!'
  only:
    - main

Silahkan sesuaikan branch name: main, URL dan path.

Kemudian kita upload .gitlab-ci.yml ke repository

git add .gitlab-ci.yml
git commit 'Upload .gitlab-ci.yml'
git push origin main

Menginstall Gitlab Runner

curl -L "https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.deb.sh" | sudo bash
apt update
apt install gitlab-runner
echo 'gitlab-runner ALL=(ALL) NOPASSWD: ALL' >> /etc/sudoers

Keterangan:

• Di baris terkahir saya menambahkan ke /etc/sudoers agar saat gitlab-runner mengakses server kita, tidak perlu input password.

Register gitlab-runner

Di Gitlab

• Settings > Runners > Expand > Salin tokennya
• Pada monitor interaktif gitlab-runner, input dan tekan Enter, sesuaikan, seperti di bawah ini

Enter the GitLab instance URL (for example, https://gitlab.com/):
https://gitlab.com/

Enter the registration token:
GR1348941oQy4AeJ-_HA-efsuyC7J

Enter a description for the runner: Enter
Enter tags for the runner (comma-separated): Enter
Enter optional maintenance note for the runner: Enter
Enter an executor: parallels, ssh, docker+machine, docker-ssh+machine, kubernetes, docker, docker-ssh, shell, virtualbox, instance, custom:
shell

Konfigurasi Runners yang telah dibuat masih dapat diedit pada file /etc/gitlab-runner/config.toml

Sekarang tinggal monitoring pipelines saja. Pada Gitlab menu: CD/CI > Pipelines > Run pipeline

Selesai, semoga bermanfaat.