Vercel

Vercel adalah platform cloud untuk mengembangkan dan meng-host aplikasi web. Vercel mendukung Next.js, Nuxt.js, Angular.js, React.js, Svelte.js, Vue.js, dan lainnya. Vercel juga mendukung serverless functions yang dapat digunakan untuk meng-host API.

Serverless

Serverless adalah arsitektur aplikasi yang memungkinkan developer untuk mengembangkan dan menjalankan aplikasi tanpa harus memikirkan infrastruktur yang digunakan. Serverless juga memungkinkan developer untuk fokus pada pengembangan aplikasi tanpa harus memikirkan infrastruktur yang digunakan.

Deployment

Deployment adalah proses untuk meng-host aplikasi web yang telah dibuat. Deployment dapat dilakukan dengan menggunakan Vercel. Untuk dapat melakukan deployment, developer harus membuat akun Vercel terlebih dahulu. Setelah membuat akun, developer dapat melakukan deployment dengan mengikuti langkah-langkah berikut:

1. Kunjungi website vercel.com (opens in a new tab).

2. Klik tombol Log in (opens in a new tab) untuk masuk ke akun Vercel. Jika belum memiliki akun, klik tombol Sign up (opens in a new tab) untuk membuat akun.

Cara Mendaftar Akun Vercel

3. Pilih plan type Hobby, kemudian isi nama lengkap kamu. Lalu, tekan tombol Continue.

4. Pilih mendaftar dengan akun GitHub, klik Continue with GitHub atau mendaftar akun dengan Email, klik Continue with Email.

5. Isikan email aktif yang kamu miliki. Kemudian, klik tombol Continue with Email.

6. Jika sudah berhasil untuk membuat akun Vercel, lanjut untuk menghubungkan dengan akun GitHub (opens in a new tab) yang sudah kamu daftarkan. Klik pada foto profil di sebelah pojok kanan atas. Lalu, klik Account Settings.

7. Kemudian pilih Authentication, di Add New pilih icon GitHub.

8. Jika sudah berhasil, maka Vercel sudah terhubung dengan akun GitHub kamu dan akan tertambah pada pengaturan akun Vercel di Authentication.

Cara Melakukan Deployment Vercel

9. Setelah itu kita dapat menambahkan project GitHub kita di vercel. Untuk menambahkan project, masuk ke halaman utama project vercel kita Overview, kemudian klik tombol Add New, lalu pilih Project.

10. Pilih Import Git Repository.

11. Pilih framework yang digunakan.

Konfigurasi Tambahan (Opsional)

• Jika ada Root Directory yang perlu diatur, bisa disesuaikan direktorinya. Untuk Next.js tidak perlu diatur apa-apa, tetap di root ./.
• Jika ada tambahan Build Command yang perlu diatur, bisa ditambahkan. Contoh jika Next.jss kita ada tambahan Prisma, kita perlu menambahkan build command dengan mengetikan prisma generate di depannya.

prisma generate && next build

• Jika ada tambahan file .env (Environment Variables) kita perlu menambahkannya, seperti gambar di bawah.

12. Kemudian, jika konfigurasinya sudah selesai, tekan tombol Deploy.

13. Tunggu hingga proses deployment selesai.

14. Jika sudah selesai. Tekan tombol Visit untuk melihat hasil deployment.

Cara Mengonfigurasi pada Build Command Vercel

Konfigurasi ini dilakukan jika diperlukan untuk menambahkan build command pada saat deployment di Vercel.

Contohnya pada saat kita ingin deployment proyek Next.js yang ada tambahan Prisma ORM. Kamu perlu mengonfigurasi prisma generate agar dijalankan pada setiap deployment adalah dengan menambahkan perintah ke pengaturan build.

Di dalam dasbor proyek kamu, buka tab Settings dan cari bagian General. Pada bagian tersebut, kamu akan menemukan sebuah kotak berlabel Build & Development Settings yang berisi kolom input bernama Build Command:

Di dalam kolom tersebut, tambahkan prisma generate:

prisma generate && next build

Referensi: Vercel build dependency caching workaround (opens in a new tab)

Cara Menambahkan Environment Variables

Menambahkan environment variables ini jika proyek yang kamu buat ada .env di dalamnya. Karena .env tidak akan di-public ke dalam repositori GitHub dan kita ingin proyek itu bisa berjalan saat proyek sudah di-deploy. Maka dari itu kita perlu menambahkan environment variables di Vercel.

Di dalam dasbor proyek kamu, buka tab Settings dan cari bagian Environment Variables. Pada bagian tersebut, kamu dapat mengisi kolom untuk menambahkan environment variables yang kamu miliki. Bisa tuliskan satu persatu atau import file .env. Jika sudah, tekan tombol Save.