heroku nextjs

next.js บน heroku

ปรับใช้แอพสากลที่ใช้ React-based บน Heroku

การปรับใช้การสาธิต จาก repo นี้:
https://nextjs.herokuapp.com

รองรับ โหนด/เซิร์ฟเวอร์ที่กำหนดเอง ใช้เพื่อ:

• รวมโหนด API เข้ากับ UI ถัดไป/ตอบสนอง
• ใช้เส้นทาง URL ที่กำหนดเอง

ถัดไปด้วยเซิร์ฟเวอร์ Express ที่กำหนดเอง

กำหนดให้มี

• Heroku
  • เครื่องมือบรรทัดคำสั่ง (CLI)
  • บัญชีฟรี
• กระตวน
• node.js
• next.js

การปรับใช้การผลิต

เมื่อคุณมีแอพถัดไปที่ทำงานในพื้นที่คุณสามารถปรับใช้เพื่อการเข้าถึงสาธารณะ

1. แก้ไขสคริปต์ npm start เพื่อตั้งค่า $PORT :

   รวมรายการนี้เข้ากับ package.json :

   {
     "scripts" : {
       "dev" : " next " ,
       "build" : " next build " ,
       "start" : " next start -p $PORT "
     }
   }

   ️ ในเดือนมีนาคม 2019 Heroku เริ่มใช้งาน npm run build โดยอัตโนมัติดังนั้นรายการสคริปต์ heroku-postbuild แบบเก่าจึงไม่จำเป็นต้องใช้อีกต่อไป

2. ตรวจสอบให้แน่ใจว่าแอพเป็น repo git โดยไม่สนใจไดเรกทอรีท้องถิ่นเท่านั้น:

   git init
   (echo node_modules/ && echo .next/) >> .gitignore

3. สร้างแอพ Heroku:

   heroku create $APP_NAME

4. ปรับใช้:

   git add .
   git commit -m ' Next.js app on Heroku '
   git push heroku main 

   ณ วันที่กรกฎาคม 2563 Heroku สนับสนุน git push heroku main และสนับสนุนการใช้งาน การสนับสนุนชื่อสาขาของ 'อาจารย์' จะยังคงมีอยู่สำหรับความเข้ากันได้ย้อนหลัง

5. ♻ปรับใช้การเปลี่ยนแปลง: เพิ่ม, comp, & push อีกครั้ง

กำหนดค่าที่กำหนดเอง

ถัดไปสนับสนุนการกำหนดค่า Build & Runtime ผ่านไฟล์ next.config.js

ใช้ตัวแปรสภาพแวดล้อม (heroku config vars) ภายในส่วนประกอบ React ของคุณไม่จำเป็นต้องสร้างใหม่! เพียงตั้งค่า next.config.js ค่าจากสภาพแวดล้อมของเซิร์ฟเวอร์โดยใช้วัตถุ process.env