ลอง Deploy Next.js บน Digital Ocean ด้วย Nginx และ PM2

Web Development

ลอง Deploy Next.js บน Digital Ocean ด้วย Nginx และ PM2

ในบทความนี้เราจะมาลอง Deploy Next.js บน Digital Ocean กันดูบ้าง จากบทความครั้งก่อนที่ผมได้ลองสร้าง Droplet บน Digital Ocean ไป โดยผมจะข้ามการสร้าง Droplet ไป เข้าสู่การ ssh เข้าไปที่ Droplet กันเลย โดย Droplet ที่ผมใช้จะเป็น Ubuntu 22.10

มากกว่า 1 ปีที่ผ่านมา

2 min read

ในบทความนี้เราจะมาลอง Deploy Next.js บน Digital Ocean กันดูบ้าง จากบทความครั้งก่อนที่ผมได้ลองสร้าง Droplet บน Digital Ocean ไป โดยผมจะข้ามการสร้าง Droplet ไป เข้าสู่การ ssh เข้าไปที่ Droplet กันเลย โดย Droplet ที่ผมใช้จะเป็น Ubuntu 22.10

Install Node.js

เรามาเริ่มจากการติดตั้ง Node.js กันก่อนเลย โดยผมจะใช้ Node.js แบบ LTS

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

ซึ่งเวอร์ชั่นปัจจุบันจะเป็น v18.14.0 โดยสามารถตรวจสอบได้ด้วยคำสั่ง node -v

Node.js Version
Node.js Version

Install Yarn

ผมจะใช้ Yarn ในการสร้าง Next.js Project แทน npm ดังนั้นเราจะต้องติดตั้ง Yarn กันก่อน

sudo npm install -g yarn
Yarn Version
Yarn Version

Create Next.js Project

จากนั้นเราจะสร้าง Next.js Project ด้วยคำสั่งตามนี้ โดยผมจะใช้ชื่อ Project ว่า nextjs-example

yarn create next-app nextjs-example

โดยผมจะใช้สูตร Yes, Yes, No, No ในการติดตั้ง 😅

Create Next.js Project
Create Next.js Project
Create Next.js Project
Create Next.js Project

ถ้าขึ้นแบบนี้ก็แสดงว่าติดตั้งเรียบร้อย

Create Next.js Project Complete
Create Next.js Project Complete

จากนั้นเราจะเข้าไปที่โฟลเดอร์ของ Project ด้วยคำสั่ง

cd nextjs-example

และ Build Project ด้วยคำสั่ง

yarn build
Build Next.js Project
Build Next.js Project

ขึ้นแบบก็แสดงว่า Build เสร็จเรียบร้อย

Build Next.js Project Complete
Build Next.js Project Complete

Install PM2

sudo npm install pm2 -g

เมื่อติดตั้งเสร็จแล้วลองเรียกใช้ PM2 ด้วยคำสั่ง pm2 list

PM2 List
PM2 List

Run Next.js with PM2

เราจะใช้ PM2 ในการ Run Next.js โดยความสามารถของ PM2 คือ จะรัน Next.js Project หรือ Node.js ให้เป็น Background ได้ ง่ายก็คือ เราปิด Terminal ไป Project ก็ยังรันอยู่

โดยคำสั่งที่ใช้ Run Next.js ด้วย PM2 ก็ตามนี้เลย

pm2 start yarn --name nextjs-example -- start

เมื่อ Run แล้ว เราจะใช้คำสั่ง pm2 list จะเห็นว่ามี Process ที่ชื่อว่า nextjs-example แล้ว

PM2 List Next.js
PM2 List Next.js

อธิบายแต่ละคำสั่ง

  • pm2 คือคำสั่งเรียกใช้ PM2
  • start คือ อยากให้ PM2 รันอะไร ในที่นี้คือ start
  • yarn คือ คำสั่งที่เราต้องการให้ PM2 รัน ในที่นี้คือ yarn
  • --name คือ ตั้งชื่อ ให้กับ Process ที่ PM2 รัน
  • nextjs-example คือชื่อของ Process ที่ PM2 รัน
  • start คือ คำสั่งที่ใช้รัน Next.js Project

ลองเปิด Browser ไปที่ http://159.223.41.36:3000

Next.js 13
Next.js 13

Install the Nginx web server

ในขั้นตอนที่แล้วเมื่อเราจะเข้าดูโปรเจคเราผ่าน Web Browser จำเป็นที่จะต้องห้อยท้ายด้วย Port 3000 เสมอ เพราะเป็น Port ที่เราใช้ใน Next.js

ในขั้นตอนนี้ เราจะมาทำ Reverse Proxy ก็คือ เมื่อผมเข้า http://159.223.41.36 จะให้ Nginx ทำการ Redirect ไปที่ http://http://159.223.41.36:3000 โดยอัตโนมัติ

เอาละมาติดตั้ง Nginx กันเลย

sudo apt-get update
sudo apt-get install nginx

เมื่อติดตั้งเสร็จ ลองเรียกใช้ Nginx ด้วยคำสั่ง

systemctl status nginx

ขึ้นแบบนี้เป็นอันว่าใช้ได้

Nginx Status
Nginx Status

Configure Nginx

โดยเราจะเข้าไปแก้ไฟล์ /etc/nginx/sites-available/default กันเล็กน้อย

sudo vim /etc/nginx/sites-available/default

ลบ code ที่ highlight ออก

Nginx Config
Nginx Config

แล้วเพิ่ม code ด้านล่างนี้ลงไป

        location / {
                proxy_pass             http://127.0.0.1:3000;
                proxy_read_timeout     60;
                proxy_connect_timeout  60;
                proxy_redirect         off;
 
                # Allow the use of websockets
                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;
        }
Nginx Config
Nginx Config

Restart Nginx

เมื่อเราแก้ไขไฟล์เสร็จแล้ว ให้ Restart Nginx Service ด้วยคำสั่ง

sudo systemctl restart nginx

เพียงเท่านี้เราก็สามารถเข้าไปดูโปรเจคของเราผ่าน Web Browser โดยไม่ต้องใส่ Port 3000 ได้แล้ว

Next.js 13
Next.js 13

Tags:

Ubuntu DigitalOcean Nginx Next.js