Deploy Next.js Dengan Laravel Forge

Dalam artikel ini kita akan belajar bagaimana cara men-deploy Next.js App menggunakan Laravel Forge. Tentu ini sangat mudah dilakukan karena pada dasarnya, kita sendiri bisa membuat template nginx sendiri di dalam dashboard nya.

¶Nginx Template

Anda bisa langsung navigate ke Nginx Templates tepat pada menu yang ada di sebelah kiri, kemudian sialakan buat namanya Next.js App dan untuk content bisa nya di masukkan seperti berikut:

# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/{{ SITE }}/before/*;

server {
    listen {{ PORT }};
    listen {{ PORT_V6 }};
    server_name {{ DOMAINS }};
    server_tokens off;
    root {{ PATH }};

    # FORGE SSL (DO NOT REMOVE!)
    # ssl_certificate;
    # ssl_certificate_key;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm;

    charset utf-8;

    # FORGE CONFIG (DO NOT REMOVE!)
    include forge-conf/{{ SITE }}/server/*;

    location / {
        proxy_pass http://127.0.0.1:3000;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log  /var/log/nginx/{{ SITE }}-error.log error;

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/{{ SITE }}/after/*;

¶Membuat Project Baru

Untuk membuat projec baru, tepat pada Project Type nya bisa di pilih langsung Static Html / Nuxt.js / Next.js, kemudian tekan tombol Advanced dan silakan tentukan Nginx Template ke Next.js App. Setelah itu, silakan tekan tombol Add Site.

¶Deployment Script

Untuk deployment script nya bisa dibuat langsung seperti:

cd /home/forge/your-next-js-app
git pull origin $FORGE_SITE_BRANCH

npm i
npm run build

¶Daemons

Kemudian, sekarang kembali ke dashboard khusus server nya, dan pilih Daemons. Berikut adalah isi dari field-field yang Anda lihat.

1. Command: npm run start
2. Directory: /home/forge/your-next-js-app
3. User: Biarkan saja default (forge)
4. Number of Processes: 1
5. Start Seconds: 1
6. Stop Seconds: 5
7. Stop Signal: SIGQUIT

¶Modifikasi Deployment Scripts

Kita akan modifikasi Deployment Scripts kembali, dikarenakan kita perlu me-restart daemon ini ketika kita deploy script yang baru. Untuk itu, silakan lihat daemon yang baru saja Anda buat, dan silakan copy saja id yang di sediakan kemudian gunakan pada deployment script seperti:

sudo supervisorctl restart daemon-831030:daemon-831030_00

Jadi sekarang, untuk lengkapnya Deployment Script kita akan sudah seperti ini:

cd /home/forge/your-next-js-app
git pull origin $FORGE_SITE_BRANCH

npm i
npm run build

sudo supervisorctl restart daemon-831030:daemon-831030_00

¶Kesimpulan

Tentu tidak hanya Next.js yang bisa di serve oleh forge ini, bahkan jika Anda mempunyai project biasa seperti misalnya React dalam Vite, tentu juga bisa di serve. Atau bahkan Nuxt.js juga bisa.