Taufiksi – Huh, kembali lagi cuy mari kita bahas gimana caranya deploy aplikasi next js pada vps digital ocean. Ya kali kan udah cape cape bikin aplikasi tapi tidak di deploy, buat apa ?.
Ini bukan sponsorin digital ocean sih tapi karena digital ocean merupakan tempat paling enak buat kita belajar perdeployan.
Kenapa enak ? yahh, yang saya ketahui adalah digital ocean ini cukup populer namun bukan berarti murah ya. Bisa liat sendiri nanti lah wkwkw.
Dan kita akan menggunakan VPS yang ada di digital ocean. Kita akan banyak sekali pembahasan ini cuy, kalau ngga mau baca dari awal ngga papa langsung kebawah aja, karena mau basa basi dulu.
Apa Itu VPS ?
Ketika kita membuat sebuahh website ataupun aplikasi pasti kita akan sering mempertanyakan dimana sebaiknya website atau aplikasi ini nantinya dijalankan.
Seperti pada kasus kita yaitu mempunyai aplikasi berbasis next js. Dari banyaknya pilihan dari provider seperti shared hosting, dedicated dan virtual private server, tentu saja kita harus mengetahui apa sebenarnya mereka kan.
Oleh karena itu, sebelum kita tau caranya deploy aplikasi next js kita pada vps digital ocean, kita perlu tau pengertian dari VPS itu sendiri. Mungkin nanti akan dibuatkan artikel secara terpisah mengenai vps, untuk di artikel ini cuma pengertian secara garis besar saja.
Virtual Private Server atau yang biasa disebut dengan VPS merupakan layanan server virtual yang mempunyai sumber daya yang terdedikasi khusus untuk satu pengguna.
Dengan VPS, resource sebuah server virtual tidak akan dibagi dengan pengguna lain sehingga dapat membuat website maupun aplikasi minim akan gangguan.
Sesuai dengan namanya yaitu Virtual Private Server yang berarti vps bertindak di lingkungan virtual dengan teknik virtualisasi pada server. Private sendiri artinya bahwa server yang sudah diisolasi sumber dayanya tersebut adalah milik pribadi.
Kemudian yang terakhir adalah server yaitu komputer tempat dimana data hosting tersimpan. Sehingga menyebabkan vps merupakan sebuah entitas server yang sudah terisolasi sumber dayanya dari server fisik yang menjadikan resource tersebut hanya bisa digunakan oleh satu pengguna dengan teknologi yang disebut virtualisasi.
Apa Itu Digital Ocean ?
Saat ini request tentang cloud computing terus meningkat, bisnis dan developer terus mencari solusi hosting cloud yang handal dan murah. Maka dari itu digital ocean adalah salah satu solusi yang semakin populer dalam beberapa waktu belakangan.
Jadi digital ocean itu apa sih ? Digital Ocean adalah sebuah penyedia infrastuktur cloud terkemuka yang menawarkan ke para developer sebuah platform yang mudah digunakan, fleksibel dan bisa dibesarkan untuk menerapkan, mengelola dan mendevelop aplikasi.
Digital Ocean berfokus pada penyederhanaan kompleksitas infrastruktur web dan menawarkan pengalaman pengguna yang intuitif.
Produk produk digital ocean ada beragam, salah satunya adalah vps yang akan kita gunakan untuk deploy aplikasi next js kita.
Berikut adalah beberapa product yang ada didalam digital ocean:
- VPS (Droplet)
- Kubernetes
- Space
- Database
- Dan masih banyak lagi
Daya tarik digital ocean adalah terletak pada harganya yang transparant, ui yang ramah untuk para developer serta dokumentasi yang banyak untuk melayani pemula, usaha kecil dan menengah.
Digital ocean terbilang murah, namun juga tidak bisa dibilang murah juga. Karena jika dihitung hitung pertahunnya bisa jutaan, mungkin untuk umkm yang sudah maju bisa sih namun jika yang belum maju kayaknya agak berat dikit. Namun jika hanya bermodalkan vps saja bisa sih, tapi tidak mungkin juga karena kita butuh database, Jatohnya jutaan juga wkwkw.
Kayaknya udah cukup untuk basa basinya ? Mari kita ke tutorialnya gais, insya allah masih work untuk beberapa tahun kedepan.
Membuat Aplikasi Next JS
Karena disini cuma untuk fokus pada perdeployan maka untuk pembuatan aplikasi next js hanya pada tahap penginstalan saya wkwkw.
Jadi untuk menginstall aplikasi next js itu gampang saja uy. Kamu hanya perlu membuka terminal, emmm maksudnya cmd.
Kemudian ketikan bash berikut ini :
$ npx create-next-app@latestKemudian setup sesuai dengan kemauan kamu, tapi kayaknya kalo udah sampe pada artikel deploy next js artinya kamu udah punya aplikasinya kan wkwk.
Kayanya ngga mungkin deh kalau tiba tiba nyasar dimari. Masa iya belum punya aplikasi next js udah nyasar di artikel cara deploy di vps kan ngga mungkin hahahaaaa.
Cara Deploy Next JS di VPS Digital Ocean
Okelah, ini momen of the truth brow. Berikut adalah cara paling simpel untuk deploy next js di vps digital ocean. Emm kita ngga pakai docker kali ini, mungkin next artikel akan bahas yang menggunakan docker container.
Kenapa ngga pakai docker bang ? Ayolah bre, kalean kan juga lagi belajar deploy hahaha masa iya langsung yang ribet ribet.
Apa Saja Yang Dibutuhkan Deploy Next Di VPS Digital Ocean ?
Back to topics. jadi apa saja hal yang yang dibutuhkan sebelum kita deploy, berikut adalah beberapa list yang nantinya akan kita gunakan.
- Droplets (Linux Ubuntu)
- Repo (Github/Gitlab)
- Nginx
- Yarn/NPM
- Pm2
Mungkin itu aja sudah cukup sih untuk keperluan deploy aplikasi next js kita ke vps digital ocean.
Setup Droplets
Seperti yang sudah dibilang, droplets merupakan sebutan vps yang ada di digital ocean. Jadi mari kita beli terlebih dahulu untuk dropletnya kawan kawan.
Yang pertama harus dilakukan adalah memilih region dari vps kita.
Ada sedikit tips untuk kita ketika ingin memilih region pada vps kita yaitu usahakan dekat dengan target pasar kita. Contohnya saya mengunakan singapore karena target kita adalah di indonesia paling banyak.
Untuk selanjutnya adalah memilih OS untuk vps kita, rata rata vps itu menggunakan linux, jadi kalau programmer kok ngga bisa linux, itu ada benarnya wkwk. Keknya emang bakalan linux pada waktunya.
Disini kita akan menggunakan ubuntu untuk OS VPS kita nantinya.
Lalu kita akan diminta memilih tipe vps yang akan kita gunakan, semacam paket, untuk yang murah itu ada 4$/bulan, itu sudah lebih dari cukup sih ketika untuk digunakan belajar deploy next js kosongan.
Namun jika ingin mengandalkan kecepatan itu ada premium intel dan amd, bisa pilih kalau kamu nantinya ingin upgrade.
Kemudian setting password yang akan digunakan ketika kamu nantinya mengakses linux dengan superuser root. Password ini penting jadi jangan sampai lupa.
Yahh, mungkin untuk pembelian vps cukup sampai disitu, untuk dibawahnya sebenarnya masih ada lagi tapi menurut saya, yang penting penting itu saja.
Setelah membeli vps, maka permainan baru saja akan dimulai wkwkw. Mari kita nikmati permainan ini. Sekarang buka saja console/terminal yang ada di vps.
Kemudian untuk setupnya masih belum selesai, masukan beberapa bash berikut :
$ sudo apt updateIni akan mengupdate server linux yang kamu punya.
Install NPM
Selanjutnya kita bisa menginstall NPM untuk menjalankan project next js kita kedepannya, atau mungkin kita bisa menggunakan yarn.
Kita buat dua duanya, tapi terserah sih mau pakai yang mana wkwwk, sama aja soalnya, untuk install npm sebagai berikut :
$ sudo apt install npmSedangkan untuk install yarn adalah sebagai berikut :
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list$ sudo apt-get update && sudo apt-get install yarnInstall Nginx
Kemudian yang perlu dilakukan adalah install nginx, apa itu nginx ? singkatnya nginx adalah salah satu web server yang populer dan juga berfungsi sebagai reverse proxy server, load balancer, dan HTTP cache.
Untuk menginstallnya di vps kita adalah seperti ini :
$ sudo apt install nginxKemudian masukan bash ini untuk mengkonfigurasi nginx :
$ nano /etc/nginx/sites-available/defaultLalu masukan kode berikut :
server {
server_name _;
location / {
# reverse proxy for next server
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
# we need to remove this 404 handling
# because next's _next folder and own handling
# try_files $uri $uri/ =404;
}
}Setelah install install dan config server, reset terlebih dahulu dengan mengetikan bash :
$ exitSetup Git
Setelah itu semua sudah dilakukan, maka untuk langkah selanjutnya ketika kita ingin deploy next js di vps digital ocean adalah setup git.
Mungkin kalau git yang kita punya bertipe public maka gampang saja hanya seperti ini :
$ git clone <project-kita>Namun jika git yang kita punya adalah private maka kita perlu setting lebih effort sedikit yaitu dengan menggunakan ssh key.
Install Package & Build
Setelah kita punya cloningan dari project kita maka kita perlu install semua package yang ada di project. Caranya gimana ? gampang sih, jalankan bash berikut :
$ npm install$ npm run buildInstall Pm2
Lalu yang terakhir yang perlu kita install adalah pm2 yang digunakan untuk pengganti npm run start. karena tidak mungkin kita stay terus kan di terminal consolenya.
Untuk menginstallnya bisa menggunakan cara berikut :
$ npm install -g pm2or
$ yarn global add pm2Runing pm2 dengan menggunakan perintah sebagai berikut:
$ pm2 start npm --name "<project-kita>" -- startor
$ pm2 start yarn --name "<project-kita>" -- startHarusnya dengan begitu kita sudah bisa running di ip yang sudah di berikan oleh vps kita.
Penutup
Okelah mungkin kita cukupkan untuk artikel kali ini, sampai jumpa lagi di artikel lainnya. babay.
