การใช้งาน Container App ด้วย NextJS

back4app containers เป็นแพลตฟอร์มที่ทรงพลังสำหรับการโฮสต์แอปพลิเคชัน next js ด้วยความสามารถในการปรับใช้แอป next js ที่ใช้ docker โดยอัตโนมัติ คุณสามารถเปิดตัวโปรเจกต์ของคุณในสภาพแวดล้อมที่สามารถปรับขนาดได้และยืดหยุ่นได้อย่างง่ายดาย ในคู่มือนี้ เราจะพาคุณไปผ่านกระบวนการเตรียมและปรับใช้แอปพลิเคชัน next js ของคุณบน back4app containers โดยครอบคลุมทุกอย่างตั้งแต่โปรเจกต์ง่ายๆ ไปจนถึงการตั้งค่าที่ซับซ้อนมากขึ้น เราจะเริ่มต้นด้วยการเตรียมการที่จำเป็น จากนั้นจะไปที่การทำให้แอปพลิเคชันเป็น docker ทดสอบในเครื่อง ผลักดันโปรเจกต์ไปยัง github ตั้งค่าโปรเจกต์บน back4app containers ตรวจสอบการปรับใช้ และแก้ไขปัญหาทั่วไป หากคุณมีคำถามหรือความคิดเห็นใดๆ ยินดีต้อนรับให้เข้าร่วมการสนทนาในช่อง #containers บน back4app community ใน slack คุณยังสามารถติดต่อเราที่ community\@back4app com ได้ตลอดเวลา ในทุกเวลา หากคุณต้องการตรวจสอบโปรเจกต์ next js ที่ทำงานได้ตัวอย่างบน back4app containers ให้ไปที่ https //github com/templates back4app/containers nextjs sample https //github com/templates back4app/containers nextjs sample 1 เตรียมแอปพลิเคชัน next js ของคุณ ก โครงสร้างโปรเจกต์ ตรวจสอบให้แน่ใจว่าแอปพลิเคชัน next js ของคุณมีโครงสร้างไดเรกทอรีที่เหมาะสม โดยมีไฟล์และโฟลเดอร์ที่จำเป็นทั้งหมด เช่น pages , public , components , และ styles , จัดระเบียบอย่างเหมาะสม จุดเริ่มต้นหลักสำหรับแอปพลิเคชันของคุณควรเป็น pages/index js หรือ pages/index jsx ไฟล์ b ข้อกำหนด ตรวจสอบว่าข้อกำหนดที่จำเป็นทั้งหมดถูกระบุใน package json ไฟล์ รวมถึงเวอร์ชันที่ถูกต้องของพวกเขา ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งข้อกำหนดทั้งหมดโดยใช้ npm install หรือ yarn install เพื่อสร้าง package lock json หรือ yarn lock ไฟล์ c กระบวนการสร้าง สำหรับโครงการที่ซับซ้อนมากขึ้นซึ่งเกี่ยวข้องกับกระบวนการสร้าง ให้แน่ใจว่าสคริปต์และการกำหนดค่าการสร้างของคุณ (เช่น webpack, babel หรือ next js) ถูกตั้งค่าอย่างถูกต้อง คุณควรสามารถเรียกใช้กระบวนการสร้างในเครื่องได้โดยไม่มีปัญหา d ตัวแปรสภาพแวดล้อม หากแอปพลิเคชันของคุณขึ้นอยู่กับตัวแปรสภาพแวดล้อม ให้แน่ใจว่าคุณมี env ไฟล์ที่มีตัวแปรที่จำเป็นกำหนดไว้ เมื่อทำการปรับใช้ไปยัง back4app containers คุณจะต้องกำหนดค่าตัวแปรสภาพแวดล้อมเหล่านี้ในการตั้งค่าการปรับใช้ e การตั้งค่าเซิร์ฟเวอร์ (ถ้าใช้ได้) หากแอปพลิเคชัน next js ของคุณรวมถึงเซิร์ฟเวอร์ที่กำหนดเอง (เช่น express) ให้แน่ใจว่ามันถูกตั้งค่าและกำหนดค่าอย่างถูกต้องเพื่อให้บริการแอปพลิเคชัน next js ของคุณ ทดสอบเซิร์ฟเวอร์ของคุณในเครื่องเพื่อให้แน่ใจว่ามันทำงานตามที่คาดหวัง f การเพิ่มประสิทธิภาพแอปพลิเคชัน เพิ่มประสิทธิภาพแอปพลิเคชัน next js ของคุณโดยการลดขนาดของบันเดิล ใช้การแบ่งโค้ด และดำเนินการตามแนวทางปฏิบัติที่ดีที่สุดด้านประสิทธิภาพ ใช้เครื่องมือเช่น lighthouse เพื่อตรวจสอบแอปพลิเคชันของคุณและแก้ไขปัญหาด้านประสิทธิภาพหรือการเข้าถึง g ความเข้ากันได้กับเบราว์เซอร์ ทดสอบแอปพลิเคชันของคุณในหลายเบราว์เซอร์และอุปกรณ์เพื่อให้แน่ใจว่าการแสดงผลและฟังก์ชันการทำงานถูกต้อง เมื่อคุณได้ตรวจสอบและเตรียมแอปพลิเคชัน next js ของคุณอย่างละเอียดแล้ว คุณสามารถดำเนินการไปยังขั้นตอนถัดไป ซึ่งคือการสร้าง dockerfile สำหรับโปรเจกต์ของคุณ 2 การสร้าง docker การสร้าง docker สำหรับแอปพลิเคชัน next js เกี่ยวข้องกับการสร้าง dockerfile ในไดเรกทอรีหลักของโปรเจกต์ของคุณ dockerfile จะมีคำสั่งในการสร้างภาพ docker ของแอปพลิเคชันของคุณ ซึ่งสามารถนำไปใช้งานใน back4app containers ได้ นี่คือคำอธิบายโดยละเอียดเกี่ยวกับวิธีการสร้าง dockerfile สำหรับแอปพลิเคชัน next js ทั่วไป 1 สร้างไฟล์ใหม่ชื่อ dockerfile (โดยไม่มีนามสกุลไฟล์) ในไดเรกทอรีหลักของแอปพลิเคชัน next js ของคุณ 2 กำหนดภาพพื้นฐาน เริ่ม dockerfile โดยการระบุภาพพื้นฐานโดยใช้คำสั่ง from สำหรับแอปพลิเคชัน next js ทั่วไป ภาพพื้นฐานควรเป็นภาพ node js เช่น node 14 หรือ node 16 from node 14 3 ตั้งค่าไดเรกทอรีการทำงาน ใช้คำสั่ง workdir เพื่อตั้งค่าไดเรกทอรีการทำงานสำหรับแอปพลิเคชันของคุณภายใน docker container นี่คือที่ที่ไฟล์แอปพลิเคชันของคุณจะถูกเก็บและดำเนินการ workdir /app 4 คัดลอก package json และ package lock json คัดลอกไฟล์ package json และ package lock json จากเครื่องของคุณไปยัง docker container โดยใช้คำสั่ง copy ไฟล์เหล่านี้จำเป็นสำหรับการติดตั้งความต้องการของแอปพลิเคชันของคุณ copy package json / 5 ติดตั้ง dependencies ใช้คำสั่ง run เพื่อติดตั้ง dependencies ของแอปพลิเคชันของคุณจากไฟล์ package json โดยทั่วไปจะทำโดยใช้ npm ci ซึ่งจะติดตั้งเวอร์ชัน dependencies ที่ระบุในไฟล์ package lock json อย่างแม่นยำ run npm ci 6 คัดลอกไฟล์โปรเจกต์ที่เหลือ ใช้คำสั่ง copy อีกครั้งเพื่อคัดลอกไฟล์และโฟลเดอร์ที่เหลือจากเครื่องของคุณไปยัง docker container copy 7 สร้างแอปพลิเคชัน next js เพิ่มคำสั่ง run เพื่อสร้างแอปพลิเคชัน next js ของคุณโดยใช้สคริปต์การสร้างของคุณ โดยทั่วไปคือ npm run build ซึ่งจะสร้างเวอร์ชันที่พร้อมสำหรับการผลิตของแอปพลิเคชัน next js ของคุณในโฟลเดอร์ next run npm run build 8 กำหนดค่าเซิร์ฟเวอร์ คุณต้องการเซิร์ฟเวอร์เพื่อให้บริการแอปพลิเคชัน next js ที่คุณสร้างขึ้น ตัวเลือกทั่วไปคือเซิร์ฟเวอร์ next js ที่ติดตั้งมาแล้ว ก่อนอื่นให้ติดตั้งเซิร์ฟเวอร์นี้ทั่วไประหว่าง docker container โดยใช้คำสั่ง run run npm install g next 9 เปิดเผยพอร์ตเซิร์ฟเวอร์ ใช้คำสั่ง expose เพื่อระบุพอร์ตที่เซิร์ฟเวอร์ของคุณจะทำงานภายใน docker container ตัวอย่างเช่น คุณสามารถใช้พอร์ต 3000 expose 3000 10 เริ่มเซิร์ฟเวอร์ ใช้คำสั่ง cmd เพื่อระบุคำสั่งที่เริ่มเซิร์ฟเวอร์เพื่อให้บริการแอปพลิเคชัน next js ที่คุณสร้างขึ้น ด้วยเซิร์ฟเวอร์ next js ที่ติดตั้งมาแล้ว คุณสามารถระบุสคริปต์เริ่มต้นและหมายเลขพอร์ต cmd \["next", "start", " p", "3000"] dockerfile ที่สมบูรณ์สำหรับแอปพลิเคชัน next js แบบทั่วไปควรมีลักษณะดังนี้ from node 14 workdir /app copy package json / run npm ci copy run npm run build run npm install g next expose 3000 cmd \["next", "start", " p", "3000"] ตัวอย่าง dockerfile อื่น ๆ ที่คุณสามารถใช้เป็นข้อมูลอ้างอิง ตัวอย่างที่ 1 การใช้เซิร์ฟเวอร์ nginx หากคุณต้องการใช้เซิร์ฟเวอร์ nginx เพื่อให้บริการแอปพลิเคชัน next js ของคุณ คุณสามารถสร้าง dockerfile แบบหลายขั้นตอน ในกรณีนี้ คุณจะต้องสร้างแอปพลิเคชัน next js ก่อนแล้วจึงคัดลอกไฟล์ที่สร้างขึ้นไปยังเซิร์ฟเวอร์ nginx \# stage 1 build the next js application from node 14 as builder workdir /app copy package json / run npm ci copy run npm run build \# stage 2 set up the nginx server from nginx\ stable alpine copy from=builder /app/ next /usr/share/nginx/html copy from=builder /app/public /usr/share/nginx/html/ next/static copy nginx conf /etc/nginx/conf d/default conf โปรดสร้างไฟล์ nginx conf ที่เหมาะสมเพื่อกำหนดค่าเซิร์ฟเวอร์ nginx อย่างถูกต้อง ตัวอย่างที่ 2 การใช้เซิร์ฟเวอร์ที่กำหนดเอง หากคุณมีเซิร์ฟเวอร์ที่กำหนดเองสำหรับแอปพลิเคชัน next js ของคุณ คุณสามารถปรับแต่ง dockerfile ตามนั้น นี่คือตัวอย่างการใช้ไฟล์ server js ที่กำหนดเอง from node 14 workdir /app copy package json / run npm ci copy run npm run build expose 3000 cmd \["node", "server js"] ในตัวอย่างนี้ เซิร์ฟเวอร์ที่กำหนดเองจะเริ่มต้นด้วยคำสั่ง node server js แทนที่จะใช้เซิร์ฟเวอร์ next js 3 สร้างและรัน docker container หลังจากสร้าง dockerfile แล้ว คุณสามารถสร้างภาพ docker และรัน container จากมัน ใช้คำสั่งต่อไปนี้เพื่อสร้างและรัน container docker build t your image name docker run p 3000 3000 your image name แทนที่ "your image name" ด้วยชื่อสำหรับภาพ docker ของคุณ เมื่อ container กำลังทำงาน คุณสามารถเข้าถึงแอปพลิเคชัน next js ของคุณที่ http //localhost 3000 http //localhost 3000 ในเว็บเบราว์เซอร์ของคุณ 4 ทดสอบโปรเจกต์ของคุณในเครื่อง ก่อนที่จะนำแอปพลิเคชัน next js ของคุณไปใช้งานบน back4app containers สิ่งสำคัญคือต้องทดสอบในเครื่องโดยใช้ docker ซึ่งจะช่วยให้แน่ใจว่าแอปพลิเคชันของคุณทำงานตามที่คาดหวังและช่วยให้คุณระบุและแก้ไขปัญหาก่อนการนำไปใช้งาน สร้างภาพ docker สำหรับแอปพลิเคชัน next js ของคุณ ในเทอร์มินัลของคุณ ให้ไปที่ไดเรกทอรีรากของโปรเจกต์ของคุณและรันคำสั่งต่อไปนี้ โดยแทนที่ your app name ด้วยชื่อของแอปพลิเคชันของคุณ docker build t your app name เรียกใช้ docker container บนเครื่องของคุณ ถัดไป เรียกใช้คำสั่งต่อไปนี้เพื่อเริ่ม docker container บนเครื่องของคุณ คำสั่งนี้จะทำการแมพพอร์ตที่เปิดเผยของ container (เช่น 3000) ไปยังพอร์ตบนเครื่องของคุณ (เช่น 3000) docker run p 3000 3000 your app name ทดสอบแอปพลิเคชันของคุณ เปิดเว็บเบราว์เซอร์และไปที่ http //localhost 3000 http //localhost 3000 เพื่อดูแอปพลิเคชัน next js ของคุณ ตรวจสอบให้แน่ใจว่าทุกอย่างทำงานตามที่คาดหวัง หากคุณพบปัญหาใด ๆ ให้แก้ไขก่อนที่จะไปยังขั้นตอนถัดไป 5 ผลักดันโปรเจกต์ของคุณไปยัง github สร้าง gitignore ไฟล์ในไดเรกทอรีรากของโปรเจกต์ของคุณเพื่อไม่ให้รวมไฟล์ที่ไม่จำเป็นหรือไฟล์ที่ละเอียดอ่อนจากที่เก็บของคุณ (เช่น node modules , env , build , เป็นต้น) เริ่มต้นที่เก็บ git ทำการ commit ไฟล์โปรเจกต์ของคุณ และผลักดันไปยังที่เก็บระยะไกล (เช่น บน github) git add git commit m "initial commit" git remote add origin \<your remote repo url> git push u origin master 6 ปรับใช้แอปพลิเคชันของคุณบน back4app containers หลังจากสร้างบัญชี back4app ของคุณแล้ว คุณสามารถทำตามขั้นตอนที่ระบุในเอกสาร 1 เชื่อมต่อ github repo ของคุณกับ back4app https //www back4app com/docs containers/integrate with github 2 เตรียมโปรเจกต์ของคุณสำหรับการปรับใช้ https //www back4app com/docs containers/prepare your deployment โดยสรุป คอนเทนเนอร์จะปฏิบัติตามคำแนะนำที่ระบุใน dockerfile ของคุณและเริ่มสร้างแอปของคุณ 7 ตรวจสอบการปรับใช้และแก้ไขข้อผิดพลาดที่อาจเกิดขึ้น ติดตามบันทึกการปรับใช้และสถานะบนแดชบอร์ด back4app containers แก้ไขข้อผิดพลาดหรือปัญหาที่เกิดขึ้นระหว่างการปรับใช้ ในกรณีของโปรเจกต์ที่ซับซ้อนมากขึ้น ให้แน่ใจว่าบริการที่จำเป็นทั้งหมด (เช่น ฐานข้อมูลหรือ api ภายนอก) ได้รับการกำหนดค่าและเข้าถึงได้อย่างถูกต้อง 8 แก้ไขปัญหาทั่วไป ข้อผิดพลาดในการปรับใช้ทั่วไปเมื่อรันแอป next js บน back4app containers มีการระบุไว้ ที่นี่ https //www back4app com/docs containers/troubleshooting ข้อผิดพลาดทั่วไปอื่น ๆ เมื่อปรับใช้แอปพลิเคชัน next js ได้แก่ การกำหนดค่าพอร์ตไม่ถูกต้อง แอปพลิเคชัน next js ควรได้รับการกำหนดค่าให้ทำงานบนพอร์ตที่ระบุเมื่อปรับใช้บน back4app containers หากแอปพลิเคชันยังไม่สามารถเข้าถึงได้ ให้ตรวจสอบ dockerfile เพื่อให้แน่ใจว่าพอร์ตที่ถูกต้องถูกเปิดเผย (เช่น expose 3000 สำหรับพอร์ต 3000) การพึ่งพาที่ไม่เข้ากันหรือขาดหายไป ให้แน่ใจว่าการพึ่งพาที่จำเป็นทั้งหมดถูกระบุในไฟล์ package json และเวอร์ชันของพวกเขาเข้ากันได้กับกันและกับโค้ดแอปพลิเคชันของคุณ การพึ่งพาที่ขาดหายไปหรือไม่เข้ากันอาจทำให้เกิดข้อผิดพลาดในระหว่างการทำงาน ตัวแปรสภาพแวดล้อมหรือการกำหนดค่าที่ไม่ถูกต้อง ตรวจสอบว่าคุณแอปพลิเคชันขึ้นอยู่กับตัวแปรสภาพแวดล้อมหรือไฟล์การกำหนดค่าเฉพาะหรือไม่ และตรวจสอบให้แน่ใจว่ามีการตั้งค่าอย่างถูกต้องในสภาพแวดล้อม back4app containers ตั้งค่าตัวแปรสภาพแวดล้อมที่จำเป็นใน dockerfile ของคุณโดยใช้คำสั่ง env แอปพลิเคชันล่มหรือข้อยกเว้นที่ไม่ได้จัดการ ข้อยกเว้นที่ไม่ได้จัดการหรือการล่มในโค้ดแอปพลิเคชัน next js ของคุณอาจทำให้การปรับใช้ล้มเหลวหรือพฤติกรรมที่ไม่คาดคิด ตรวจสอบบันทึกแอปพลิเคชันของคุณสำหรับข้อความแสดงข้อผิดพลาดใด ๆ และแก้ไขปัญหาในโค้ดของคุณ ตรวจสอบบันทึกของคอนเทนเนอร์โดยการรัน docker logs your app name เพื่อตรวจสอบว่ามีข้อผิดพลาดหรือข้อยกเว้นใด ๆ ที่ถูกโยนออกมา ใช้เครื่องมืออย่าง sentry เพื่อติดตามและตรวจสอบข้อผิดพลาดในแอปพลิเคชันของคุณ การกำหนดค่าการเรนเดอร์ฝั่งเซิร์ฟเวอร์ หากแอปพลิเคชัน next js ของคุณใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (ssr) ให้ตรวจสอบให้แน่ใจว่าการตั้งค่า ssr ของคุณถูกกำหนดค่าอย่างถูกต้องใน dockerfile ของคุณและเริ่มแอปพลิเคชันของคุณโดยใช้จุดเริ่มต้นที่ถูกต้อง 9 ปรับขนาดแอปพลิเคชันของคุณ สำหรับโครงการที่ซับซ้อนมากขึ้นซึ่งต้องการทรัพยากรเพิ่มเติมหรือการปรับขนาดแนวนอน/แนวตั้ง ให้พิจารณาอัปเกรดแผน back4app containers ของคุณเพื่อรองรับการจราจรและโหลดที่เพิ่มขึ้น 10 ตัวอย่างแอปพลิเคชัน สำหรับโครงการตัวอย่างแอปพลิเคชัน next js คุณสามารถไปที่ https //github com/templates back4app/containers nextjs sample