Deploy NextJs to cPanel

#webdev #nextjs #cpanel #beginners

Build dan Deploy CRUD, Search, dan Pagination Next.js 14

1. Setup Folder

konfigurasi custom server nextjs server.js yang akan di tambahkan pada project aplikasi nextJs nya, berikut ini adalah script yg bisa didapatkan dari website resminya.

https://nextjs.org/docs/pages/building-your-application/configuring/custom-server

import { createServer } from 'http'
import { parse } from 'url'
import next from 'next'

const port = parseInt(process.env.PORT || '3000', 10)
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true)
    handle(req, res, parsedUrl)
  }).listen(port)

  console.log(
    `> Server listening at http://localhost:${port} as ${
      dev ? 'development' : process.env.NODE_ENV
    }`
  )
})

kemudian tambahkan scripts berikut pada file package.json di bagian “scripts”

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

setelah penyisipan file server.js dan update isi file package.json di lakukan, jalankan perintah berikut npm run build untuk setup folder project aplikasinya sebelum di upload ke environtment hosting cPanel.

setelah proses build telah selesai biasanya ditandai dengan terbuatnya folder .next yang tergenerate secara otomatis kemudian dilanjutkan dengan compress file project aplikasinya kecuali folder node_modules. jika folder .next tidak muncul pastikan kembali agar tampilan view pada file manager komputer atau finder ( pada mac ) saat ini settingan hidden file sudah di matikan.

2. Setup Nodejs pada cPanel

pada setup ini url website akan menggunakan subdomain dimana root folder project aplikasinya akan di simpan pada folder nextjs-crud

setelah nodeJs telah berhasil di setup silahkan upload file project aplikasi yang berada di lokal komputer ke environtment hosting yaitu direktory folder nexjs-crud sesuai dengan setup nodeJs sebelumnya.

ini adalah struktur folder dari project aplikasinya sesuai dengan direktori yang telah di setup sebelumnya.

3. Setup Database & User Database

pada case tutorial ini akan menggunakan database postgreSQL dimana gambar di bawah ini akan menampilkan database sudah terbuat beserta user yang sudah di tambahkan ke databasenya jika perlu lakukan juga synchronize Grants pada users aktif.

setelah database dan user nya telah tersetup bisa dilanjutkan dengan konfigurasi file .env pada project aplikasinya agar menyesuaikan dengan database yang telah di buat pada environment hosting.

4. Setup Application

silahkan dilanjutkan ke terminal pada cPanel atau bisa menggunakan ssh agar lebih optimal ketika mejalankan perintah-perintah yang dibutuhkan untuk setup aplikasinya. Jika sudah berada di terminal, bisa kembali ke halaman Setup NodeJs App dan copy virtual environment nya dan paste kan pada CLI terminalnya untuk memastikan sudah berada direktory yang benar.
jalankan perintah yang dibutuhkan seperti ( sesuai dengan case ini )

npm install
npx prisma db push

4. Setup Done

Jika semua langkah-langkah telah selesai di jalankan website telah berhasil di deploy pada hosting cPanel, untuk pengecekannya silahkan open Application URL nya sesuai pada Setup Node.JS App yang telah di buat.

https://nextjs-crud.codesync.id/