Cara Deploy React apps ke Vercel

Pada tutorial kali ini, Anda akan belajar cara deploy React apps ke Vercel.

Pernahkah Anda berpikir untuk membuat proyek Anda tersedia melalui URL langsung tanpa harus melalui kesulitan penyedia hosting?

Di masa lalu, sebelum munculnya platform cloud seperti Vercel, hosting hanya dilakukan oleh penyedia hosting (misalnya, GoDaddy) yang mengharuskan Anda untuk mengunggah aset statis Anda (seperti folder pembuatan proyek) setiap kali Anda melakukan perubahan. Pengunggahan ini dilakukan dengan perangkat lunak FTP atau semacam sistem seperti cPanel, yang dapat menjadi sangat menegangkan dan teknis.

Saat ini dengan munculnya GitHub, para pengembang memiliki akses ke platform cloud seperti Vercel yang membuat penerapan menjadi mudah.

Vercel adalah platform cloud tanpa server yang memungkinkan para pengembang (pada dasarnya pengembang frontend) untuk meng-host situs web dan layanan online yang diluncurkan secara instan, berkembang secara otomatis, dan tidak memerlukan pemantauan, semuanya dengan konfigurasi minimal/tanpa konfigurasi.

Vercel adalah pilihan yang sempurna untuk menerapkan aplikasi React Anda dengan mudah, menyediakan alat yang komprehensif untuk membangun situs web dan aplikasi berkinerja tinggi.

Mengapa menggunakan Vercel?

• Vercel memberi Anda domain gratis (yang berisi akhiran vercel.app) untuk men-deploy kode Anda di server live. Hal ini juga memungkinkan Anda untuk menggunakan domain unik/pribadi Anda sendiri.
• Vercel mendukung penerapan otomatis, yang berarti setiap kali Anda mendorong perubahan ke cabang produksi repositori Anda (utama atau master), Vercel akan mendeteksi dan menerapkannya ke server secara otomatis.
• Setiap penerapan yang dibuat oleh Vercel dilindungi secara aman dengan sertifikat SSL yang diperbarui secara otomatis dan didukung oleh Edge Network. Hal ini memastikan bahwa konten Anda selalu terkirim dengan aman dan cepat, tanpa memerlukan konfigurasi.
• Dengan satu klik, Anda dapat mengaktifkan koneksi Vercel GitHub dan GitLab untuk pratinjau penerapan berkelanjutan.
• Vercel memiliki pasar untuk mengintegrasikan alat pihak ketiga seperti Google Lighthouse, Slack, Shopify, dan lainnya
• Dan masih banyak lagi…

Setup Project

Untuk panduan ini, kita akan menggunakan aplikasi portfolio react yang dapat dilihat di link berikut ini.

Sebelum memulai, mari kita lihat beberapa prasyarat yang diperlukan untuk menggunakan Vercel:

• Memiliki akun dengan penyedia Git (GitHub, GitLab, atau Bitbucket)
• npm (yang disertakan dengan Node) atau Yarn

Push React ke GitHub

Agar Anda dapat men-deploy aplikasi/proyek Anda di Vercel, Anda perlu mendorong proyek Anda ke penyedia Git mana pun.

Untuk panduan ini, saya akan menggunakan GitHub melalui terminal untuk mendorong aplikasi React kita.

Pertama, mari kita buat repositori di GitHub.

Kemudian pastikan Anda mengisi informasi yang diperlukan dan klik Create repository.

Kembali ke terminal, mari kita mulai dengan menata semua berkas sehingga kita dapat mengomitnya ke repositori, lalu membuat cabang main dengan menggunakan perintah berikut:

git init
git add .
git commit -m "first commit"
git branch -M main

Setelah ini selesai, kita sekarang dapat mendorong ke remote repositori yang telah dibuat dengan menggunakan perintah berikut:

git remote add origin https://github.com/varreltantio/portfolio-react.git
git push -u origin main

Ketika Anda me-refresh repositori Anda, kode Anda akan muncul!

Selanjutnya, ada sekitar empat cara untuk melakukan deployment ke Vercel, tetapi kita hanya akan membahas deployment manual (Vercel untuk Git)

Deploy dengan Vercel secara manual

Sekarang mari kita lihat metode penerapan yang lain. Metode ini lebih disukai bagi individu yang tidak terbiasa dengan terminal dan suka melakukan penerapan secara manual.

Langkah pertama adalah mengunjungi dasbor Anda dan klik New Project.

Ini akan mengarahkan Anda ke halaman di mana Anda dapat membuat proyek. Hal berikutnya adalah mengklik pada bilah pencarian untuk Add Github Namespace.

Ini akan memunculkan halaman otorisasi dari GitHub. Pastikan Anda mengklik akun yang ingin Anda gunakan (bisa akun pribadi atau akun organisasi). Kemudian Anda akan diminta untuk menginstal Vercel.

Setelah berhasil, semua repositori GitHub Anda akan muncul, langkah selanjutnya adalah memilih repositori yang ingin Anda impor dan deploy.

Impor repositori dan kemudian ini akan muncul:

Anda sekarang dapat mengklik tombol Deploy. Ini akan mulai menyebarkan proyek Anda dengan menjalankan build, pemeriksaan, dan terakhir, menetapkan domain.

Anda dapat mengklik tombol Buka Dasbor untuk melihat detail tentang aplikasi yang digunakan, seperti nama domain dan informasi penerapan lainnya.