Deploy NextJS di Hosting cPanel dengan node_module

Written by:

STEP 1

Pastikan aplikasi NextJS sobat sudah berjalan pada localhost. Pada langkah ini, saya asumsikan sobat sudah berhasil membuat aplikasi NextJS pada local device sobat dan berfungsi dengan normal.

aplikasi NextJS pada local device sobat dan berfungsi dengan normal


STEP 2

Buat file bernama server.js pada root aplikasi NextJS sobat dengan isi filenya sebagai berikut.

const { createServer } = require("http");
const { parse } = require("url");
const next = require("next");

const dev = process.env.NODE_ENV !== "production";
const hostname = "localhost";
const port = process.env.port || 8080;
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url, true);
      const { pathname, query } = parsedUrl;

      if (pathname === "/a") {
        await app.render(req, res, "/a", query);
      } else if (pathname === "/b") {
        await app.render(req, res, "/b", query);
      } else {
        await handle(req, res, parsedUrl);
      }
    } catch (err) {
      console.error("Error occurred handling", req.url, err);
      res.statusCode = 500;
      res.end("internal server error");
    }
  }).listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://${hostname}:${port}`);
  });
});
Buat file bernama server.js pada root aplikasi NextJS sobat dengan isi filenya sebagai berikut


STEP 3

Edit file package.json pada baris berikut

"start": "next start",

menjadi seperti berikut

"start": "NODE_ENV=production node server.js",
mengubah atau mengedit file package.json pada bagian script start


STEP 4

Build aplikasi NextJS sobat dengan cara run command berikut

npm run build
Melakukan build project pada local device dengan command nom run build


STEP 5

Setelah proses build selesai, selanjutnya sobat bisa melakukan compress aplikasi NextJS sobat dengan format zip.


STEP 6

Selanjutnya sobat bisa login ke cPanel dan melakukan setup NodeJs App

cari menu setup node.js app pada cpanel
seting aplikasi untuk nodejs pada cpanel
  1. Pilih versi dari node.js yang sobat inginkan
  2. Ubah application modenya ke Production
  3. Masukkan nama folder yang nantinya akan dijadikan sebagai direktori aplikasi sobat, sebagai contoh nantinya saya akan menempatkan aplikasi saya pada folder “aplikasinextjs”
  4. Pilih domain yang akan digunakan sebagai akses aplikasinya pada aplication URL
  5. Masukkan server.js sebagai startup file
  6. Untuk passenger.log akan saya masukkan juga pada folder dimana sama seperti tempat menyimpan aplikasi saya nanti

Setelah selesai setup lalu klik create


STEP 7

Upload file aplikasi NextJS yang sudah sobat compress menjadi zip pada folder yang sudah dibuat seperti pada saat setup aplikasi node js sebelumnya. Pada hal ini saya akan upload file zip nya ke folder “aplikasinextjs” pada cPanel melalui file manager

melakukan upload file aplikasi zip

Setelah berhasil terupload, selanjutnya bisa sobat extract file zipnya

melakukan extract file zip dari aplikasi yang sudah di upload

Maka hasil akhir isi dari folder “aplikasinextjs” setelah dilakukan extract akan seperti berikut

contoh struktur folder setalah dilakukan extract file manager


STEP
8

sobat bisa lakukan restart pada aplikasi Node.js nya

melakukan restart aplikasi pada menu setup node.js app


Setelah dilakukan restart, maka sobat bisa langsung cek akses domain yang sudah sobat sesuaikan sebelumnya. Seharusnya aplikasi NextJs sobat sudah bisa diakses internet

menjalankan atau mengakses aplikasi melalui domain

Selamat…