Next.js คืออะไร และวิธี Deploy บน Cloud Server

ทดสอบบน Ubuntu Server 24.04 LTS

1. 1

   ติดตั้ง Node.js และเครื่องมือ

   คัดลอก

   curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
   sudo apt -y install nodejs nginx
   sudo npm install -g pm2

2. 2

   ดึงโค้ดและบิลด์

   คัดลอก

   cd /var/www
   sudo git clone [email protected]:team/website.git
   cd website
   npm ci
   npm run build

3. 3

   ตั้งค่าตัวแปรสภาพแวดล้อม

   เก็บค่าลับไว้ในไฟล์ที่จำกัดสิทธิ์และไม่ขึ้น Git ระวังไม่ใส่ค่าลับในตัวแปรที่ชื่อขึ้นต้นด้วย NEXT_PUBLIC เพราะจะถูกส่งไปยังเบราว์เซอร์

   คัดลอก

   DATABASE_URL=postgres://user:[email protected]:5432/appdb
   NEXTAUTH_SECRET=PasteALongRandomStringHere
   NEXT_PUBLIC_SITE_URL=https://www.example.com

4. 4

   รันเป็นบริการ

   คัดลอก

   pm2 start npm --name website -- start
   pm2 startup systemd
   pm2 save

5. 5

   ตั้ง Nginx เป็น Reverse Proxy

   คัดลอก

   server {
     listen 443 ssl;
     server_name www.example.com;
   
     location / {
       proxy_pass http://127.0.0.1:3000;
       proxy_set_header Host $host;
       proxy_set_header X-Forwarded-Proto $scheme;
       proxy_set_header X-Real-IP $remote_addr;
     }
   
     location /_next/static {
       proxy_pass http://127.0.0.1:3000;
       proxy_cache_valid 200 60m;
       add_header Cache-Control "public, max-age=31536000, immutable";
     }
   }

6. 6

   ตั้งขั้นตอนอัปเดตแบบไม่หยุดบริการ

   ให้ไปป์ไลน์ดึงโค้ด บิลด์ แล้วสั่งโหลดใหม่แบบไม่ตัดการเชื่อมต่อ ทำให้ผู้ใช้ไม่เห็นข้อผิดพลาดระหว่างอัปเดต

   คัดลอก

   git pull && npm ci && npm run build && pm2 reload website

ระวังไม่ใส่ค่าลับในตัวแปรที่ขึ้นต้นด้วย NEXT_PUBLIC เพราะค่าเหล่านั้นถูกฝังลงในไฟล์ที่ส่งไปยังเบราว์เซอร์และใครก็อ่านได้