Deploy Next.js App ke Netlify melalui self-hosted Gitlab-CI

Pada artikel ini saya mencoba untuk membagikan bagaimana kelompok kami mendeploy aplikasi Frontend kami ke Netlify melalui Gitlab CI khususnya pada repository yang di simpan pada self-hosted gitlab account pada kasus ini yaitu di https://gitlab.cs.ui.ac.id/.

Kenapa harus melalui Gitlab-CI?

Pada projek kali ini salah satu target kelulusan kami yaitu terdapat tahap testing dan building sebelum melakukan deploy ke server, poin tersebut tidak dapat dicapai jika hanya menggunakan CI/CD bawaan dari netlify maka kita harus melakukan custom pada CI/CD melalui file gitlab-ci.yml.

selain itu juga, karena gitlab repository yang kami gunakan adalah self-hosted sehingga tidak bisa terhubung otomatis dengan netlify kecuali mendaftar sebagai Premium member di netlify.

1. Pertama, pastikan sudah memiliki akun Netlify

Pergi ke Netlify.com kemudian lakukan login jika sudah memiliki akun atau register jika belum memiliki akun. jika sudah login/register maka akan di redirect ke halaman dashboard.

2. Membuat projek Next.js

Buka website resmi milik Next.js disini https://nextjs.org/docs/getting-started kemudian pada halaman tersebut terdapat command untuk memulai projek dengan Next.js silahkan diikuti.

setelah menjalankan command tersebut maka struktur folder di root aplikasi akan seperti ini

Setelah itu buatlah repository di Gitlab untuk menampung code projek ini. kemudian lakukan push ke repository Gitlab.

3. Setup Netlify-CLI

Salah satu cara agar aplikasi yang ada di local dapat ter-deploy di Netlify yaitu dengan menginstall Netlify-CLI. install package tersebut dengan command berikut.

4. membuat token melalui Netlify UI

Anda dapat membuat token akses secara manual di pengaturan pengguna Netlify Anda melalui Personal Access Token.

• Di bawah Personal access tokens, pilih New access token.
• Masukkan deskripsi.
• Pilih Generate token.
• Salin token yang dihasilkan ke clipboard Anda. Setelah Anda menavigasi dari halaman, token tidak dapat dilihat lagi.
• Simpan token tersebut sebagai environment variable NETLIFY_AUTH_TOKEN di pengaturan repository Gitlab anda.

5. Init projek ke Netlify

kita akan membuat site/app baru ke akun kita dengan melakukan command berikut pada directory root aplikasi anda.

setelah itu akan muncul output pada terminal seperti berikut.

kemudian akan secara otomatis site tersebut dibuat di dashboard netlify anda.

Selain membutuh kan Access Token, kita juga butuh site-id dari aplikasi kita di Netlify. silahkan simpan site-id anda setelah melakukan command netlify init tadi. kemudian buatlah variabel environment di repository settings dengan key NETLIFY_SITE_ID dan site-id anda sebagai valuenya.

6. Deploy melalui Gitlab

Buat file gitlab-ci.yml di folder root aplikasi anda, kemudian isi file tersebut seperti berikut.

sebelum melakukan push ke online repo, pastikan isi dari file package.json seperti berikut.

kemudian pada halaman repo online dimana projek anda berada, navigasi ke Setting.

pastikan variable yang diberi kotak merah sudah ditambahkan disana.

6. Mengkonfigurasi file netlify.toml

buatlah file dengan nama netlify.toml di direktori root aplikasi anda, kemudian pastikan isi dari file tersebut seperti ini.

Setelah itu aplikasi anda siap untuk di push ke remote repository dengan command

git add .
git commit -m "deploy app"
git push origin main

Setelah berhasil di push ke remote repository, runner gitlab akan otomatis menjalankan semua perintah pada file gitlab-ci.yml yang akan menjalankan stage Build dan Deploy ke server Netlify.

sumber:

Get started with Netlify CLI